| 1 |
// Define your breakpoints and spacers |
| 2 |
$breakpoints: ( |
| 3 |
'': 0, |
| 4 |
'sm': 576px, |
| 5 |
'md': 768px, |
| 6 |
'lg': 992px, |
| 7 |
'xl': 1200px |
| 8 |
); |
| 9 |
|
| 10 |
$direction_points: ( |
| 11 |
'l': 'left', |
| 12 |
't': 'top', |
| 13 |
'b': 'bottom', |
| 14 |
'r': 'right', |
| 15 |
); |
| 16 |
|
| 17 |
$spacers: ( |
| 18 |
0: 0, |
| 19 |
5: 5px, |
| 20 |
10: 10px, |
| 21 |
15: 15px, |
| 22 |
20: 20px, |
| 23 |
25: 25px, |
| 24 |
30: 30px, |
| 25 |
35: 35px, |
| 26 |
40: 40px, |
| 27 |
50: 50px, |
| 28 |
100: 100px |
| 29 |
); |
| 30 |
|
| 31 |
// Mixin for generating media queries |
| 32 |
@mixin media-breakpoint-up($breakpoint) { |
| 33 |
@media (min-width: map-get($breakpoints, $breakpoint)) { |
| 34 |
@content; |
| 35 |
} |
| 36 |
} |
| 37 |
|
| 38 |
// Function to get infix for breakpoint |
| 39 |
@function breakpoint-infix($breakpoint, $breakpoints) { |
| 40 |
@return if(map-has-key($breakpoints, $breakpoint), "-" + $breakpoint, ""); |
| 41 |
} |
| 42 |
|
| 43 |
// Generate margin and padding utilities |
| 44 |
@each $breakpoint in map-keys($breakpoints) { |
| 45 |
@include media-breakpoint-up($breakpoint) { |
| 46 |
$infix: breakpoint-infix($breakpoint, $breakpoints); |
| 47 |
|
| 48 |
// Margin utilities |
| 49 |
@each $direction in ('t', 'r', 'b', 'l') { |
| 50 |
@each $size, $length in $spacers { |
| 51 |
.m#{$direction}#{if($infix !='-', $infix+"-", "-")}#{$size} { |
| 52 |
margin-#{map-get($direction_points, $direction)}: $length; |
| 53 |
} |
| 54 |
} |
| 55 |
} |
| 56 |
|
| 57 |
// Padding utilities |
| 58 |
@each $direction in ('t', 'r', 'b', 'l') { |
| 59 |
@each $size, $length in $spacers { |
| 60 |
.p#{$direction}#{if($infix !='-', $infix+"-", "-")}#{$size} { |
| 61 |
padding-#{map-get($direction_points, $direction)}: $length; |
| 62 |
} |
| 63 |
} |
| 64 |
} |
| 65 |
|
| 66 |
// gap utilities |
| 67 |
|
| 68 |
@each $size, $length in $spacers { |
| 69 |
.wdk-gap#{if($infix !='-', $infix+"-", "-")}#{if($infix !='-', $infix+"-", "-")}#{$size} { |
| 70 |
gap: $length; |
| 71 |
} |
| 72 |
} |
| 73 |
} |
| 74 |
} |
| 75 |
|
| 76 |
// ========================== |
| 77 |
// Flex utilities maps |
| 78 |
// ========================== |
| 79 |
$display-utils: ( |
| 80 |
flex: flex, |
| 81 |
inline-flex: inline-flex |
| 82 |
); |
| 83 |
|
| 84 |
$justify-content-utils: ( |
| 85 |
start: flex-start, |
| 86 |
end: flex-end, |
| 87 |
center: center, |
| 88 |
between: space-between, |
| 89 |
around: space-around, |
| 90 |
evenly: space-evenly |
| 91 |
); |
| 92 |
|
| 93 |
$align-items-utils: ( |
| 94 |
start: flex-start, |
| 95 |
end: flex-end, |
| 96 |
center: center, |
| 97 |
baseline: baseline, |
| 98 |
stretch: stretch |
| 99 |
); |
| 100 |
|
| 101 |
$align-content-utils: ( |
| 102 |
start: flex-start, |
| 103 |
end: flex-end, |
| 104 |
center: center, |
| 105 |
between: space-between, |
| 106 |
around: space-around, |
| 107 |
stretch: stretch |
| 108 |
); |
| 109 |
|
| 110 |
$align-self-utils: ( |
| 111 |
auto: auto, |
| 112 |
start: flex-start, |
| 113 |
end: flex-end, |
| 114 |
center: center, |
| 115 |
baseline: baseline, |
| 116 |
stretch: stretch |
| 117 |
); |
| 118 |
|
| 119 |
$flex-direction-utils: ( |
| 120 |
row: row, |
| 121 |
row-reverse: row-reverse, |
| 122 |
column: column, |
| 123 |
column-reverse: column-reverse |
| 124 |
); |
| 125 |
|
| 126 |
$flex-wrap-utils: ( |
| 127 |
wrap: wrap, |
| 128 |
nowrap: nowrap, |
| 129 |
wrap-reverse: wrap-reverse |
| 130 |
); |
| 131 |
|
| 132 |
// ========================== |
| 133 |
// Generate flex utilities |
| 134 |
// ========================== |
| 135 |
@function breakpoint-infix($breakpoint, $breakpoints) { |
| 136 |
@if $breakpoint == '' { |
| 137 |
@return ''; |
| 138 |
} |
| 139 |
@return '-' + $breakpoint; |
| 140 |
} |
| 141 |
|
| 142 |
|
| 143 |
@each $breakpoint in map-keys($breakpoints) { |
| 144 |
@include media-breakpoint-up($breakpoint) { |
| 145 |
$infix: breakpoint-infix($breakpoint, $breakpoints); // '' for base, '-sm', '-md', etc. |
| 146 |
|
| 147 |
// Display |
| 148 |
@each $key, $val in $display-utils { |
| 149 |
.wdk-d#{$infix}-#{$key} { display: $val !important; } |
| 150 |
} |
| 151 |
|
| 152 |
// Justify-content |
| 153 |
@each $key, $val in $justify-content-utils { |
| 154 |
.wdk-justify-content#{$infix}-#{$key} { justify-content: $val !important; } |
| 155 |
} |
| 156 |
|
| 157 |
// Align-items |
| 158 |
@each $key, $val in $align-items-utils { |
| 159 |
.wdk-align-items#{$infix}-#{$key} { align-items: $val !important; } |
| 160 |
} |
| 161 |
|
| 162 |
// Align-content |
| 163 |
@each $key, $val in $align-content-utils { |
| 164 |
.wdk-align-content#{$infix}-#{$key} { align-content: $val !important; } |
| 165 |
} |
| 166 |
|
| 167 |
// Align-self |
| 168 |
@each $key, $val in $align-self-utils { |
| 169 |
.wdk-align-self#{$infix}-#{$key} { align-self: $val !important; } |
| 170 |
} |
| 171 |
|
| 172 |
// Flex-direction |
| 173 |
@each $key, $val in $flex-direction-utils { |
| 174 |
.wdk-flex#{$infix}-#{$key} { flex-direction: $val !important; } |
| 175 |
} |
| 176 |
|
| 177 |
// Flex-wrap |
| 178 |
@each $key, $val in $flex-wrap-utils { |
| 179 |
.wdk-flex#{$infix}-#{$key} { flex-wrap: $val !important; } |
| 180 |
} |
| 181 |
} |
| 182 |
} |
| 183 |
|
