| 1441 |
ariadna |
1 |
// Utility generator
|
|
|
2 |
// Used to generate utilities & print utilities
|
|
|
3 |
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
|
|
4 |
$values: map-get($utility, values);
|
|
|
5 |
|
|
|
6 |
// If the values are a list or string, convert it into a map
|
|
|
7 |
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
|
|
8 |
$values: zip($values, $values);
|
|
|
9 |
}
|
|
|
10 |
|
|
|
11 |
@each $key, $value in $values {
|
|
|
12 |
$properties: map-get($utility, property);
|
|
|
13 |
|
|
|
14 |
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
|
|
15 |
@if type-of($properties) == "string" {
|
|
|
16 |
$properties: append((), $properties);
|
|
|
17 |
}
|
|
|
18 |
|
|
|
19 |
// Use custom class if present
|
|
|
20 |
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
|
|
21 |
$property-class: if($property-class == null, "", $property-class);
|
|
|
22 |
|
|
|
23 |
// Use custom CSS variable name if present, otherwise default to `class`
|
|
|
24 |
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
|
|
25 |
|
|
|
26 |
// State params to generate pseudo-classes
|
|
|
27 |
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
|
|
28 |
|
|
|
29 |
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
|
|
30 |
|
|
|
31 |
// Don't prefix if value key is null (e.g. with shadow class)
|
|
|
32 |
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
|
|
33 |
|
|
|
34 |
@if map-get($utility, rfs) {
|
|
|
35 |
// Inside the media query
|
|
|
36 |
@if $is-rfs-media-query {
|
|
|
37 |
$val: rfs-value($value);
|
|
|
38 |
|
|
|
39 |
// Do not render anything if fluid and non fluid values are the same
|
|
|
40 |
$value: if($val == rfs-fluid-value($value), null, $val);
|
|
|
41 |
}
|
|
|
42 |
@else {
|
|
|
43 |
$value: rfs-fluid-value($value);
|
|
|
44 |
}
|
|
|
45 |
}
|
|
|
46 |
|
|
|
47 |
$is-css-var: map-get($utility, css-var);
|
|
|
48 |
$is-local-vars: map-get($utility, local-vars);
|
|
|
49 |
$is-rtl: map-get($utility, rtl);
|
|
|
50 |
|
|
|
51 |
@if $value != null {
|
|
|
52 |
@if $is-rtl == false {
|
|
|
53 |
/* rtl:begin:remove */
|
|
|
54 |
}
|
|
|
55 |
|
|
|
56 |
@if $is-css-var {
|
|
|
57 |
.#{$property-class + $infix + $property-class-modifier} {
|
|
|
58 |
--#{$prefix}#{$css-variable-name}: #{$value};
|
|
|
59 |
}
|
|
|
60 |
|
|
|
61 |
@each $pseudo in $state {
|
|
|
62 |
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
|
|
63 |
--#{$prefix}#{$css-variable-name}: #{$value};
|
|
|
64 |
}
|
|
|
65 |
}
|
|
|
66 |
} @else {
|
|
|
67 |
.#{$property-class + $infix + $property-class-modifier} {
|
|
|
68 |
@each $property in $properties {
|
|
|
69 |
@if $is-local-vars {
|
|
|
70 |
@each $local-var, $variable in $is-local-vars {
|
|
|
71 |
--#{$prefix}#{$local-var}: #{$variable};
|
|
|
72 |
}
|
|
|
73 |
}
|
|
|
74 |
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
|
75 |
}
|
|
|
76 |
}
|
|
|
77 |
|
|
|
78 |
@each $pseudo in $state {
|
|
|
79 |
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
|
|
80 |
@each $property in $properties {
|
|
|
81 |
@if $is-local-vars {
|
|
|
82 |
@each $local-var, $variable in $is-local-vars {
|
|
|
83 |
--#{$prefix}#{$local-var}: #{$variable};
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
|
87 |
}
|
|
|
88 |
}
|
|
|
89 |
}
|
|
|
90 |
}
|
|
|
91 |
|
|
|
92 |
@if $is-rtl == false {
|
|
|
93 |
/* rtl:end:remove */
|
|
|
94 |
}
|
|
|
95 |
}
|
|
|
96 |
}
|
|
|
97 |
}
|