From c0bbad209c2008bbe881fe896d4bc0cec018305b Mon Sep 17 00:00:00 2001
From: Andrew <andrewtjoslin@gmail.com>
Date: Wed, 3 Dec 2014 10:35:04 -0700
Subject: [PATCH] fix(layout): make [hide] attr work properly with all device
 sizes

---
 docs/app/partials/layout-options.tmpl.html |  2 +-
 src/core/style/layout.scss                 | 38 ++++++++++++++--------
 2 files changed, 26 insertions(+), 14 deletions(-)

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 @@
         <md-subheader hide-sm>
           I'm hidden on mobile and shown on larger devices.
         </md-subheader>
-        <md-subheader hide show-sm>
+        <md-subheader hide-gt-sm>
           I'm shown on mobile and hidden on larger devices.
         </md-subheader>
       </div>
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);