Mercurial > minori

comparison dep/fmt/doc/bootstrap/responsive-utilities.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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 }