Mercurial > wikked

comparison static/bootstrap/less/responsive-utilities.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Responsive: Utility classes 2 // Responsive: Utility classes
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // IE10 Metro responsive 6 // IE10 in Windows (Phone) 8
7 // Required for Windows 8 Metro split-screen snapping with IE10 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
8 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 18 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
9 @-ms-viewport{ 19
20 @-ms-viewport {
10 width: device-width; 21 width: device-width;
11 } 22 }
12 23
13 // Hide from screenreaders and browsers
14 // Credit: HTML5 Boilerplate
15 .hidden {
16 display: none;
17 visibility: hidden;
18 }
19 24
20 // Visibility utilities 25 // Visibility utilities
21 26
22 // For desktops 27 .visible-xs {
23 .visible-phone { display: none !important; } 28 .responsive-invisibility();
24 .visible-tablet { display: none !important; } 29 @media (max-width: @screen-xs-max) {
25 .hidden-phone { } 30 .responsive-visibility();
26 .hidden-tablet { } 31 }
27 .hidden-desktop { display: none !important; } 32 &.visible-sm {
28 .visible-desktop { display: inherit !important; } 33 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
29 34 .responsive-visibility();
30 // Tablets & small desktops only 35 }
31 @media (min-width: 768px) and (max-width: 979px) { 36 }
32 // Hide everything else 37 &.visible-md {
33 .hidden-desktop { display: inherit !important; } 38 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
34 .visible-desktop { display: none !important ; } 39 .responsive-visibility();
35 // Show 40 }
36 .visible-tablet { display: inherit !important; } 41 }
37 // Hide 42 &.visible-lg {
38 .hidden-tablet { display: none !important; } 43 @media (min-width: @screen-lg-min) {
39 } 44 .responsive-visibility();
40 45 }
41 // Phones only 46 }
42 @media (max-width: 767px) { 47 }
43 // Hide everything else 48 .visible-sm {
44 .hidden-desktop { display: inherit !important; } 49 .responsive-invisibility();
45 .visible-desktop { display: none !important; } 50 &.visible-xs {
46 // Show 51 @media (max-width: @screen-xs-max) {
47 .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior 52 .responsive-visibility();
48 // Hide 53 }
49 .hidden-phone { display: none !important; } 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 }
50 } 195 }
51 196
52 // Print utilities 197 // Print utilities
53 .visible-print { display: none !important; } 198 .visible-print {
54 .hidden-print { } 199 .responsive-invisibility();
200 }
55 201
56 @media print { 202 @media print {
57 .visible-print { display: inherit !important; } 203 .visible-print {
58 .hidden-print { display: none !important; } 204 .responsive-visibility();
59 } 205 }
206 .hidden-print {
207 .responsive-invisibility();
208 }
209 }