From 5b3e6eb563f6f3a5836b89a8b004190e7fd40219 Mon Sep 17 00:00:00 2001
From: Elvis Ratzlaff <eratzlaff@adelantos.com.py>
Date: Mon, 19 Aug 2013 00:23:53 -0400
Subject: [PATCH 1/3] make visible/hidden classes mixable

---
 less/responsive-utilities.less | 160 ++++++++++++++++++++++++---------
 1 file changed, 116 insertions(+), 44 deletions(-)

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 062d6820ce..b83a75acfc 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -36,99 +36,171 @@
 // Visibility utilities
 
 .visible-xs {
-  .responsive-visibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-invisibility();
+  .responsive-invisibility();
+  @media (max-width: @screen-phone-max) {
+    .responsive-visibility();
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-invisibility();
+  &.visible-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-visibility();
+    }
   }
-  @media (min-width: @screen-lg) {
-    .responsive-invisibility();
+  &.visible-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-visibility();
+    }    
+  }
+  &.visible-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-visibility();
+    }    
   }
 }
 .visible-sm {
   .responsive-invisibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  &.visible-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-visibility();
+    }    
+  }
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-invisibility();
+  &.visible-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-visibility();
+    }    
   }
-  @media (min-width: @screen-lg) {
-    .responsive-invisibility();
+  &.visible-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-visibility();
+    }    
   }
 }
 .visible-md {
   .responsive-invisibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-invisibility();
+  &.visible-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-visibility();
+    }    
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  &.visible-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-visibility();
+    }
+  }
+  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
     .responsive-visibility();
   }
-  @media (min-width: @screen-lg) {
-    .responsive-invisibility();
+  &.visible-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-visibility();
+    }    
   }
 }
 .visible-lg {
   .responsive-invisibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-invisibility();
+  &.visible-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-visibility();
+    }    
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-invisibility();
+  &.visible-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-visibility();
+    }
   }
-  @media (min-width: @screen-lg) {
+  &.visible-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-visibility();
+    }    
+  }
+  @media (min-width: @screen-large-desktop) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
-  .responsive-invisibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-visibility();
+  .responsive-visibility();
+  @media (max-width: @screen-phone-max) {
+    .responsive-invisibility();
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-visibility();
+  &.hidden-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-invisibility();
+    }    
   }
-  @media (min-width: @screen-lg) {
-    .responsive-visibility();
+  &.hidden-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-invisibility();
+    }    
+  }
+  &.hidden-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-invisibility();
+    }    
   }
 }
 .hidden-sm {
   .responsive-visibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  &.hidden-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-invisibility();
+    }
+  }
+  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-visibility();
+  &.hidden-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-invisibility();
+    }    
   }
-  @media (min-width: @screen-lg) {
-    .responsive-visibility();
+  &.hidden-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-invisibility();
+    }    
   }
 }
 .hidden-md {
   .responsive-visibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-visibility();
+  &.hidden-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-invisibility();
+    }    
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
+  &.hidden-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-invisibility();
+    }    
+  }
+  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
     .responsive-invisibility();
   }
-  @media (min-width: @screen-lg) {
-    .responsive-visibility();
+  &.hidden-lg {
+    @media (min-width: @screen-large-desktop) {
+      .responsive-invisibility();
+    }    
   }
 }
 .hidden-lg {
   .responsive-visibility();
-  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
-    .responsive-visibility();
+  &.hidden-xs {
+    @media (max-width: @screen-phone-max) {
+      .responsive-invisibility();
+    }    
   }
-  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
-    .responsive-visibility();
+  &.hidden-sm {
+    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+      .responsive-invisibility();
+    }    
   }
-  @media (min-width: @screen-lg) {
+  &.hidden-md {
+    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+      .responsive-invisibility();
+    }    
+  }
+  @media (min-width: @screen-large-desktop) {
     .responsive-invisibility();
   }
 }

From 988c03d4621b921ea3bf17eb358b65eab4f1a627 Mon Sep 17 00:00:00 2001
From: Elvis Ratzlaff <eratzlaff@adelantos.com.py>
Date: Mon, 19 Aug 2013 00:46:09 -0400
Subject: [PATCH 2/3] Variable name fix

