1 | @use "sass:math";
|
2 |
|
3 | @import "variables";
|
4 |
|
5 |
|
6 | [class^="responsive\:"],
|
7 | [class*="responsive\:"] {
|
8 | display: flex;
|
9 | flex-wrap: wrap;
|
10 | justify-content: flex-start;
|
11 | > div {
|
12 | position: relative;
|
13 | }
|
14 | }
|
15 |
|
16 |
|
17 |
|
18 | @each $columns in $responsive-columns {
|
19 | $factor: math.div(1920px, $columns);
|
20 | @for $i from $columns through 1 {
|
21 | @media (min-width: #{$i * $factor}) and (max-width: #{(($i + 1) * $factor) - 1}) {
|
22 | .responsive\:#{$columns} {
|
23 | & > div {
|
24 | flex-basis: #{math.div(100%, $i)};
|
25 | }
|
26 | }
|
27 | }
|
28 | }
|
29 | }
|
30 |
|
31 |
|
32 | @each $name, $value in $paddings {
|
33 | div[class^="responsive"] {
|
34 | &.column-gap\:#{$name} {
|
35 | & > div {
|
36 | padding-left: $value;
|
37 | padding-right: $value;
|
38 | }
|
39 | }
|
40 |
|
41 | &.row-gap\:#{$name} {
|
42 | & > div {
|
43 | padding-top: $value;
|
44 | padding-bottom: $value;
|
45 | }
|
46 | }
|
47 | }
|
48 | }
|