]> git.proxmox.com Git - ceph.git/blame - ceph/src/seastar/fmt/doc/bootstrap/responsive-utilities.less
update download target update for octopus release
[ceph.git] / ceph / src / seastar / fmt / doc / bootstrap / responsive-utilities.less
CommitLineData
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}