• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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: http://getbootstrap.com/getting-started/#support-ie10-width
18// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
19// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
20
21@-ms-viewport {
22  width: device-width;
23}
24
25
26// Visibility utilities
27// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
28.visible-xs,
29.visible-sm,
30.visible-md,
31.visible-lg {
32  .responsive-invisibility();
33}
34
35.visible-xs-block,
36.visible-xs-inline,
37.visible-xs-inline-block,
38.visible-sm-block,
39.visible-sm-inline,
40.visible-sm-inline-block,
41.visible-md-block,
42.visible-md-inline,
43.visible-md-inline-block,
44.visible-lg-block,
45.visible-lg-inline,
46.visible-lg-inline-block {
47  display: none !important;
48}
49
50.visible-xs {
51  @media (max-width: @screen-xs-max) {
52    .responsive-visibility();
53  }
54}
55.visible-xs-block {
56  @media (max-width: @screen-xs-max) {
57    display: block !important;
58  }
59}
60.visible-xs-inline {
61  @media (max-width: @screen-xs-max) {
62    display: inline !important;
63  }
64}
65.visible-xs-inline-block {
66  @media (max-width: @screen-xs-max) {
67    display: inline-block !important;
68  }
69}
70
71.visible-sm {
72  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
73    .responsive-visibility();
74  }
75}
76.visible-sm-block {
77  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
78    display: block !important;
79  }
80}
81.visible-sm-inline {
82  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
83    display: inline !important;
84  }
85}
86.visible-sm-inline-block {
87  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
88    display: inline-block !important;
89  }
90}
91
92.visible-md {
93  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
94    .responsive-visibility();
95  }
96}
97.visible-md-block {
98  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
99    display: block !important;
100  }
101}
102.visible-md-inline {
103  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
104    display: inline !important;
105  }
106}
107.visible-md-inline-block {
108  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
109    display: inline-block !important;
110  }
111}
112
113.visible-lg {
114  @media (min-width: @screen-lg-min) {
115    .responsive-visibility();
116  }
117}
118.visible-lg-block {
119  @media (min-width: @screen-lg-min) {
120    display: block !important;
121  }
122}
123.visible-lg-inline {
124  @media (min-width: @screen-lg-min) {
125    display: inline !important;
126  }
127}
128.visible-lg-inline-block {
129  @media (min-width: @screen-lg-min) {
130    display: inline-block !important;
131  }
132}
133
134.hidden-xs {
135  @media (max-width: @screen-xs-max) {
136    .responsive-invisibility();
137  }
138}
139.hidden-sm {
140  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
141    .responsive-invisibility();
142  }
143}
144.hidden-md {
145  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
146    .responsive-invisibility();
147  }
148}
149.hidden-lg {
150  @media (min-width: @screen-lg-min) {
151    .responsive-invisibility();
152  }
153}
154
155
156// Print utilities
157//
158// Media queries are placed on the inside to be mixin-friendly.
159
160// Note: Deprecated .visible-print as of v3.2.0
161.visible-print {
162  .responsive-invisibility();
163
164  @media print {
165    .responsive-visibility();
166  }
167}
168.visible-print-block {
169  display: none !important;
170
171  @media print {
172    display: block !important;
173  }
174}
175.visible-print-inline {
176  display: none !important;
177
178  @media print {
179    display: inline !important;
180  }
181}
182.visible-print-inline-block {
183  display: none !important;
184
185  @media print {
186    display: inline-block !important;
187  }
188}
189
190.hidden-print {
191  @media print {
192    .responsive-invisibility();
193  }
194}
195