]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
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 | } |