@covalent/core 4.1.0-develop.2 → 4.1.0-develop.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/styles/_elevation.scss +285 -0
- package/common/styles/_layout.scss +605 -0
- package/common/styles/_palette-dark.scss +326 -0
- package/common/styles/_palette-light.scss +637 -0
- package/common/styles/_rtl.scss +31 -0
- package/common/styles/_styles.scss +10 -0
- package/common/styles/_theme-functions.scss +25 -0
- package/common/styles/_typography-functions.scss +43 -0
- package/common/styles/_variables.scss +99 -0
- package/common/styles/colors/_colors-dark.scss +1399 -0
- package/common/styles/colors/_colors-light.scss +3235 -0
- package/common/styles/colors/_colors.scss +7 -0
- package/common/styles/core/_button.scss +90 -0
- package/common/styles/core/_card.scss +189 -0
- package/common/styles/core/_content.scss +43 -0
- package/common/styles/core/_core.scss +23 -0
- package/common/styles/core/_divider.scss +16 -0
- package/common/styles/core/_icons.scss +22 -0
- package/common/styles/core/_list.scss +8 -0
- package/common/styles/core/_sidenav.scss +22 -0
- package/common/styles/core/_structure.scss +127 -0
- package/common/styles/core/_toolbar.scss +53 -0
- package/common/styles/core/_whiteframe.scss +138 -0
- package/common/styles/font/MaterialIcons-Regular-v48.woff2 +0 -0
- package/common/styles/font/_font.scss +99 -0
- package/common/styles/utilities/_general.scss +65 -0
- package/common/styles/utilities/_pad.scss +36 -0
- package/common/styles/utilities/_pull.scss +36 -0
- package/common/styles/utilities/_push.scss +36 -0
- package/common/styles/utilities/_size.scss +24 -0
- package/common/styles/utilities/_text.scss +105 -0
- package/common/styles/utilities/_utilities.scss +15 -0
- package/package.json +2 -2
@@ -0,0 +1,605 @@
|
|
1
|
+
/* stylelint-disable function-url-quotes, no-duplicate-selectors */
|
2
|
+
|
3
|
+
/*
|
4
|
+
*
|
5
|
+
* Responsive attributes
|
6
|
+
*
|
7
|
+
* References:
|
8
|
+
* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
|
9
|
+
* 2) https://css-tricks.com/almanac/properties/f/flex/
|
10
|
+
* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
11
|
+
* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
|
12
|
+
* 5) http://godban.com.ua/projects/flexgrid
|
13
|
+
*
|
14
|
+
*/
|
15
|
+
|
16
|
+
// Layout
|
17
|
+
// ------------------------------
|
18
|
+
|
19
|
+
$baseline-grid: 8px !default;
|
20
|
+
$layout-gutter-width: ($baseline-grid * 2) !default;
|
21
|
+
|
22
|
+
$layout-breakpoint-xs: 600px !default;
|
23
|
+
$layout-breakpoint-sm: 960px !default;
|
24
|
+
$layout-breakpoint-md: 1280px !default;
|
25
|
+
$layout-breakpoint-lg: 1920px !default;
|
26
|
+
|
27
|
+
@-moz-document url-prefix() {
|
28
|
+
[layout-fill] {
|
29
|
+
margin: 0;
|
30
|
+
width: 100%;
|
31
|
+
min-height: 100%;
|
32
|
+
height: 100%;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin flex-order-for-name($sizes: null) {
|
37
|
+
@if $sizes == null {
|
38
|
+
$sizes: '';
|
39
|
+
|
40
|
+
[flex-order] {
|
41
|
+
order: 0;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
@for $i from -20 through 20 {
|
46
|
+
$order: '';
|
47
|
+
$suffix: '';
|
48
|
+
|
49
|
+
@each $s in $sizes {
|
50
|
+
@if $s != '' {
|
51
|
+
$suffix: '-#{$s}="#{$i}"';
|
52
|
+
} @else {
|
53
|
+
$suffix: '="#{$i}"';
|
54
|
+
}
|
55
|
+
|
56
|
+
$order: '[flex-order#{$suffix}]';
|
57
|
+
}
|
58
|
+
|
59
|
+
#{$order} {
|
60
|
+
order: #{$i};
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
@mixin offset-for-name($sizes: null) {
|
66
|
+
@if $sizes == null {
|
67
|
+
$sizes: '';
|
68
|
+
}
|
69
|
+
|
70
|
+
@for $i from 0 through 19 {
|
71
|
+
$offsets: '';
|
72
|
+
$suffix: '';
|
73
|
+
|
74
|
+
@each $s in $sizes {
|
75
|
+
@if $s != '' {
|
76
|
+
$suffix: '-#{$s}="#{$i * 5}"';
|
77
|
+
} @else {
|
78
|
+
$suffix: '="#{$i * 5}"';
|
79
|
+
}
|
80
|
+
|
81
|
+
$offsets: $offsets + '[flex-offset#{$suffix}], ';
|
82
|
+
}
|
83
|
+
|
84
|
+
#{$offsets} {
|
85
|
+
margin-left: #{$i * 5 + '%'};
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
@each $i in 33 {
|
90
|
+
$offsets: '';
|
91
|
+
$suffix: '';
|
92
|
+
|
93
|
+
@each $s in $sizes {
|
94
|
+
@if $s != '' {
|
95
|
+
$suffix: '-#{$s}="#{$i}"';
|
96
|
+
} @else {
|
97
|
+
$suffix: '="#{$i}"';
|
98
|
+
}
|
99
|
+
|
100
|
+
$offsets: '[flex-offset#{$suffix}], ';
|
101
|
+
}
|
102
|
+
|
103
|
+
#{$offsets} {
|
104
|
+
margin-left: calc(100% / 3);
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
@each $i in 66 {
|
109
|
+
$offsets: '';
|
110
|
+
$suffix: '';
|
111
|
+
|
112
|
+
@each $s in $sizes {
|
113
|
+
@if $s != '' {
|
114
|
+
$suffix: '-#{$s}="#{$i}"';
|
115
|
+
} @else {
|
116
|
+
$suffix: '="#{$i}"';
|
117
|
+
}
|
118
|
+
|
119
|
+
$offsets: '[flex-offset#{$suffix}]';
|
120
|
+
}
|
121
|
+
|
122
|
+
#{$offsets} {
|
123
|
+
margin-left: calc(200% / 3);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
|
128
|
+
@mixin layout-for-name($name: null) {
|
129
|
+
@if $name == null {
|
130
|
+
$name: '';
|
131
|
+
}
|
132
|
+
@if $name != '' {
|
133
|
+
$name: '-#{$name}';
|
134
|
+
}
|
135
|
+
|
136
|
+
[layout#{$name}],
|
137
|
+
[layout#{$name}='column'],
|
138
|
+
[layout#{$name}='row'] {
|
139
|
+
box-sizing: border-box;
|
140
|
+
display: flex;
|
141
|
+
}
|
142
|
+
[layout#{$name}='column'] {
|
143
|
+
flex-direction: column;
|
144
|
+
}
|
145
|
+
[layout#{$name}='row'] {
|
146
|
+
flex-direction: row;
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
@mixin flex-properties-for-name($name: null) {
|
151
|
+
$flexName: 'flex';
|
152
|
+
@if $name != null {
|
153
|
+
$flexName: 'flex-#{$name}';
|
154
|
+
$name: '-#{$name}';
|
155
|
+
} @else {
|
156
|
+
$name: '';
|
157
|
+
}
|
158
|
+
|
159
|
+
[#{$flexName}] {
|
160
|
+
flex: 1;
|
161
|
+
box-sizing: border-box;
|
162
|
+
}
|
163
|
+
// === flex: 1 1 0%;
|
164
|
+
|
165
|
+
// IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
|
166
|
+
// Details:
|
167
|
+
// Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
|
168
|
+
// Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
|
169
|
+
// Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
|
170
|
+
@media screen\0 {
|
171
|
+
[#{$flexName}] {
|
172
|
+
flex: 1 1 0%;
|
173
|
+
}
|
174
|
+
}
|
175
|
+
|
176
|
+
[#{$flexName}='grow'],
|
177
|
+
[#{$flexName}-grow] {
|
178
|
+
flex: 1 1 100%;
|
179
|
+
box-sizing: border-box;
|
180
|
+
}
|
181
|
+
[#{$flexName}='initial'],
|
182
|
+
[#{$flexName}-initial] {
|
183
|
+
flex: 0 1 auto;
|
184
|
+
box-sizing: border-box;
|
185
|
+
}
|
186
|
+
[#{$flexName}='auto'],
|
187
|
+
[#{$flexName}-auto] {
|
188
|
+
flex: 1 1 auto;
|
189
|
+
box-sizing: border-box;
|
190
|
+
}
|
191
|
+
[#{$flexName}='none'],
|
192
|
+
[#{$flexName}-none] {
|
193
|
+
flex: 0 0 auto;
|
194
|
+
box-sizing: border-box;
|
195
|
+
}
|
196
|
+
[#{$flexName}='noshrink'],
|
197
|
+
[#{$flexName}-noshrink] {
|
198
|
+
flex: 1 0 auto;
|
199
|
+
box-sizing: border-box;
|
200
|
+
}
|
201
|
+
[#{$flexName}='nogrow'],
|
202
|
+
[#{$flexName}-nogrow] {
|
203
|
+
flex: 0 1 auto;
|
204
|
+
box-sizing: border-box;
|
205
|
+
}
|
206
|
+
|
207
|
+
// (1-20) * 5 = 0-100%
|
208
|
+
@for $i from 0 through 20 {
|
209
|
+
$value: #{$i * 5 + '%'};
|
210
|
+
|
211
|
+
[#{$flexName}='#{$i * 5}'] {
|
212
|
+
flex: 1 1 #{$value};
|
213
|
+
max-width: #{$value};
|
214
|
+
max-height: 100%;
|
215
|
+
box-sizing: border-box;
|
216
|
+
}
|
217
|
+
|
218
|
+
[layout='row'] > [#{$flexName}='#{$i * 5}'],
|
219
|
+
[layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {
|
220
|
+
flex: 1 1 #{$value};
|
221
|
+
max-width: #{$value};
|
222
|
+
max-height: 100%;
|
223
|
+
box-sizing: border-box;
|
224
|
+
}
|
225
|
+
|
226
|
+
[layout='column'] > [#{$flexName}='#{$i * 5}'],
|
227
|
+
[layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {
|
228
|
+
flex: 1 1 #{$value};
|
229
|
+
max-width: 100%;
|
230
|
+
max-height: #{$value};
|
231
|
+
box-sizing: border-box;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
[layout='row'],
|
236
|
+
[layout#{$name}='row'] {
|
237
|
+
> [#{$flexName}='33'],
|
238
|
+
> [#{$flexName}='33'] {
|
239
|
+
flex: 1 1 33%;
|
240
|
+
max-width: calc(100% / 3);
|
241
|
+
max-height: 100%;
|
242
|
+
box-sizing: border-box;
|
243
|
+
}
|
244
|
+
> [#{$flexName}='34'],
|
245
|
+
> [#{$flexName}='34'] {
|
246
|
+
flex: 1 1 34%;
|
247
|
+
max-width: 34%;
|
248
|
+
max-height: 100%;
|
249
|
+
box-sizing: border-box;
|
250
|
+
}
|
251
|
+
> [#{$flexName}='66'],
|
252
|
+
> [#{$flexName}='66'] {
|
253
|
+
flex: 1 1 66%;
|
254
|
+
max-width: calc(200% / 3);
|
255
|
+
max-height: 100%;
|
256
|
+
box-sizing: border-box;
|
257
|
+
}
|
258
|
+
> [#{$flexName}='67'],
|
259
|
+
> [#{$flexName}='67'] {
|
260
|
+
flex: 1 1 67%;
|
261
|
+
max-width: 67%;
|
262
|
+
max-height: 100%;
|
263
|
+
box-sizing: border-box;
|
264
|
+
}
|
265
|
+
}
|
266
|
+
[layout='column'],
|
267
|
+
[layout#{$name}='column'] {
|
268
|
+
> [#{$flexName}='33'],
|
269
|
+
> [#{$flexName}='33'] {
|
270
|
+
flex: 1 1 33%;
|
271
|
+
max-width: 100%;
|
272
|
+
max-height: calc(100% / 3);
|
273
|
+
box-sizing: border-box;
|
274
|
+
}
|
275
|
+
> [#{$flexName}='34'],
|
276
|
+
> [#{$flexName}='34'] {
|
277
|
+
flex: 1 1 34%;
|
278
|
+
max-width: 100%;
|
279
|
+
max-height: 34%;
|
280
|
+
box-sizing: border-box;
|
281
|
+
}
|
282
|
+
> [#{$flexName}='66'],
|
283
|
+
> [#{$flexName}='66'] {
|
284
|
+
flex: 1 1 66%;
|
285
|
+
max-width: 100%;
|
286
|
+
max-height: calc(200% / 3);
|
287
|
+
box-sizing: border-box;
|
288
|
+
}
|
289
|
+
> [#{$flexName}='67'],
|
290
|
+
> [#{$flexName}='67'] {
|
291
|
+
flex: 1 1 67%;
|
292
|
+
max-width: 100%;
|
293
|
+
max-height: 67%;
|
294
|
+
box-sizing: border-box;
|
295
|
+
}
|
296
|
+
}
|
297
|
+
}
|
298
|
+
|
299
|
+
@mixin layout-align-for-name($suffix: null) {
|
300
|
+
// Alignment attributes for layout containers' children
|
301
|
+
// Arrange on the Main Axis
|
302
|
+
// center, start, end, space-between, space-around
|
303
|
+
// flex-start is the default for justify-content
|
304
|
+
// ------------------------------
|
305
|
+
|
306
|
+
$name: 'layout-align';
|
307
|
+
@if $suffix != null {
|
308
|
+
$name: 'layout-align-#{$suffix}';
|
309
|
+
}
|
310
|
+
|
311
|
+
[#{$name}],
|
312
|
+
[#{$name}="start stretch"] // defaults
|
313
|
+
{
|
314
|
+
justify-content: flex-start;
|
315
|
+
align-content: stretch;
|
316
|
+
align-items: stretch;
|
317
|
+
}
|
318
|
+
// Main Axis Center
|
319
|
+
[#{$name}='start'],
|
320
|
+
[#{$name}='start start'],
|
321
|
+
[#{$name}='start center'],
|
322
|
+
[#{$name}='start end'],
|
323
|
+
[#{$name}='start stretch'] {
|
324
|
+
justify-content: flex-start;
|
325
|
+
}
|
326
|
+
|
327
|
+
// Main Axis Center
|
328
|
+
[#{$name}='center'],
|
329
|
+
[#{$name}='center start'],
|
330
|
+
[#{$name}='center center'],
|
331
|
+
[#{$name}='center end'],
|
332
|
+
[#{$name}='center stretch'] {
|
333
|
+
justify-content: center;
|
334
|
+
}
|
335
|
+
|
336
|
+
// Main Axis End
|
337
|
+
[#{$name}="end"], //stretch
|
338
|
+
[#{$name}="end center"],
|
339
|
+
[#{$name}="end start"],
|
340
|
+
[#{$name}="end end"],
|
341
|
+
[#{$name}="end stretch"] {
|
342
|
+
justify-content: flex-end;
|
343
|
+
}
|
344
|
+
|
345
|
+
// Main Axis Space Around
|
346
|
+
[#{$name}="space-around"], //stretch
|
347
|
+
[#{$name}="space-around center"],
|
348
|
+
[#{$name}="space-around start"],
|
349
|
+
[#{$name}="space-around end"],
|
350
|
+
[#{$name}="space-around stretch"] {
|
351
|
+
justify-content: space-around;
|
352
|
+
}
|
353
|
+
|
354
|
+
// Main Axis Space Between
|
355
|
+
[#{$name}="space-between"], //stretch
|
356
|
+
[#{$name}="space-between center"],
|
357
|
+
[#{$name}="space-between start"],
|
358
|
+
[#{$name}="space-between end"],
|
359
|
+
[#{$name}="space-between stretch"] {
|
360
|
+
justify-content: space-between;
|
361
|
+
}
|
362
|
+
|
363
|
+
// Arrange on the Cross Axis
|
364
|
+
// center, start, end
|
365
|
+
// stretch is the default for align-items
|
366
|
+
// ------------------------------
|
367
|
+
|
368
|
+
// Cross Axis Start
|
369
|
+
[#{$name}='start start'],
|
370
|
+
[#{$name}='center start'],
|
371
|
+
[#{$name}='end start'],
|
372
|
+
[#{$name}='space-between start'],
|
373
|
+
[#{$name}='space-around start'] {
|
374
|
+
align-items: flex-start;
|
375
|
+
align-content: flex-start;
|
376
|
+
}
|
377
|
+
|
378
|
+
// Cross Axis Center
|
379
|
+
[#{$name}='start center'],
|
380
|
+
[#{$name}='center center'],
|
381
|
+
[#{$name}='end center'],
|
382
|
+
[#{$name}='space-between center'],
|
383
|
+
[#{$name}='space-around center'] {
|
384
|
+
align-items: center;
|
385
|
+
align-content: center;
|
386
|
+
max-width: 100%;
|
387
|
+
|
388
|
+
// IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
|
389
|
+
& > * {
|
390
|
+
max-width: 100%;
|
391
|
+
box-sizing: border-box;
|
392
|
+
}
|
393
|
+
}
|
394
|
+
|
395
|
+
// Cross Axis Center IE overflow fix
|
396
|
+
[#{$name}='start center'] > *,
|
397
|
+
[#{$name}='center center'] > *,
|
398
|
+
[#{$name}='end center'] > *,
|
399
|
+
[#{$name}='space-between center'] > *,
|
400
|
+
[#{$name}='space-around center'] > * {
|
401
|
+
max-width: 100%;
|
402
|
+
box-sizing: border-box;
|
403
|
+
}
|
404
|
+
|
405
|
+
// Cross Axis End
|
406
|
+
[#{$name}='start end'],
|
407
|
+
[#{$name}='center end'],
|
408
|
+
[#{$name}='end end'],
|
409
|
+
[#{$name}='space-between end'],
|
410
|
+
[#{$name}='space-around end'] {
|
411
|
+
align-items: flex-end;
|
412
|
+
align-content: flex-end;
|
413
|
+
}
|
414
|
+
|
415
|
+
// Cross Axis stretch
|
416
|
+
[#{$name}='start stretch'],
|
417
|
+
[#{$name}='center stretch'],
|
418
|
+
[#{$name}='end stretch'],
|
419
|
+
[#{$name}='space-between stretch'],
|
420
|
+
[#{$name}='space-around stretch'] {
|
421
|
+
align-items: stretch;
|
422
|
+
align-content: stretch;
|
423
|
+
}
|
424
|
+
}
|
425
|
+
|
426
|
+
@mixin layout-padding-margin() {
|
427
|
+
[layout-padding] > [flex-sm],
|
428
|
+
[layout-padding] > [flex-lt-md] {
|
429
|
+
padding: calc($layout-gutter-width / 4);
|
430
|
+
}
|
431
|
+
|
432
|
+
[layout-padding],
|
433
|
+
[layout-padding] > [flex],
|
434
|
+
[layout-padding] > [flex-gt-sm],
|
435
|
+
[layout-padding] > [flex-md],
|
436
|
+
[layout-padding] > [flex-lt-lg] {
|
437
|
+
padding: calc($layout-gutter-width / 2);
|
438
|
+
}
|
439
|
+
|
440
|
+
[layout-padding] > [flex-gt-md],
|
441
|
+
[layout-padding] > [flex-lg] {
|
442
|
+
padding: calc($layout-gutter-width / 1);
|
443
|
+
}
|
444
|
+
|
445
|
+
[layout-margin] > [flex-sm],
|
446
|
+
[layout-margin] > [flex-lt-md] {
|
447
|
+
margin: calc($layout-gutter-width / 4);
|
448
|
+
}
|
449
|
+
|
450
|
+
[layout-margin],
|
451
|
+
[layout-margin] > [flex],
|
452
|
+
[layout-margin] > [flex-gt-sm],
|
453
|
+
[layout-margin] > [flex-md],
|
454
|
+
[layout-margin] > [flex-lt-lg] {
|
455
|
+
margin: calc($layout-gutter-width / 2);
|
456
|
+
}
|
457
|
+
|
458
|
+
[layout-margin] > [flex-gt-md],
|
459
|
+
[layout-margin] > [flex-lg] {
|
460
|
+
margin: calc($layout-gutter-width / 1);
|
461
|
+
}
|
462
|
+
|
463
|
+
[layout-wrap] {
|
464
|
+
flex-wrap: wrap;
|
465
|
+
}
|
466
|
+
|
467
|
+
[layout-nowrap] {
|
468
|
+
flex-wrap: nowrap;
|
469
|
+
}
|
470
|
+
|
471
|
+
[layout-fill] {
|
472
|
+
margin: 0;
|
473
|
+
width: 100%;
|
474
|
+
min-height: 100%;
|
475
|
+
height: 100%;
|
476
|
+
}
|
477
|
+
}
|
478
|
+
|
479
|
+
@mixin layouts_for_breakpoint($name: null) {
|
480
|
+
@include flex-order-for-name($name);
|
481
|
+
@include offset-for-name($name);
|
482
|
+
@include layout-align-for-name($name);
|
483
|
+
|
484
|
+
@include flex-properties-for-name($name);
|
485
|
+
@include layout-for-name($name);
|
486
|
+
}
|
487
|
+
|
488
|
+
@mixin covalent-layout() {
|
489
|
+
/*
|
490
|
+
* Apply Mixins to create Layout/Flexbox styles
|
491
|
+
*
|
492
|
+
*/
|
493
|
+
|
494
|
+
@include layouts_for_breakpoint();
|
495
|
+
@include layout-padding-margin();
|
496
|
+
|
497
|
+
/**
|
498
|
+
* `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
|
499
|
+
* `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
|
500
|
+
* `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
|
501
|
+
*
|
502
|
+
* hide means hide everywhere
|
503
|
+
* Sizes:
|
504
|
+
* $layout-breakpoint-xs: 600px !default;
|
505
|
+
* $layout-breakpoint-sm: 960px !default;
|
506
|
+
* $layout-breakpoint-md: 1280px !default;
|
507
|
+
* $layout-breakpoint-lg: 1920px !default;
|
508
|
+
*/
|
509
|
+
|
510
|
+
@media (max-width: $layout-breakpoint-xs - 1) {
|
511
|
+
// Xtra-SMALL SCREEN
|
512
|
+
[hide-xs],
|
513
|
+
[hide] {
|
514
|
+
&:not([show-xs]):not([show]) {
|
515
|
+
display: none;
|
516
|
+
}
|
517
|
+
}
|
518
|
+
@include layouts_for_breakpoint(xs);
|
519
|
+
}
|
520
|
+
|
521
|
+
@media (min-width: $layout-breakpoint-xs) {
|
522
|
+
// BIGGER THAN Xtra-SMALL SCREEN
|
523
|
+
@include layouts_for_breakpoint(gt-xs);
|
524
|
+
}
|
525
|
+
|
526
|
+
@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
|
527
|
+
// SMALL SCREEN
|
528
|
+
[hide-sm],
|
529
|
+
[hide-gt-xs] {
|
530
|
+
&:not([show-gt-xs]):not([show-sm]):not([show]) {
|
531
|
+
display: none;
|
532
|
+
}
|
533
|
+
}
|
534
|
+
|
535
|
+
[hide-sm]:not([show-sm]):not([show]) {
|
536
|
+
display: none;
|
537
|
+
}
|
538
|
+
@include layouts_for_breakpoint(sm);
|
539
|
+
}
|
540
|
+
|
541
|
+
@media (min-width: $layout-breakpoint-sm) {
|
542
|
+
// BIGGER THAN SMALL SCREEN
|
543
|
+
@include layouts_for_breakpoint(gt-sm);
|
544
|
+
}
|
545
|
+
|
546
|
+
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
|
547
|
+
// MEDIUM SCREEN
|
548
|
+
[hide],
|
549
|
+
[hide-gt-xs],
|
550
|
+
[hide-gt-sm] {
|
551
|
+
&:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
|
552
|
+
display: none;
|
553
|
+
}
|
554
|
+
}
|
555
|
+
|
556
|
+
[hide-md]:not([show-md]):not([show]) {
|
557
|
+
display: none;
|
558
|
+
}
|
559
|
+
@include layouts_for_breakpoint(md);
|
560
|
+
}
|
561
|
+
|
562
|
+
@media (min-width: $layout-breakpoint-md) {
|
563
|
+
// BIGGER THAN MEDIUM SCREEN
|
564
|
+
@include layouts_for_breakpoint(gt-md);
|
565
|
+
}
|
566
|
+
|
567
|
+
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
|
568
|
+
// LARGE SCREEN
|
569
|
+
[hide],
|
570
|
+
[hide-gt-xs],
|
571
|
+
[hide-gt-sm],
|
572
|
+
[hide-gt-md] {
|
573
|
+
&:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
|
574
|
+
display: none;
|
575
|
+
}
|
576
|
+
}
|
577
|
+
|
578
|
+
[hide-lg]:not([show-lg]):not([show]) {
|
579
|
+
display: none;
|
580
|
+
}
|
581
|
+
|
582
|
+
@include layouts_for_breakpoint(lg);
|
583
|
+
}
|
584
|
+
|
585
|
+
@media (min-width: $layout-breakpoint-lg) {
|
586
|
+
// BIGGER THAN LARGE SCREEN
|
587
|
+
@include layouts_for_breakpoint(gt-lg);
|
588
|
+
@include layouts_for_breakpoint(xl);
|
589
|
+
|
590
|
+
// BIGGER THAN LARGE SCREEN
|
591
|
+
[hide],
|
592
|
+
[hide-gt-xs],
|
593
|
+
[hide-gt-sm],
|
594
|
+
[hide-gt-md],
|
595
|
+
[hide-gt-lg] {
|
596
|
+
&:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
|
597
|
+
display: none;
|
598
|
+
}
|
599
|
+
}
|
600
|
+
|
601
|
+
[hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
|
602
|
+
display: none;
|
603
|
+
}
|
604
|
+
}
|
605
|
+
}
|