Skip to content

Commit be43fe9

Browse files
FrontendlandFrontendland
committed
♻️ Reorder mixins alphabetically
1 parent 98e95e7 commit be43fe9

File tree

2 files changed

+154
-157
lines changed

2 files changed

+154
-157
lines changed

‎src/components/Checkbox/checkbox.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ body {
3434
}
3535

3636
&:disabled + span {
37-
@include background(primary-40);
38-
@include border(primary-40);
37+
@include background(primary-30);
38+
@include border(primary-30);
3939
cursor: no-drop;
4040
}
4141
}

‎src/scss/config/mixins.scss

Lines changed: 152 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,6 @@
33
@use 'sass:list';
44
@use 'sass:string';
55

6-
@mixin transition($args...) {
7-
$property: all;
8-
$speed: .3s;
9-
10-
@each $arg in $args {
11-
@if (meta.type-of($arg) == 'number') {
12-
$speed: $arg;
13-
} @else {
14-
$property: $arg;
15-
}
16-
}
17-
18-
transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
19-
}
20-
21-
@mixin media($breakpoint: 'xs') {
22-
@media (min-width: #{map.get($breakpoints, $breakpoint)}) {
23-
@content;
24-
}
25-
}
26-
276
@mixin background($arg) {
287
background: map.get($colorPalette, '#{$arg}') or $arg;
298
}
@@ -71,122 +50,95 @@
7150
@mixin border-radius($args...) {
7251
$borderRadius: map.get($radius, 'md');
7352
$position: null;
74-
$side: (
75-
top: ('top-left', 'top-right'),
76-
bottom: ('bottom-left', 'bottom-right'),
77-
left: ('top-left', 'bottom-left'),
78-
right: ('top-right', 'bottom-right')
79-
);
80-
53+
8154
@each $arg in $args {
82-
@if (map.get($radius, $arg)) {
83-
$borderRadius: map.get($radius, $arg);
84-
}
85-
86-
@if (map.get($side, $arg)) {
87-
$position: map.get($side, $arg);
88-
}
55+
@if (map.get($radius, $arg)) {
56+
$borderRadius: map.get($radius, $arg);
57+
}
58+
59+
$side: (
60+
top: $borderRadius $borderRadius 0 0,
61+
bottom: 0 0 $borderRadius $borderRadius,
62+
left: $borderRadius 0 0 $borderRadius,
63+
right: 0 $borderRadius $borderRadius 0,
64+
diagonal: $borderRadius 0,
65+
reverse-diagonal: 0 $borderRadius
66+
);
67+
68+
@if (map.get($side, $arg)) {
69+
$position: map.get($side, $arg);
70+
}
8971
}
72+
73+
border-radius: $position or $borderRadius;
74+
}
9075

91-
@if ($position) {
92-
@each $key in $position {
93-
border-#{$key}-radius: $borderRadius;
94-
}
95-
} @else {
96-
border-radius: $borderRadius;
97-
}
76+
@mixin layer($stack: 'default') {
77+
z-index: #{map.get($layers, $stack)};
9878
}
9979

