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