diff options
| -rw-r--r-- | css.html | 56 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 150 |
2 files changed, 167 insertions, 39 deletions
@@ -2355,6 +2355,34 @@ For example, <code><section></code> should be wrapped as inline. <span class="visible-lg">✔ 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">✔ 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">✔ 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">✔ 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">✔ 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">✔ 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">✔ 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"> @@ -2376,5 +2404,33 @@ For example, <code><section></code> should be wrapped as inline. <span class="hidden-lg">✔ 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">✔ 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">✔ 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">✔ 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">✔ 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">✔ 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">✔ Hidden on small and medium</span> + </div> + </div> </div> diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 062d6820c..c756b2361 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,48 +36,84 @@ // 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-xs-max) { + .responsive-visibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } + } + &.visible-lg { + @media (min-width: @screen-lg) { + .responsive-visibility(); + } } } .visible-sm { .responsive-invisibility(); + &.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } + } @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-lg { + @media (min-width: @screen-lg) { + .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-xs-max) { + .responsive-visibility(); + } + } + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } } @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-lg) { - .responsive-invisibility(); + &.visible-lg { + @media (min-width: @screen-lg) { + .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-xs-max) { + .responsive-visibility(); + } } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-invisibility(); + &.visible-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } + } + &.visible-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-visibility(); + } } @media (min-width: @screen-lg) { .responsive-visibility(); @@ -85,48 +121,84 @@ } .hidden-xs { - .responsive-invisibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-visibility(); + .responsive-visibility(); + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } + } + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } } } .hidden-sm { .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-lg { + @media (min-width: @screen-lg) { + .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-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } } @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-lg) { - .responsive-visibility(); + &.hidden-lg { + @media (min-width: @screen-lg) { + .responsive-invisibility(); + } } } .hidden-lg { .responsive-visibility(); - @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { - .responsive-visibility(); - } - @media (min-width: @screen-md) and (max-width: @screen-md-max) { - .responsive-visibility(); + &.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } + } + &.hidden-sm { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } + } + &.hidden-md { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } } @media (min-width: @screen-lg) { .responsive-invisibility(); |