diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html
index 333f6919586..86974d9a44a 100644
--- a/docs/app/partials/layout-options.tmpl.html
+++ b/docs/app/partials/layout-options.tmpl.html
@@ -126,7 +126,7 @@
I'm hidden on mobile and shown on larger devices.
-
+
I'm shown on mobile and hidden on larger devices.
diff --git a/src/core/style/layout.scss b/src/core/style/layout.scss
index ae68d4d933e..c67e81a5333 100644
--- a/src/core/style/layout.scss
+++ b/src/core/style/layout.scss
@@ -92,21 +92,25 @@
// ------------------------------
@include flex-properties-for-name();
-[hide]:not([show]):not([show-sm]):not([show-md]):not([show-lg]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]) {
+[hide]:not([show]) {
display: none;
}
@media (max-width: $layout-breakpoint-sm) {
- [hide-sm]:not([show-sm]) {
- display: none;
+ [hide-sm], [hide] {
+ &:not([show-sm]) {
+ display: none;
+ }
}
@include layout-for-name(sm);
@include flex-properties-for-name(sm);
}
@media (min-width: $layout-breakpoint-sm) {
- [hide-gt-sm]:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
- display: none;
+ [hide-gt-sm], [hide] {
+ &:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
+ display: none;
+ }
}
@include layout-for-name(gt-sm);
@@ -114,16 +118,20 @@
}
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
- [hide-md]:not([show-md]) {
- display: none;
+ [hide-md], [hide] {
+ &:not([show-md]) {
+ display: none;
+ }
}
@include layout-for-name(md);
@include flex-properties-for-name(md);
}
@media (min-width: $layout-breakpoint-md) {
- [hide-gt-md]:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
- display: none;
+ [hide-gt-md], [hide] {
+ &:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
+ display: none;
+ }
}
@include layout-for-name(gt-md);
@@ -131,16 +139,20 @@
}
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
- [hide-lg]:not([show-lg]) {
- display: none;
+ [hide-lg], [hide] {
+ &:not([show-lg]) {
+ display: none;
+ }
}
@include layout-for-name(lg);
@include flex-properties-for-name(lg);
}
@media (min-width: $layout-breakpoint-lg) {
- [hide-gt-lg]:not([show-gt-lg]) {
- display: none;
+ [hide-gt-lg], [hide] {
+ &:not([show-gt-lg]) {
+ display: none;
+ }
}
@include layout-for-name(gt-lg);