---
 less/responsive-utilities.less | 64 +++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index b83a75acfc..c756b23615 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -37,21 +37,21 @@
 
 .visible-xs {
   .responsive-invisibility();
-  @media (max-width: @screen-phone-max) {
+  @media (max-width: @screen-xs-max) {
     .responsive-visibility();
   }
   &.visible-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }    
   }
   &.visible-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-visibility();
     }    
   }
@@ -59,20 +59,20 @@
 .visible-sm {
   .responsive-invisibility();
   &.visible-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-visibility();
     }    
   }
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
   &.visible-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }    
   }
   &.visible-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-visibility();
     }    
   }
@@ -80,20 +80,20 @@
 .visible-md {
   .responsive-invisibility();
   &.visible-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-visibility();
     }    
   }
   &.visible-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
   &.visible-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-visibility();
     }    
   }
@@ -101,42 +101,42 @@
 .visible-lg {
   .responsive-invisibility();
   &.visible-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-visibility();
     }    
   }
   &.visible-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-visibility();
     }
   }
   &.visible-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-visibility();
     }    
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
   .responsive-visibility();
-  @media (max-width: @screen-phone-max) {
+  @media (max-width: @screen-xs-max) {
     .responsive-invisibility();
   }
   &.hidden-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-invisibility();
     }    
   }
@@ -144,20 +144,20 @@
 .hidden-sm {
   .responsive-visibility();
   &.hidden-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-invisibility();
     }
   }
-  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+  @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
   &.hidden-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-invisibility();
     }    
   }
@@ -165,20 +165,20 @@
 .hidden-md {
   .responsive-visibility();
   &.hidden-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }    
   }
-  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+  @media (min-width: @screen-md) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
   &.hidden-lg {
-    @media (min-width: @screen-large-desktop) {
+    @media (min-width: @screen-lg) {
       .responsive-invisibility();
     }    
   }
@@ -186,21 +186,21 @@
 .hidden-lg {
   .responsive-visibility();
   &.hidden-xs {
-    @media (max-width: @screen-phone-max) {
+    @media (max-width: @screen-xs-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-sm {
-    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
+    @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
       .responsive-invisibility();
     }    
   }
   &.hidden-md {
-    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
+    @media (min-width: @screen-md) and (max-width: @screen-md-max) {
       .responsive-invisibility();
     }    
   }
-  @media (min-width: @screen-large-desktop) {
+  @media (min-width: @screen-lg) {
     .responsive-invisibility();
   }
 }

From 7818c5e1868de501e2686ed1ff734c6f337bba79 Mon Sep 17 00:00:00 2001
From: Elvis Ratzlaff <eratzlaff@adelantos.com.py>
Date: Mon, 19 Aug 2013 03:14:38 -0400
Subject: [PATCH 3/3] Add Test case to documentation

---
 css.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/css.html b/css.html
index 5dcf17c9f7..e6a48ad401 100644
--- a/css.html
+++ b/css.html
@@ -2254,6 +2254,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="visible-lg">&#10004; Visible on large</span>
       </div>
     </div>
+    <div class="row responsive-utilities-test hidden-on">
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-sm">Extra small and small</span>
+        <span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-md hidden-lg">Medium and large</span>
+        <span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>  
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-md">Extra small and medium</span>
+        <span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-sm hidden-lg">Small and large</span>
+        <span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>  
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-xs hidden-lg">Extra small and large</span>
+        <span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="hidden-sm hidden-md">Small and medium</span>
+        <span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
+      </div>  
+    </div>
     <h4>Hidden on...</h4>
     <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
     <div class="row responsive-utilities-test hidden-on">
@@ -2275,5 +2303,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="hidden-lg">&#10004; Hidden on large</span>
       </div>
     </div>
+    <div class="row responsive-utilities-test hidden-on">
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-sm">Extra small and small</span>
+        <span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-md visible-lg">Medium and large</span>
+        <span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-md">Extra small and medium</span>
+        <span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-sm visible-lg">Small and large</span>
+        <span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
+      </div>
+      <div class="clearfix visible-xs"></div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-xs visible-lg">Extra small and large</span>
+        <span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
+      </div>
+      <div class="col-xs-6 col-sm-6">
+        <span class="visible-sm visible-md">Small and medium</span>
+        <span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
+      </div>
+    </div>
 
   </div>