2019-05-23 05:56:03 -04:00
|
|
|
// Utility generator
|
|
|
|
// Used to generate utilities & print utilities
|
2020-02-15 06:01:32 -05:00
|
|
|
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
|
2019-05-23 05:56:03 -04:00
|
|
|
$values: map-get($utility, values);
|
|
|
|
|
|
|
|
// If the values are a list or string, convert it into a map
|
|
|
|
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
|
|
|
$values: zip($values, $values);
|
|
|
|
}
|
|
|
|
|
2019-05-30 11:22:06 -04:00
|
|
|
@each $key, $value in $values {
|
2019-05-23 05:56:03 -04:00
|
|
|
$properties: map-get($utility, property);
|
|
|
|
|
|
|
|
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
|
|
|
@if type-of($properties) == "string" {
|
|
|
|
$properties: append((), $properties);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Use custom class if present
|
2019-08-17 14:19:00 -04:00
|
|
|
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
|
|
|
$property-class: if($property-class == null, "", $property-class);
|
|
|
|
|
2021-11-30 00:14:17 -05:00
|
|
|
// Use custom CSS variable name if present, otherwise default to `class`
|
|
|
|
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
|
|
|
|
2020-09-14 01:33:31 -04:00
|
|
|
// State params to generate pseudo-classes
|
|
|
|
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
|
|
|
|
2019-08-17 14:19:00 -04:00
|
|
|
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
2019-05-23 05:56:03 -04:00
|
|
|
|
|
|
|
// Don't prefix if value key is null (eg. with shadow class)
|
2019-08-17 14:19:00 -04:00
|
|
|
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
2019-05-23 05:56:03 -04:00
|
|
|
|
2020-02-15 06:01:32 -05:00
|
|
|
@if map-get($utility, rfs) {
|
|
|
|
// Inside the media query
|
|
|
|
@if $is-rfs-media-query {
|
|
|
|
$val: rfs-value($value);
|
|
|
|
|
|
|
|
// Do not render anything if fluid and non fluid values are the same
|
|
|
|
$value: if($val == rfs-fluid-value($value), null, $val);
|
|
|
|
}
|
|
|
|
@else {
|
|
|
|
$value: rfs-fluid-value($value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-24 14:56:19 -04:00
|
|
|
$is-css-var: map-get($utility, css-var);
|
|
|
|
$is-local-vars: map-get($utility, local-vars);
|
2020-06-26 10:06:20 -04:00
|
|
|
$is-rtl: map-get($utility, rtl);
|
|
|
|
|
2020-02-15 06:01:32 -05:00
|
|
|
@if $value != null {
|
2020-06-26 10:06:20 -04:00
|
|
|
@if $is-rtl == false {
|
|
|
|
/* rtl:begin:remove */
|
|
|
|
}
|
2021-05-24 14:56:19 -04:00
|
|
|
|
|
|
|
@if $is-css-var {
|
|
|
|
.#{$property-class + $infix + $property-class-modifier} {
|
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
2022-03-13 13:13:09 -04:00
|
|
|
--#{$prefix}#{$css-variable-name}: #{$value};
|
2020-02-15 06:01:32 -05:00
|
|
|
}
|
2020-09-14 01:33:31 -04:00
|
|
|
|
2021-05-24 14:56:19 -04:00
|
|
|
@each $pseudo in $state {
|
|
|
|
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
2022-03-13 13:13:09 -04:00
|
|
|
--#{$prefix}#{$css-variable-name}: #{$value};
|
2021-05-24 14:56:19 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
} @else {
|
|
|
|
.#{$property-class + $infix + $property-class-modifier} {
|
2020-09-14 01:33:31 -04:00
|
|
|
@each $property in $properties {
|
2021-05-24 14:56:19 -04:00
|
|
|
@if $is-local-vars {
|
2021-11-30 00:14:17 -05:00
|
|
|
@each $local-var, $variable in $is-local-vars {
|
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
2022-03-13 13:13:09 -04:00
|
|
|
--#{$prefix}#{$local-var}: #{$variable};
|
2021-05-24 14:56:19 -04:00
|
|
|
}
|
|
|
|
}
|
2020-09-14 01:33:31 -04:00
|
|
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
|
|
}
|
|
|
|
}
|
2021-05-24 14:56:19 -04:00
|
|
|
|
|
|
|
@each $pseudo in $state {
|
|
|
|
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
|
|
|
@each $property in $properties {
|
|
|
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-09-14 01:33:31 -04:00
|
|
|
}
|
2021-05-24 14:56:19 -04:00
|
|
|
|
2020-06-26 10:06:20 -04:00
|
|
|
@if $is-rtl == false {
|
|
|
|
/* rtl:end:remove */
|
|
|
|
}
|
2019-05-23 05:56:03 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|