1// 2// Responsive: Utility classes 3// -------------------------------------------------- 4 5 6// IE10 in Windows (Phone) 8 7// 8// Support for responsive views via media queries is kind of borked in IE10, for 9// Surface/desktop in split view and for Windows Phone 8. This particular fix 10// must be accompanied by a snippet of JavaScript to sniff the user agent and 11// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at 12// our Getting Started page for more information on this bug. 13// 14// For more information, see the following: 15// 16// Issue: https://github.com/twbs/bootstrap/issues/10497 17// Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width 18// Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ 19// Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 20 21@at-root { 22 @-ms-viewport { 23 width: device-width; 24 } 25} 26 27 28// Visibility utilities 29// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 30 31@include responsive-invisibility('.visible-xs'); 32@include responsive-invisibility('.visible-sm'); 33@include responsive-invisibility('.visible-md'); 34@include responsive-invisibility('.visible-lg'); 35 36.visible-xs-block, 37.visible-xs-inline, 38.visible-xs-inline-block, 39.visible-sm-block, 40.visible-sm-inline, 41.visible-sm-inline-block, 42.visible-md-block, 43.visible-md-inline, 44.visible-md-inline-block, 45.visible-lg-block, 46.visible-lg-inline, 47.visible-lg-inline-block { 48 display: none !important; 49} 50 51@media (max-width: $screen-xs-max) { 52 @include responsive-visibility('.visible-xs'); 53} 54.visible-xs-block { 55 @media (max-width: $screen-xs-max) { 56 display: block !important; 57 } 58} 59.visible-xs-inline { 60 @media (max-width: $screen-xs-max) { 61 display: inline !important; 62 } 63} 64.visible-xs-inline-block { 65 @media (max-width: $screen-xs-max) { 66 display: inline-block !important; 67 } 68} 69 70@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 71 @include responsive-visibility('.visible-sm'); 72} 73.visible-sm-block { 74 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 75 display: block !important; 76 } 77} 78.visible-sm-inline { 79 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 80 display: inline !important; 81 } 82} 83.visible-sm-inline-block { 84 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 85 display: inline-block !important; 86 } 87} 88 89@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 90 @include responsive-visibility('.visible-md'); 91} 92.visible-md-block { 93 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 94 display: block !important; 95 } 96} 97.visible-md-inline { 98 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 99 display: inline !important; 100 } 101} 102.visible-md-inline-block { 103 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 104 display: inline-block !important; 105 } 106} 107 108@media (min-width: $screen-lg-min) { 109 @include responsive-visibility('.visible-lg'); 110} 111.visible-lg-block { 112 @media (min-width: $screen-lg-min) { 113 display: block !important; 114 } 115} 116.visible-lg-inline { 117 @media (min-width: $screen-lg-min) { 118 display: inline !important; 119 } 120} 121.visible-lg-inline-block { 122 @media (min-width: $screen-lg-min) { 123 display: inline-block !important; 124 } 125} 126 127@media (max-width: $screen-xs-max) { 128 @include responsive-invisibility('.hidden-xs'); 129} 130 131@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 132 @include responsive-invisibility('.hidden-sm'); 133} 134 135@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 136 @include responsive-invisibility('.hidden-md'); 137} 138 139@media (min-width: $screen-lg-min) { 140 @include responsive-invisibility('.hidden-lg'); 141} 142 143 144// Print utilities 145// 146// Media queries are placed on the inside to be mixin-friendly. 147 148// Note: Deprecated .visible-print as of v3.2.0 149 150@include responsive-invisibility('.visible-print'); 151 152@media print { 153 @include responsive-visibility('.visible-print'); 154} 155.visible-print-block { 156 display: none !important; 157 158 @media print { 159 display: block !important; 160 } 161} 162.visible-print-inline { 163 display: none !important; 164 165 @media print { 166 display: inline !important; 167 } 168} 169.visible-print-inline-block { 170 display: none !important; 171 172 @media print { 173 display: inline-block !important; 174 } 175} 176 177@media print { 178 @include responsive-invisibility('.hidden-print'); 179} 180