100-
@mixin visibility($args...) {
80+
@mixin layout($args...) {
81+
$layouts: (flex, inline-flex, grid, inline-grid);
82+
$alignments: (
83+
vertical: (
84+
'v-center': center,
85+
'v-start': flex-start,
86+
'v-end': flex-end,
87+
'v-baseline': baseline,
88+
'v-stretch': stretch
89+
),
90+
horizontal: (
91+
'h-center': center,
92+
'h-start': flex-start,
93+
'h-end': flex-end,
94+
'h-between': space-between,
95+
'h-around': space-around,
96+
'h-evenly': space-evenly,
97+
'h-stretch': stretch
98+
)
99+
);
100+
101101
@each $arg in $args {
102-
@if list.index($displayValues, $arg) {
102+
@if (list.index($layouts, $arg)) {
103103
display: $arg;
104104
}
105105

106-
@if list.index($overflowValues, $arg) {
107-
overflow: $arg;
108-
}
109-
110-
@if (meta.type-of($arg) == 'number') {
111-
opacity: $arg;
106+
@if (map.get($spacing, $arg)) {
107+
gap: map.get($spacing, $arg);
112108
}
113-
}
114-
}
115-
116-
@mixin layer($stack: 'default') {
117-
z-index: #{map.get($layers, $stack)};
118-
}
119-
120-
@mixin size($args...) {
121-
$singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
122-
$isSingle: list.length($args) == 1
123-
and $singlePrefix != 'w'
124-
and $singlePrefix != 'h';
125-
126-
@if ($isSingle) {
127-
width: $args;
128-
height: $args;
129-
} @else {
130-
@each $arg in $args {
131-
@if (meta.type-of($arg) == string) {
132-
$prefix: string.slice($arg, 1, 1);
133-
$value: string.slice($arg, 2, -1);
134109

135-
@if ($prefix == 'w') {
136-
width: string.unquote($value);
137-
}
138-
139-
@if ($prefix == 'h') {
140-
height: string.unquote($value);
141-
}
142-
} @else {
143-
@if (index($args, $arg) == 1) {
144-
width: $arg;
145-
}
110+
@if (meta.type-of($arg) == 'string') {
111+
@if (string.index($arg, 'v-')) {
112+
align-items: map.get(map.get($alignments, vertical), $arg)
113+
}
146114

147-
@if (index($args, $arg) == 2) {
148-
height: $arg;
149-
}
115+
@if (string.index($arg, 'h-')) {
116+
justify-content: map.get(map.get($alignments, horizontal), $arg)
150117
}
151118
}
152-
}
153-
}
154-
155-
@mixin typography($args...) {
156-
@each $arg in $args {
157-
$color: map.get($colorPalette, '#{$arg}');
158-
$type: map.get($fontTypes, '#{$arg}');
159-
$size: map.get($fontSizes, '#{$arg}');
160-
$height: map.get($lineHeights, '#{$arg}');
161-
$decoration: map.get($decorations, '#{$arg}');
162-
163-
@if ($color) {
164-
color: $color;
165-
}
166-
167-
@if ($type) {
168-
font-family: $type;
169-
}
170119

171-
@if ($size) {
172-
font-size: $size;
120+
@if ($arg == 'center') {
121+
align-items: center;
122+
justify-content: center;
173123
}
174124

175-
@if list.index($fontWeights, $arg) {
176-
font-weight: $arg;
125+
@if (list.index($flexDirectionValues, $arg)) {
126+
flex-direction: $arg;
177127
}
178128

179-
@if list.index($textAlignValues, $arg) {
180-
text-align: $arg;
129+
@if (meta.type-of($arg) == 'number') {
130+
grid-template-columns: repeat($arg, minmax(0, 1fr));
181131
}
182132

183-
@if ($decoration) {
184-
text-decoration: $decoration;
133+
@if (list.index($flexWrapValues, $arg)) {
134+
flex-wrap: $arg;
185135
}
136+
}
137+
}
186138

187-
@if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
188-
line-height: $height or $arg;
189-
}
139+
@mixin media($breakpoint: 'xs') {
140+
@media (min-width: #{map.get($breakpoints, $breakpoint)}) {
141+
@content;
190142
}
191143
}
192144

@@ -230,6 +182,41 @@
230182
}
231183
}
232184

185+
@mixin size($args...) {
186+
$singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
187+
$isSingle: list.length($args) == 1
188+
and $singlePrefix != 'w'
189+
and $singlePrefix != 'h';
190+
191+
@if ($isSingle) {
192+
width: $args;
193+
height: $args;
194+
} @else {
195+
@each $arg in $args {
196+
@if (meta.type-of($arg) == string) {
197+
$prefix: string.slice($arg, 1, 1);
198+
$value: string.slice($arg, 2, -1);
199+
200+
@if ($prefix == 'w') {
201+
width: string.unquote($value);
202+
}
203+
204+
@if ($prefix == 'h') {
205+
height: string.unquote($value);
206+
}
207+
} @else {
208+
@if (index($args, $arg) == 1) {
209+
width: $arg;
210+
}
211+
212+
@if (index($args, $arg) == 2) {
213+
height: $arg;
214+
}
215+
}
216+
}
217+
}
218+
}
219+
233220
@mixin spacing($args...) {
234221
$margin: (0 0 0 0);
235222
$padding: (0 0 0 0);
@@ -342,61 +329,71 @@
342329
}
343330
}
344331

345-
@mixin layout($args...) {
346-
$layouts: (flex, inline-flex, grid, inline-grid);
347-
$alignments: (
348-
vertical: (
349-
'v-center': center,
350-
'v-start': flex-start,
351-
'v-end': flex-end,
352-
'v-baseline': baseline,
353-
'v-stretch': stretch
354-
),
355-
horizontal: (
356-
'h-center': center,
357-
'h-start': flex-start,
358-
'h-end': flex-end,
359-
'h-between': space-between,
360-
'h-around': space-around,
361-
'h-evenly': space-evenly,
362-
'h-stretch': stretch
363-
)
364-
);
332+
@mixin transition($args...) {
333+
$property: all;
334+
$speed: .3s;
365335

366336
@each $arg in $args {
367-
@if (list.index($layouts, $arg)) {
368-
display: $arg;
337+
@if (meta.type-of($arg) == 'number') {
338+
$speed: $arg;
339+
} @else {
340+
$property: $arg;
369341
}
342+
}
370343

371-
@if (map.get($spacing, $arg)) {
372-
gap: map.get($spacing, $arg);
344+
transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
345+
}
346+
347+
@mixin typography($args...) {
348+
@each $arg in $args {
349+
$color: map.get($colorPalette, '#{$arg}');
350+
$type: map.get($fontTypes, '#{$arg}');
351+
$size: map.get($fontSizes, '#{$arg}');
352+
$height: map.get($lineHeights, '#{$arg}');
353+
$decoration: map.get($decorations, '#{$arg}');
354+
355+
@if ($color) {
356+
color: $color;
373357
}
374358

375-
@if (meta.type-of($arg) == 'string') {
376-
@if (string.index($arg, 'v-')) {
377-
align-items: map.get(map.get($alignments, vertical), $arg)
378-
}
379-
380-
@if (string.index($arg, 'h-')) {
381-
justify-content: map.get(map.get($alignments, horizontal), $arg)
382-
}
359+
@if ($type) {
360+
font-family: $type;
383361
}
384362

385-
@if ($arg == 'center') {
386-
align-items: center;
387-
justify-content: center;
363+
@if ($size) {
364+
font-size: $size;
388365
}
389366

390-
@if (list.index($flexDirectionValues, $arg)) {
391-
flex-direction: $arg;
367+
@if list.index($fontWeights, $arg) {
368+
font-weight: $arg;
392369
}
393370

394-
@if (meta.type-of($arg) == 'number') {
395-
grid-template-columns: repeat($arg, minmax(0, 1fr));
371+
@if list.index($textAlignValues, $arg) {
372+
text-align: $arg;
396373
}
397374

398-
@if (list.index($flexWrapValues, $arg)) {
399-
flex-wrap: $arg;
375+
@if ($decoration) {
376+
text-decoration: $decoration;
377+
}
378+
379+
@if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
380+
line-height: $height or $arg;
381+
}
382+
}
383+
}
384+
385+
@mixin visibility($args...) {
386+
@each $arg in $args {
387+
@if list.index($displayValues, $arg) {
388+
display: $arg;
389+
}
390+
391+
@if list.index($overflowValues, $arg) {
392+
overflow: $arg;
393+
}
394+
395+
@if (meta.type-of($arg) == 'number') {
396+
opacity: $arg;
400397
}
401398
}
402399
}

0 commit comments

Comments
 (0)