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 | }
|
---|