From bdd7651e323a93a4e3d207463451dd374b0a70fa Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 13 Feb 2014 11:48:23 -0800 Subject: [PATCH] replace .visible-{size} with .visible-{size}-{display} ; fixes #8869 --- dist/css/bootstrap.css | 98 ++++++++++++++++++++++++++++++ docs/assets/css/docs.css | 16 ++--- docs/css.html | 106 +++++++++++++++++++++------------ less/mixins.less | 2 + less/responsive-utilities.less | 101 +++++++++++++++++++++++++++++++ 5 files changed, 278 insertions(+), 45 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 654f20d952..0111a171e7 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5678,6 +5678,20 @@ button.close { .visible-lg { display: none !important; } +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} @media (max-width: 767px) { .visible-xs { display: block !important; @@ -5693,6 +5707,21 @@ button.close { display: table-cell !important; } } +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; @@ -5708,6 +5737,21 @@ button.close { display: table-cell !important; } } +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; @@ -5723,6 +5767,21 @@ button.close { display: table-cell !important; } } +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} @media (min-width: 1200px) { .visible-lg { display: block !important; @@ -5738,6 +5797,21 @@ button.close { display: table-cell !important; } } +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} @media (max-width: 767px) { .hidden-xs { display: none !important; @@ -5776,6 +5850,30 @@ button.close { display: table-cell !important; } } +.visible-print-block { + display: none !important; +} +@media print { + .visible-print-block { + display: block !important; + } +} +.visible-print-inline { + display: none !important; +} +@media print { + .visible-print-inline { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; +} +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} @media print { .hidden-print { display: none !important; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 30daae5a20..bebfd33b56 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -1165,14 +1165,14 @@ h1[id] { color: #999; border: 1px solid #ddd; } -.visible-on .col-xs-6 .visible-xs, -.visible-on .col-xs-6 .visible-sm, -.visible-on .col-xs-6 .visible-md, -.visible-on .col-xs-6 .visible-lg, -.hidden-on .col-xs-6 .visible-xs, -.hidden-on .col-xs-6 .visible-sm, -.hidden-on .col-xs-6 .visible-md, -.hidden-on .col-xs-6 .visible-lg { +.visible-on .col-xs-6 .visible-xs-block, +.visible-on .col-xs-6 .visible-sm-block, +.visible-on .col-xs-6 .visible-md-block, +.visible-on .col-xs-6 .visible-lg-block, +.hidden-on .col-xs-6 .visible-xs-block, +.hidden-on .col-xs-6 .visible-sm-block, +.hidden-on .col-xs-6 .visible-md-block, +.hidden-on .col-xs-6 .visible-lg-block { color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; diff --git a/docs/css.html b/docs/css.html index 32204c4f46..7d646a2a80 100644 --- a/docs/css.html +++ b/docs/css.html @@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
@@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
{% endhighlight %} @@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -2569,7 +2569,7 @@ For example, <section> should be wrapped as inline.

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

-

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

+

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Available classes

@@ -2599,28 +2599,28 @@ For example, <section> should be wrapped as inline. - .visible-xs + .visible-xs-* Visible Hidden Hidden Hidden - .visible-sm + .visible-sm-* Hidden Visible Hidden Hidden - .visible-md + .visible-md-* Hidden Hidden Visible Hidden - .visible-lg + .visible-lg-* Hidden Hidden Hidden @@ -2660,6 +2660,33 @@ For example, <section> should be wrapped as inline. +

The .visible-*-* classes for each breakpoint come in 3 variations, depending on the CSS display property value applied when the element is visible:

+
+ + + + + + + + + + + + + + + + + + + + + +
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
+
+

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

+

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.1.0. They are approximately equivalent to .visible-*-block, except with additional special cases for <table>-related elements.

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

@@ -2667,14 +2694,18 @@ For example, <section> should be wrapped as inline. - + - + @@ -2686,6 +2717,7 @@ For example, <section> should be wrapped as inline.
ClassClasses Browser Print
.visible-print + .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
+

The class .visible-print also exists but is deprecated as of v3.1.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Test cases

@@ -2696,48 +2728,48 @@ For example, <section> should be wrapped as inline.
- ✔ Visible on x-small + ✔ Visible on x-small
- ✔ Visible on small + ✔ Visible on small
-
+
Medium - ✔ Visible on medium + ✔ Visible on medium
- ✔ Visible on large + ✔ Visible on large
- ✔ Visible on x-small and small + ✔ Visible on x-small and small
- ✔ Visible on medium and large + ✔ Visible on medium and large
-
+
- ✔ Visible on x-small and medium + ✔ Visible on x-small and medium
- ✔ Visible on small and large + ✔ Visible on small and large
-
+
- ✔ Visible on x-small and large + ✔ Visible on x-small and large
- ✔ Visible on small and medium + ✔ Visible on small and medium
@@ -2746,48 +2778,48 @@ For example, <section> should be wrapped as inline.
- ✔ Hidden on x-small + ✔ Hidden on x-small
- ✔ Hidden on small + ✔ Hidden on small
-
+
Medium - ✔ Hidden on medium + ✔ Hidden on medium
- ✔ Hidden on large + ✔ Hidden on large
- ✔ Hidden on x-small and small + ✔ Hidden on x-small and small
- ✔ Hidden on medium and large + ✔ Hidden on medium and large
-
+
- ✔ Hidden on x-small and medium + ✔ Hidden on x-small and medium
- ✔ Hidden on small and large + ✔ Hidden on small and large
-
+
- ✔ Hidden on x-small and large + ✔ Hidden on x-small and large
- ✔ Hidden on small and medium + ✔ Hidden on small and medium
diff --git a/less/mixins.less b/less/mixins.less index 33117f2ce6..397da934ab 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -632,6 +632,7 @@ // Responsive utilities // ------------------------- // More easily include all the states for responsive-utilities.less. +// Note: Deprecated .responsive-visibility() as of v3.2.0 .responsive-visibility() { display: block !important; table& { display: table; } @@ -640,6 +641,7 @@ td& { display: table-cell !important; } } +// Note: Deprecated .responsive-invisibility() as of v3.2.0 .responsive-invisibility() { display: none !important; } diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 027a264107..93f2e8ea89 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -23,6 +23,7 @@ // Visibility utilities +// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 .visible-xs, .visible-sm, .visible-md, @@ -30,26 +31,104 @@ .responsive-invisibility(); } +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + .visible-xs { @media (max-width: @screen-xs-max) { .responsive-visibility(); } } +.visible-xs-block { + @media (max-width: @screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + @media (max-width: @screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + @media (max-width: @screen-xs-max) { + display: inline-block !important; + } +} + .visible-sm { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .responsive-visibility(); } } +.visible-sm-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline-block !important; + } +} + .visible-md { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .responsive-visibility(); } } +.visible-md-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline-block !important; + } +} + .visible-lg { @media (min-width: @screen-lg-min) { .responsive-visibility(); } } +.visible-lg-block { + @media (min-width: @screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + @media (min-width: @screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + @media (min-width: @screen-lg-min) { + display: inline-block !important; + } +} .hidden-xs { @media (max-width: @screen-xs-max) { @@ -77,6 +156,7 @@ // // Media queries are placed on the inside to be mixin-friendly. +// Note: Deprecated .visible-print as of v3.2.0 .visible-print { .responsive-invisibility(); @@ -84,6 +164,27 @@ .responsive-visibility(); } } +.visible-print-block { + display: none !important; + + @media print { + display: block !important; + } +} +.visible-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} .hidden-print { @media print {