0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 20:54:22 +01:00
Bootstrap/scss/mixins/_utilities.scss

105 lines
3.5 KiB
SCSS
Raw Normal View History

2024-07-29 22:04:11 -07:00
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "../variables";
@use "../vendor/rfs";
2019-05-23 11:56:03 +02:00
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
2024-07-29 22:04:11 -07:00
$values: map.get($utility, values);
2019-05-23 11:56:03 +02:00
// If the values are a list or string, convert it into a map
2024-07-29 22:04:11 -07:00
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
$values: list.zip($values, $values);
2019-05-23 11:56:03 +02:00
}
@each $key, $value in $values {
2024-07-29 22:04:11 -07:00
$properties: map.get($utility, property);
2019-05-23 11:56:03 +02:00
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
2024-07-29 22:04:11 -07:00
@if meta.type-of($properties) == "string" {
$properties: list.append((), $properties);
2019-05-23 11:56:03 +02:00
}
// Use custom class if present
2024-07-29 22:04:11 -07:00
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
2024-07-29 22:04:11 -07:00
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
// State params to generate pseudo-classes
2024-07-29 22:04:11 -07:00
$state: if(map.has-key($utility, state), map.get($utility, state), ());
2024-07-29 22:04:11 -07:00
$infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
2019-05-23 11:56:03 +02:00
2022-07-29 21:49:01 +02:00
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
2019-05-23 11:56:03 +02:00
2024-07-29 22:04:11 -07:00
@if map.get($utility, rfs) {
2020-02-15 12:01:32 +01:00
// Inside the media query
@if $is-rfs-media-query {
2024-07-29 22:04:11 -07:00
$val: rfs.rfs-value($value);
2020-02-15 12:01:32 +01:00
// Do not render anything if fluid and non fluid values are the same
2024-07-29 22:04:11 -07:00
$value: if($val == rfs.rfs-fluid-value($value), null, $val);
2020-02-15 12:01:32 +01:00
}
@else {
2024-07-29 22:04:11 -07:00
$value: rfs.rfs-fluid-value($value);
2020-02-15 12:01:32 +01:00
}
}
2024-07-29 22:04:11 -07:00
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl);
2020-02-15 12:01:32 +01:00
@if $value != null {
@if $is-rtl == false {
/* rtl:begin:remove */
}
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
2024-07-29 22:04:11 -07:00
--#{variables.$prefix}#{$css-variable-name}: #{$value};
2020-02-15 12:01:32 +01:00
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
2024-07-29 22:04:11 -07:00
--#{variables.$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
2024-07-29 22:04:11 -07:00
--#{variables.$prefix}#{$local-var}: #{$variable};
}
}
2024-07-29 22:04:11 -07:00
#{$property}: $value if(variables.$enable-important-utilities, !important, null);
}
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
2024-07-29 22:04:11 -07:00
--#{variables.$prefix}#{$local-var}: #{$variable};
}
}
2024-07-29 22:04:11 -07:00
#{$property}: $value if(variables.$enable-important-utilities, !important, null);
}
}
}
}
@if $is-rtl == false {
/* rtl:end:remove */
}
2019-05-23 11:56:03 +02:00
}
}
}