From 680038478cf1886fa4cd4202ad4133fba8157979 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 13 Jan 2014 00:16:53 -0800 Subject: [PATCH] replace .visible-{size} with .visible-{size}-{display} ; fixes #8869 --- dist/css/bootstrap.css | 126 ++++++++++++++++++++++++++++++++- docs/assets/css/docs.css | 16 ++--- docs/css.html | 106 +++++++++++++++++---------- less/mixins.less | 2 + less/responsive-utilities.less | 114 +++++++++++++++++++++++++++++ 5 files changed, 316 insertions(+), 48 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index d6189c28747b..b45a7ceb8166 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5105,9 +5105,9 @@ button.close { -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; - -webkit-transform: translate(0, -25%); - -ms-transform: translate(0, -25%); - transform: translate(0, -25%); + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + transform: translate(0, -25%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); @@ -5698,6 +5698,30 @@ td.visible-xs { display: table-cell !important; } } +.visible-xs-block { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +.visible-xs-inline { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +.visible-xs-inline-block { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} .visible-sm, tr.visible-sm, th.visible-sm, @@ -5719,6 +5743,30 @@ td.visible-sm { display: table-cell !important; } } +.visible-sm-block { + display: none !important; +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +.visible-sm-inline { + display: none !important; +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +.visible-sm-inline-block { + display: none !important; +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} .visible-md, tr.visible-md, th.visible-md, @@ -5740,6 +5788,30 @@ td.visible-md { display: table-cell !important; } } +.visible-md-block { + display: none !important; +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} +.visible-md-inline { + display: none !important; +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} +.visible-md-inline-block { + display: none !important; +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} .visible-lg, tr.visible-lg, th.visible-lg, @@ -5761,6 +5833,30 @@ td.visible-lg { display: table-cell !important; } } +.visible-lg-block { + display: none !important; +} +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +.visible-lg-inline { + display: none !important; +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +.visible-lg-inline-block { + display: none !important; +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} @media (max-width: 767px) { .hidden-xs, tr.hidden-xs, @@ -5814,6 +5910,30 @@ td.visible-print { 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, tr.hidden-print, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 64cda346a7c4..bc12aa9cb1f7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -1139,14 +1139,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 dea8f520375b..1e229cd8b738 100644 --- a/docs/css.html +++ b/docs/css.html @@ -307,7 +307,7 @@

Example: Mobile, tablet, desktops

.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
@@ -320,7 +320,7 @@

Example: Mobile, tablet, desktops

.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
{% endhighlight %} @@ -337,7 +337,7 @@

Responsive column resets

.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -349,7 +349,7 @@

Responsive column resets

.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -2568,7 +2568,7 @@

Custom heading

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

@@ -2598,28 +2598,28 @@

Available classes

- .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 @@ -2659,6 +2659,33 @@

Available classes

+

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.

@@ -2666,14 +2693,18 @@

Print classes

- + - + @@ -2685,6 +2716,7 @@

Print classes

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

@@ -2695,48 +2727,48 @@

Visible on...

- ✔ 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
@@ -2745,48 +2777,48 @@

Hidden on...

- ✔ 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 104590730dec..876bed3e0721 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -616,6 +616,7 @@ // Responsive utilities // ------------------------- // More easily include all the states for responsive-utilities.less. +// Note: Deprecated .responsive-visibility() as of v3.1.0 .responsive-visibility() { display: block !important; table& { display: table; } @@ -624,6 +625,7 @@ td& { display: table-cell !important; } } +// Note: Deprecated .responsive-invisibility() as of v3.1.0 .responsive-invisibility() { &, tr&, diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 5a31816af0df..fb03779dda13 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -23,6 +23,7 @@ // Visibility utilities +// Note: Deprecated .visible-xs as of v3.1.0 .visible-xs { .responsive-invisibility(); @@ -30,6 +31,29 @@ .responsive-visibility(); } } +.visible-xs-block { + display: none !important; + + @media (max-width: @screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + display: none !important; + + @media (max-width: @screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + display: none !important; + + @media (max-width: @screen-xs-max) { + display: inline-block !important; + } +} + +// Note: Deprecated .visible-sm as of v3.1.0 .visible-sm { .responsive-invisibility(); @@ -37,6 +61,29 @@ .responsive-visibility(); } } +.visible-sm-block { + display: none !important; + + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + display: none !important; + + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + display: none !important; + + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline-block !important; + } +} + +// Note: Deprecated .visible-md as of v3.1.0 .visible-md { .responsive-invisibility(); @@ -44,6 +91,29 @@ .responsive-visibility(); } } +.visible-md-block { + display: none !important; + + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + display: none !important; + + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + display: none !important; + + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline-block !important; + } +} + +// Note: Deprecated .visible-lg as of v3.1.0 .visible-lg { .responsive-invisibility(); @@ -51,6 +121,28 @@ .responsive-visibility(); } } +.visible-lg-block { + display: none !important; + + @media (min-width: @screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + display: none !important; + + @media (min-width: @screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + display: none !important; + + @media (min-width: @screen-lg-min) { + display: inline-block !important; + } +} + .hidden-xs { @media (max-width: @screen-xs-max) { @@ -78,6 +170,7 @@ // // Media queries are placed on the inside to be mixin-friendly. +// Note: Deprecated .visible-print as of v3.1.0 .visible-print { .responsive-invisibility(); @@ -85,6 +178,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 {