remove mixin from utility class, and add show-in-responsive utility class as well,
this will make sure that any element with hide-in-responsive or show-in-responsive will have the preferred behaviour without adding a mixin or caring about selector-priorities
-/// use to hide e.g. labels in responsive-mode. never(!) use this mixin
+/// use to hide e.g. labels in responsive-mode. never(!) use this class
/// to hide features (they still need to be accessible one way or another)
-@mixin hide-in-responsive {
+.hide-in-responsive {
@media (max-width: $responsivenessBreakPoint) {
- display: none;
+ display: none !important;
}
}
-/// use to hide e.g. labels in responsive-mode. never(!) use this class
+
+/// use to hide e.g. labels when NOT IN responsive-mode. never(!) use this class
/// to hide features (they still need to be accessible one way or another)
-.hide-in-responsive {
- @include hide-in-responsive;
+.show-in-responsive {
+ @media (min-width: $responsivenessBreakPoint) {
+ display: none !important;
+ }
}
