pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
responsive-utilities.less
(4880B)
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 }