From ff6ca12c891f61902004685070a9397a117b6a41 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 13 Feb 2014 11:48:23 -0800 Subject: [PATCH] (less) replace .visible-{size} with .visible-{size}-{display} ; fixes #8869 --- mixins.less | 2 + responsive-utilities.less | 101 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) diff --git a/mixins.less b/mixins.less index 33117f2ce68e..397da934abdb 100644 --- a/mixins.less +++ b/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/responsive-utilities.less b/responsive-utilities.less index 027a264107b8..93f2e8ea899f 100644 --- a/responsive-utilities.less +++ b/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 {