How to find Responsive Css file to edit

Post Reply
ashrafpm
Posts: 6
Joined: 31 May 2013, 09:06

24 Jun 2020, 08:19

Using mirage theme for my project and I am not able to find some stylesheet files referring to make a responsive layout in the workspace, can you help me here and I find the following CSS file to edit as per our requirements, want to know where is the physical path the following stylesheet in mirage project folder, pls help.
http://localhost:8080/MKSGCRMClient/jav ... 2902038000

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

24 Jun 2020, 09:24

Hi,

If you want to change mobile breakpoint, please use $mobileBreakpoint:991px; in _common.scss then provide new CSS files using SASS command. Also, which breakpoint do you want to change? Could you give me more details?

Best Regards,

ashrafpm
Posts: 6
Joined: 31 May 2013, 09:06

24 Jun 2020, 12:55

HI,
thank you for response.
what we are trying is that, we are working on compatible UI components that will work for Desktop and Mobile variants.
Now while working what we found was that, there are some CSS files that are getting generated automatically for mobile view but we are not able to find that stylesheet in the workspace.
For Eg - (after inspecting in chrome while in mobileview)

Code: Select all

.ui-helper-hidden-accessible input,.ui-helper-hidden-accessible select{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.ui-shadow{-moz-box-shadow:0 5px 10px rgba(0,0,0,0.8);-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.8);box-shadow:0 5px 10px rgba(0,0,0,0.8)}.ui-overlay-visible{visibility:visible}ui-overlay-visible *{visibility:visible!important}.ui-overlay-hidden{visibility:hidden}.ui-overlay-hidden *{visibility:hidden!important}.ui-overflow-hidden{overflow:hidden}.ui-datepicker .ui-datepicker-current.ui-priority-secondary{opacity:1}.ui-icon-blank{background-position:16px 16px}@media only all{th.ui-column-p-6,td.ui-column-p-6,th.ui-column-p-5,td.ui-column-p-5,th.ui-column-p-4,td.ui-column-p-4,th.ui-column-p-3,td.ui-column-p-3,th.ui-column-p-2,td.ui-column-p-2,th.ui-column-p-1,td.ui-column-p-1{display:none}}@media screen and (min-width:20em){th.ui-column-p-1,td.ui-column-p-1{display:table-cell}}@media screen and (min-width:30em){th.ui-column-p-2,td.ui-column-p-2{display:table-cell}}@media screen and (min-width:40em){th.ui-column-p-3,td.ui-column-p-3{display:table-cell}}@media screen and (min-width:50em){th.ui-column-p-4,td.ui-column-p-4{display:table-cell}}@media screen and (min-width:60em){th.ui-column-p-5,td.ui-column-p-5{display:table-cell}}@media screen and (min-width:70em){th.ui-column-p-6,td.ui-column-p-6{display:table-cell}}.ui-icon.fa,.ui-widget .ui-icon.fa,.ui-icon.fab,.ui-widget .ui-icon.fab,.ui-icon.fas,.ui-widget .ui-icon.fas,.ui-icon.far,.ui-widget .ui-icon.far,.ui-icon.fal,.ui-widget .ui-icon.fal{background:none repeat scroll 0 0 transparent!important;text-indent:0!important}.ui-widget .ui-icon.pi,.ui-icon.pi{background:none repeat scroll 0 0 transparent!important;text-indent:0!important}.p-grid,.p-grid>div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
/*!
 * jQuery UI CSS Framework 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
these CSS, how do we get to edit it ??

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

25 Jun 2020, 08:45

Please review: https://github.com/primefaces/primeface ... ery.ui.css

You can override the styles in this file according to your need.

Best Regards,

Post Reply

Return to “Mirage - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest