fix(layout): make [hide] attr work properly with all device sizes

angular · Dec 3, 2014 · c0bbad2 · c0bbad2
1 parent a3ce7d8
commit c0bbad2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -92,55 +92,67 @@
 // ------------------------------
 
 @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);
  @include flex-properties-for-name(gt-sm);
 }
 
 @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);
  @include flex-properties-for-name(gt-md);
 }
 
 @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);