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 | // State params to generate pseudo-classes
|
---|
24 | $state: if(map-has-key($utility, state), map-get($utility, state), ());
|
---|
25 |
|
---|
26 | $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
---|
27 |
|
---|
28 | // Don't prefix if value key is null (eg. with shadow class)
|
---|
29 | $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
---|
30 |
|
---|
31 | @if map-get($utility, rfs) {
|
---|
32 | // Inside the media query
|
---|
33 | @if $is-rfs-media-query {
|
---|
34 | $val: rfs-value($value);
|
---|
35 |
|
---|
36 | // Do not render anything if fluid and non fluid values are the same
|
---|
37 | $value: if($val == rfs-fluid-value($value), null, $val);
|
---|
38 | }
|
---|
39 | @else {
|
---|
40 | $value: rfs-fluid-value($value);
|
---|
41 | }
|
---|
42 | }
|
---|
43 |
|
---|
44 | $is-css-var: map-get($utility, css-var);
|
---|
45 | $is-local-vars: map-get($utility, local-vars);
|
---|
46 | $is-rtl: map-get($utility, rtl);
|
---|
47 |
|
---|
48 | @if $value != null {
|
---|
49 | @if $is-rtl == false {
|
---|
50 | /* rtl:begin:remove */
|
---|
51 | }
|
---|
52 |
|
---|
53 | @if $is-css-var {
|
---|
54 | .#{$property-class + $infix + $property-class-modifier} {
|
---|
55 | --#{$variable-prefix}#{$property-class}: #{$value};
|
---|
56 | }
|
---|
57 |
|
---|
58 | @each $pseudo in $state {
|
---|
59 | .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
---|
60 | --#{$variable-prefix}#{$property-class}: #{$value};
|
---|
61 | }
|
---|
62 | }
|
---|
63 | } @else {
|
---|
64 | .#{$property-class + $infix + $property-class-modifier} {
|
---|
65 | @each $property in $properties {
|
---|
66 | @if $is-local-vars {
|
---|
67 | @each $local-var, $value in $is-local-vars {
|
---|
68 | --#{$variable-prefix}#{$local-var}: #{$value};
|
---|
69 | }
|
---|
70 | }
|
---|
71 | #{$property}: $value if($enable-important-utilities, !important, null);
|
---|
72 | }
|
---|
73 | }
|
---|
74 |
|
---|
75 | @each $pseudo in $state {
|
---|
76 | .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
---|
77 | @each $property in $properties {
|
---|
78 | #{$property}: $value if($enable-important-utilities, !important, null);
|
---|
79 | }
|
---|
80 | }
|
---|
81 | }
|
---|
82 | }
|
---|
83 |
|
---|
84 | @if $is-rtl == false {
|
---|
85 | /* rtl:end:remove */
|
---|
86 | }
|
---|
87 | }
|
---|
88 | }
|
---|
89 | }
|
---|