0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Bootstrap/scss/mixins/_utilities.scss

149 lines
4.9 KiB
SCSS
Raw Normal View History

2025-02-18 09:50:10 -08:00
@use "sass:map";
@use "../config" as *;
2019-05-23 11:56:03 +02:00
// Utility generator
// - Utilities can three different types of selectors:
// - class: .class
// - attr-starts: [class^="class"]
// - attr-includes: [class*="class"]
// - Utilities can generate a regular CSS property or a CSS custom property
// - Utilities can be responsive or not
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
// Determine if we're generating a class, or an attribute selector
$selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
// Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
$selectorClass: map.get($utility, class);
2019-05-23 11:56:03 +02:00
// Get the list or map of values and ensure it's a map
$values: map.get($utility, values);
@if type-of($values) != "map" {
@if type-of($values) == "list" {
$list: ();
@each $value in $values {
$list: map.merge($list, ($value: $value));
}
$values: $list;
} @else {
$values: (null: $values);
}
2019-05-23 11:56:03 +02:00
}
// Calculate infix once, before the loop
$infix: if($infix == "", "", "-" + $infix);
@each $key, $value in $values {
2025-02-18 09:50:10 -08: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
@if type-of($properties) == "string" {
$properties: append((), $properties);
}
// Use custom class if present, otherwise use the first value from the list of properties
$customClass: if(map.has-key($utility, class), map.get($utility, class), nth($properties, 1));
$customClass: if($customClass == null, "", $customClass);
// Use custom CSS variable name if present, otherwise default to `class`
// mdo-do: restore?
// $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
2025-02-18 09:50:10 -08:00
$state: if(map.has-key($utility, state), map.get($utility, state), ());
// $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-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)
$customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
2019-05-23 11:56:03 +02:00
2025-02-18 09:50:10 -08:00
@if map.get($utility, rfs) {
2020-02-15 12:01:32 +01:00
// 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);
}
}
2025-02-18 09:50:10 -08:00
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
// $is-rtl: map.get($utility, rtl);
$selector: "";
@if $selectorType == "class" {
// Use the fallback of the first property if no `class` key is used
@if $customClass != "" {
$selector: ".#{$customClass + $infix + $customClassModifier}";
} @else {
$selector: ".#{$selectorClass + $infix + $customClassModifier}";
}
} @else if $selectorType == "attr-starts" {
$selector: "[class^=\"#{$selectorClass}\"]";
} @else if $selectorType == "attr-includes" {
$selector: "[class*=\"#{$selectorClass}\"]";
}
// @debug $utility;
// @debug $selectorType;
// @debug $selector;
// @debug $properties;
// @debug $values;
#{$selector} {
@each $property in $properties {
#{$property}: $value;
}
2019-05-23 11:56:03 +02:00
}
// @if $value != null {
// #{$selector} {
// @each $property in $properties {
// #{$property}: $value;
// }
// }
// @if $is-css-var {
// #{$selector} {
// --#{$prefix}#{$css-variable-name}: #{$value};
// }
// @each $pseudo in $state {
// #{$selector}-#{$pseudo}:#{$pseudo} {
// --#{$prefix}#{$css-variable-name}: #{$value};
// }
// }
// } @else {
// #{$selector} {
// @each $property in $properties {
// // @if $is-local-vars {
// // @each $local-var, $variable in $is-local-vars {
// // --#{$prefix}#{$local-var}: #{$variable};
// // }
// // }
// #{$property}: $value;
// }
// }
// // @each $pseudo in $state {
// // #{$selector}-#{$pseudo}:#{$pseudo} {
// // @each $property in $properties {
// // @if $is-local-vars {
// // @each $local-var, $variable in $is-local-vars {
// // --#{$prefix}#{$local-var}: #{$variable};
// // }
// // }
// // #{$property}: $value;
// // }
// // }
// // }
// }
// }
2019-05-23 11:56:03 +02:00
}
}