1 | @charset "UTF-8";
|
2 |
|
3 |
|
4 |
|
5 | $breakpoints: (
|
6 | xs: (
|
7 | begin: 0,
|
8 | end: 599.9px
|
9 | ),
|
10 | sm: (
|
11 | begin: 600px,
|
12 | end: 959.9px
|
13 | ),
|
14 | md: (
|
15 | begin: 960px,
|
16 | end: 1279.9px
|
17 | ),
|
18 | lg: (
|
19 | begin: 1280px,
|
20 | end: 1919.9px
|
21 | ),
|
22 | xl: (
|
23 | begin: 1920px,
|
24 | end: 4999.99px
|
25 | ),
|
26 | ) !default;
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | $overlapping-gt: (
|
32 | gt-xs: 600px,
|
33 | gt-sm: 960px,
|
34 | gt-md: 1280px,
|
35 | gt-lg: 1920px,
|
36 | ) !default;
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | $overlapping-lt: (
|
42 | lt-sm: 599.9px,
|
43 | lt-md: 959.9px,
|
44 | lt-lg: 1279.9px,
|
45 | lt-xl: 1919.9px,
|
46 | ) !default;
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | @mixin layout-bp($bp) {
|
63 | @if map-has-key($breakpoints, $bp) {
|
64 | $min: map-get(map-get($breakpoints, $bp), begin);
|
65 | $max: map-get(map-get($breakpoints, $bp), end);
|
66 | @media (min-width: $min) and (max-width: $max) { @content; }
|
67 | }
|
68 | @else if map-has-key($overlapping-gt, $bp) {
|
69 | $min: map-get($overlapping-gt, $bp);
|
70 | @media (min-width: $min) { @content; }
|
71 | }
|
72 | @else if map-has-key($overlapping-lt, $bp) {
|
73 | $max: map-get($overlapping-lt, $bp);
|
74 | @media (max-width: $max) { @content; }
|
75 | }
|
76 | }
|