Update RuleDetails for compact mode #728
Conversation
| @@ -63,3 +71,15 @@ hr { | |||
| margin-bottom: var(--pf-global--spacer--md); | |||
| } | |||
| } | |||
|
|
|||
| @media only screen and (max-width: 768px) { | |||
There was a problem hiding this comment.
does this exist as a pf var? feels like we shouldn't be hardcoding this value 🤔
There was a problem hiding this comment.
yep
--pf-global--breakpoint--md | global_breakpoint_md | 768px
There was a problem hiding this comment.
So did a little digging on this... and it looks like it isn't possible use var() in a media query. https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries (unless we want to use a preprocessor?)
There was a problem hiding this comment.
oooooo what about @media only screen and (min-width: $ins-break--md)
where $ins-break--md: var(--pf-global--breakpoint--md)
There was a problem hiding this comment.
actually you dont neet to do that $ins-break--md: var(--pf-global--breakpoint--md); is already defined in
@import '~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all';
There was a problem hiding this comment.
Oooo I had the same thought 😂
I think that approach falls victim to the same issue though. The styles don't seem to apply 🤷♂️🤔
There was a problem hiding this comment.
local definition as well? 🤔 I see the value hardcoded (not the pf var) in a few places.. would hate for us to also do it 😢 will take a look tomorrow 👍
There was a problem hiding this comment.
well... s on the radar w3c/csswg-drafts#2627 but yeah not currently possible in the way would hope
| @@ -17,3 +19,9 @@ | |||
| .categoryLabel { | |||
| margin-left: var(--pf-global--spacer--md) | |||
| } | |||
|
|
|||
| @media only screen and (max-width: 768px) { | |||
There was a problem hiding this comment.
following comment above, set this this to var(--pf-global--breakpoint--md)
Fixes some of the styling for compact mode
Before:
After: