2 // Responsive: Utility classes
3 // --------------------------------------------------
6 // IE10 Metro responsive
7 // Required for Windows 8 Metro split-screen snapping with IE10
9 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
14 // IE10 on Windows Phone 8
15 // IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
16 // other words, say on a Lumia, you'll get 768px as the device width,
17 // meaning users will see the tablet styles and not phone styles.
19 // Alternatively you can override this with JS (see source below), but
20 // we won't be doing that here given our limited scope.
22 // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
23 @media screen and (max-width: 400px) {
29 // Hide from screenreaders and browsers
30 // Credit: HTML5 Boilerplate
32 display: none !important;
33 visibility: hidden !important;
36 // Visibility utilities
39 .responsive-invisibility();
40 @media (max-width: @screen-xs-max) {
41 .responsive-visibility();
44 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
45 .responsive-visibility();
49 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
50 .responsive-visibility();
54 @media (min-width: @screen-lg) {
55 .responsive-visibility();
60 .responsive-invisibility();
62 @media (max-width: @screen-xs-max) {
63 .responsive-visibility();
66 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
67 .responsive-visibility();
70 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
71 .responsive-visibility();
75 @media (min-width: @screen-lg) {
76 .responsive-visibility();
81 .responsive-invisibility();
83 @media (max-width: @screen-xs-max) {
84 .responsive-visibility();
88 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
89 .responsive-visibility();
92 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
93 .responsive-visibility();
96 @media (min-width: @screen-lg) {
97 .responsive-visibility();
102 .responsive-invisibility();
104 @media (max-width: @screen-xs-max) {
105 .responsive-visibility();
109 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
110 .responsive-visibility();
114 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
115 .responsive-visibility();
118 @media (min-width: @screen-lg) {
119 .responsive-visibility();
124 .responsive-visibility();
125 @media (max-width: @screen-xs-max) {
126 .responsive-invisibility();
129 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
130 .responsive-invisibility();
134 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
135 .responsive-invisibility();
139 @media (min-width: @screen-lg) {
140 .responsive-invisibility();
145 .responsive-visibility();
147 @media (max-width: @screen-xs-max) {
148 .responsive-invisibility();
151 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
152 .responsive-invisibility();
155 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
156 .responsive-invisibility();
160 @media (min-width: @screen-lg) {
161 .responsive-invisibility();
166 .responsive-visibility();
168 @media (max-width: @screen-xs-max) {
169 .responsive-invisibility();
173 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
174 .responsive-invisibility();
177 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
178 .responsive-invisibility();
181 @media (min-width: @screen-lg) {
182 .responsive-invisibility();
187 .responsive-visibility();
189 @media (max-width: @screen-xs-max) {
190 .responsive-invisibility();
194 @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
195 .responsive-invisibility();
199 @media (min-width: @screen-md) and (max-width: @screen-md-max) {
200 .responsive-invisibility();
203 @media (min-width: @screen-lg) {
204 .responsive-invisibility();
210 .responsive-invisibility();
215 .responsive-visibility();
218 .responsive-invisibility();