Make visibility utility classes responsive when used as LESS mixins

407c9667 · Zac Wasielewski · c587114f · 407c9667
Commit 407c9667 authored 11 years ago by Zac Wasielewski
Hide whitespace changes
Inline Side-by-side

Showing

with 28 additions and 40 deletions
+28 -40
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -35,70 +35,58 @@

 // Visibility utilities

-// For Phones
 .visible-sm {
  .responsive-visibility();
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    .responsive-invisibility();
+  }
+  @media (min-width: @screen-desktop) {
+    .responsive-invisibility();
+  }
 }
 .visible-md {
  .responsive-invisibility();
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    .responsive-visibility();
+  }
+  @media (min-width: @screen-desktop) {
+    .responsive-invisibility();
+  }
 }
 .visible-lg {
  .responsive-invisibility();
-}
-
-.hidden-sm {
-  .responsive-invisibility();
-}
-.hidden-md {
-  .responsive-visibility();
-}
-.hidden-lg {
-  .responsive-visibility();
-}
-
-
-// Tablets & small desktops only
-@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
-  .visible-sm {
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
-  .visible-md {
+  @media (min-width: @screen-desktop) {
    .responsive-visibility();
  }
-  .visible-lg {
-    .responsive-invisibility();
-  }
+}

-  .hidden-sm {
+.hidden-sm {
+  .responsive-invisibility();
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
-  .hidden-md {
-    .responsive-invisibility();
-  }
-  .hidden-lg {
+  @media (min-width: @screen-desktop) {
    .responsive-visibility();
  }
 }
-
-// For desktops
-@media (min-width: @screen-desktop) {
-  .visible-sm {
-    .responsive-invisibility();
-  }
-  .visible-md {
+.hidden-md {
+  .responsive-visibility();
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
-  .visible-lg {
+  @media (min-width: @screen-desktop) {
    .responsive-visibility();
  }
-
-  .hidden-sm {
-    .responsive-visibility();
-  }
-  .hidden-md {
+}
+.hidden-lg {
+  .responsive-visibility();
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
-  .hidden-lg {
+  @media (min-width: @screen-desktop) {
    .responsive-invisibility();
  }
 }