[d565449] | 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 | }
|
---|