1 | // stylelint-disable declaration-no-important, at-rule-no-vendor-prefix
|
---|
2 |
|
---|
3 | //
|
---|
4 | // Responsive: Utility classes
|
---|
5 | // --------------------------------------------------
|
---|
6 |
|
---|
7 |
|
---|
8 | // IE10 in Windows (Phone) 8
|
---|
9 | //
|
---|
10 | // Support for responsive views via media queries is kind of borked in IE10, for
|
---|
11 | // Surface/desktop in split view and for Windows Phone 8. This particular fix
|
---|
12 | // must be accompanied by a snippet of JavaScript to sniff the user agent and
|
---|
13 | // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
|
---|
14 | // our Getting Started page for more information on this bug.
|
---|
15 | //
|
---|
16 | // For more information, see the following:
|
---|
17 | //
|
---|
18 | // Issue: https://github.com/twbs/bootstrap/issues/10497
|
---|
19 | // Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width
|
---|
20 | // Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/
|
---|
21 | // Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
---|
22 |
|
---|
23 | @-ms-viewport {
|
---|
24 | width: device-width;
|
---|
25 | }
|
---|
26 |
|
---|
27 |
|
---|
28 | // Visibility utilities
|
---|
29 | // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
|
---|
30 | .visible-xs,
|
---|
31 | .visible-sm,
|
---|
32 | .visible-md,
|
---|
33 | .visible-lg {
|
---|
34 | .responsive-invisibility();
|
---|
35 | }
|
---|
36 |
|
---|
37 | .visible-xs-block,
|
---|
38 | .visible-xs-inline,
|
---|
39 | .visible-xs-inline-block,
|
---|
40 | .visible-sm-block,
|
---|
41 | .visible-sm-inline,
|
---|
42 | .visible-sm-inline-block,
|
---|
43 | .visible-md-block,
|
---|
44 | .visible-md-inline,
|
---|
45 | .visible-md-inline-block,
|
---|
46 | .visible-lg-block,
|
---|
47 | .visible-lg-inline,
|
---|
48 | .visible-lg-inline-block {
|
---|
49 | display: none !important;
|
---|
50 | }
|
---|
51 |
|
---|
52 | .visible-xs {
|
---|
53 | @media (max-width: @screen-xs-max) {
|
---|
54 | .responsive-visibility();
|
---|
55 | }
|
---|
56 | }
|
---|
57 | .visible-xs-block {
|
---|
58 | @media (max-width: @screen-xs-max) {
|
---|
59 | display: block !important;
|
---|
60 | }
|
---|
61 | }
|
---|
62 | .visible-xs-inline {
|
---|
63 | @media (max-width: @screen-xs-max) {
|
---|
64 | display: inline !important;
|
---|
65 | }
|
---|
66 | }
|
---|
67 | .visible-xs-inline-block {
|
---|
68 | @media (max-width: @screen-xs-max) {
|
---|
69 | display: inline-block !important;
|
---|
70 | }
|
---|
71 | }
|
---|
72 |
|
---|
73 | .visible-sm {
|
---|
74 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
---|
75 | .responsive-visibility();
|
---|
76 | }
|
---|
77 | }
|
---|
78 | .visible-sm-block {
|
---|
79 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
---|
80 | display: block !important;
|
---|
81 | }
|
---|
82 | }
|
---|
83 | .visible-sm-inline {
|
---|
84 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
---|
85 | display: inline !important;
|
---|
86 | }
|
---|
87 | }
|
---|
88 | .visible-sm-inline-block {
|
---|
89 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
---|
90 | display: inline-block !important;
|
---|
91 | }
|
---|
92 | }
|
---|
93 |
|
---|
94 | .visible-md {
|
---|
95 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
---|
96 | .responsive-visibility();
|
---|
97 | }
|
---|
98 | }
|
---|
99 | .visible-md-block {
|
---|
100 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
---|
101 | display: block !important;
|
---|
102 | }
|
---|
103 | }
|
---|
104 | .visible-md-inline {
|
---|
105 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
---|
106 | display: inline !important;
|
---|
107 | }
|
---|
108 | }
|
---|
109 | .visible-md-inline-block {
|
---|
110 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
---|
111 | display: inline-block !important;
|
---|
112 | }
|
---|
113 | }
|
---|
114 |
|
---|
115 | .visible-lg {
|
---|
116 | @media (min-width: @screen-lg-min) {
|
---|
117 | .responsive-visibility();
|
---|
118 | }
|
---|
119 | }
|
---|
120 | .visible-lg-block {
|
---|
121 | @media (min-width: @screen-lg-min) {
|
---|
122 | display: block !important;
|
---|
123 | }
|
---|
124 | }
|
---|
125 | .visible-lg-inline {
|
---|
126 | @media (min-width: @screen-lg-min) {
|
---|
127 | display: inline !important;
|
---|
128 | }
|
---|
129 | }
|
---|
130 | .visible-lg-inline-block {
|
---|
131 | @media (min-width: @screen-lg-min) {
|
---|
132 | display: inline-block !important;
|
---|
133 | }
|
---|
134 | }
|
---|
135 |
|
---|
136 | .hidden-xs {
|
---|
137 | @media (max-width: @screen-xs-max) {
|
---|
138 | .responsive-invisibility();
|
---|
139 | }
|
---|
140 | }
|
---|
141 | .hidden-sm {
|
---|
142 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
---|
143 | .responsive-invisibility();
|
---|
144 | }
|
---|
145 | }
|
---|
146 | .hidden-md {
|
---|
147 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
---|
148 | .responsive-invisibility();
|
---|
149 | }
|
---|
150 | }
|
---|
151 | .hidden-lg {
|
---|
152 | @media (min-width: @screen-lg-min) {
|
---|
153 | .responsive-invisibility();
|
---|
154 | }
|
---|
155 | }
|
---|
156 |
|
---|
157 |
|
---|
158 | // Print utilities
|
---|
159 | //
|
---|
160 | // Media queries are placed on the inside to be mixin-friendly.
|
---|
161 |
|
---|
162 | // Note: Deprecated .visible-print as of v3.2.0
|
---|
163 | .visible-print {
|
---|
164 | .responsive-invisibility();
|
---|
165 |
|
---|
166 | @media print {
|
---|
167 | .responsive-visibility();
|
---|
168 | }
|
---|
169 | }
|
---|
170 | .visible-print-block {
|
---|
171 | display: none !important;
|
---|
172 |
|
---|
173 | @media print {
|
---|
174 | display: block !important;
|
---|
175 | }
|
---|
176 | }
|
---|
177 | .visible-print-inline {
|
---|
178 | display: none !important;
|
---|
179 |
|
---|
180 | @media print {
|
---|
181 | display: inline !important;
|
---|
182 | }
|
---|
183 | }
|
---|
184 | .visible-print-inline-block {
|
---|
185 | display: none !important;
|
---|
186 |
|
---|
187 | @media print {
|
---|
188 | display: inline-block !important;
|
---|
189 | }
|
---|
190 | }
|
---|
191 |
|
---|
192 | .hidden-print {
|
---|
193 | @media print {
|
---|
194 | .responsive-invisibility();
|
---|
195 | }
|
---|
196 | }
|
---|