1 | $gutter-breakpoints: (
|
2 | xs: 4px,
|
3 | sm: 8px,
|
4 | ) !default;
|
5 |
|
6 | $grid-gutter-breakpoints: (
|
7 | xs: 3%,
|
8 | sm: 5%,
|
9 | ) !default;
|
10 |
|
11 |
|
12 | @function breakpoint($breakpoint) {
|
13 | @if map-has-key($grid-breakpoints, $breakpoint) {
|
14 | @return map-get($grid-breakpoints, $breakpoint);
|
15 | } @else {
|
16 | @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
|
17 | }
|
18 | }
|
19 |
|
20 | @function gutter($breakpoint) {
|
21 | @if map-has-key($gutter-breakpoints, $breakpoint) {
|
22 | @return map-get($gutter-breakpoints, $breakpoint);
|
23 | } @else {
|
24 | @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
|
25 | }
|
26 | }
|
27 |
|
28 | @function grid-gutter($breakpoint) {
|
29 | @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
|
30 | @return map-get($grid-gutter-breakpoints, $breakpoint);
|
31 | } @else {
|
32 | @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
|
33 | }
|
34 | }
|
35 |
|
36 | @mixin column-size($col-num) {
|
37 | flex: 0 0 (100% * $col-num / $grid-columns);
|
38 | max-width: (100% * $col-num / $grid-columns);
|
39 | }
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | .row {
|
60 | display: flex;
|
61 | flex-wrap: wrap;
|
62 | margin: 0 gutter('xs') * -1;
|
63 |
|
64 | @media (min-width: breakpoint('sm')) {
|
65 | margin: 0 gutter('sm') * -1;
|
66 | }
|
67 |
|
68 | &.no-gutters {
|
69 | margin-right: 0;
|
70 | margin-left: 0;
|
71 | }
|
72 |
|
73 | &.row-deck {
|
74 | [class*='col-'] {
|
75 | display: flex;
|
76 | flex-direction: column;
|
77 | align-items: stretch;
|
78 | }
|
79 | }
|
80 | }
|
81 |
|
82 | [class*='col-'] {
|
83 | position: relative;
|
84 | width: 100%;
|
85 | padding: 0 gutter('xs');
|
86 |
|
87 | @media (min-width: breakpoint('sm')) {
|
88 | padding: 0 gutter('sm');
|
89 | }
|
90 | }
|
91 |
|
92 | .no-gutters > [class*="col-"] {
|
93 | padding-right: 0;
|
94 | padding-left: 0;
|
95 | }
|
96 |
|
97 | @for $i from 1 through $grid-columns {
|
98 | .col-xs-#{$i} {
|
99 | flex: 0 0 (100% * $i / $grid-columns);
|
100 | max-width: (100% * $i / $grid-columns);
|
101 | }
|
102 |
|
103 | .offset-xs-#{$i} {
|
104 | margin-left: (100% * $i / $grid-columns);
|
105 | }
|
106 | }
|
107 |
|
108 | @each $breakpoint in map-keys($grid-breakpoints) {
|
109 | @media (min-width: breakpoint($breakpoint)) {
|
110 | .col-#{$breakpoint}-auto {
|
111 | flex: 0 0 auto;
|
112 | width: auto;
|
113 | }
|
114 |
|
115 | @for $i from 1 through $grid-columns {
|
116 | .col-#{$breakpoint}-#{$i} {
|
117 | flex: 0 0 (100% * $i / $grid-columns);
|
118 | max-width: (100% * $i / $grid-columns);
|
119 | }
|
120 |
|
121 | .offset-#{$breakpoint}-#{$i} {
|
122 | margin-left: (100% * $i / $grid-columns);
|
123 | }
|
124 | }
|
125 | }
|
126 | }
|
127 |
|
128 | .col-xs,
|
129 | .col-sm,
|
130 | .col-md,
|
131 | .col-lg,
|
132 | .col-xl,
|
133 | .col-xxl {
|
134 | flex-basis: 0;
|
135 | flex: 1;
|
136 | flex-grow: 1;
|
137 | max-width: 100%;
|
138 | }
|