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

221 lines
6.3 KiB
SCSS
Raw Normal View History

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) {
2019-05-23 11:56:03 +02: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);
}
@each $key, $value in $values {
2019-05-23 11:56:03 +02: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
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// 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));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$infix: if($property-class == "" 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)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
2019-05-23 11:56:03 +02:00
2020-02-15 12:01:32 +01: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);
}
}
$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} {
--#{$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} {
--#{$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 {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($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 {
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
}
}
@if $is-rtl == false {
/* rtl:end:remove */
}
2019-05-23 11:56:03 +02:00
}
}
}
// Helper functions and mixins for manipulating the utilities map
// Gets the map of options for a given utility
@function utilities-get-options($utility-name) {
@return map-get($utilities, $utility-name);
}
// Gets the value of a specific option for a given utility
@function utilities-get-option($utility-name, $option-name) {
$options: utilities-get-options($utility-name);
@if ($options) {
@return map-get(
$options,
$option-name
);
}
@return null;
}
// Returns a map of the values for the utility
@function utilities-get-values($utility-name) {
$values: utilities-get-option($utility-name, values);
@if (type-of($values) != map) {
@return map-from($values);
}
@return $values;
}
@function map-from($list-or-string) {
$map: ();
@each $item in $list-or-string {
$map: map-merge(
$map,
($item: $item)
);
}
@return $map;
}
// Gets a specific value for the given utility
@function utilities-get-value($utility-name, $value-name) {
$values: utilities-get-values($utility-name);
@return map-get(
$values,
$value-name
);
}
// Set options for a given utility, merged with the existing ones by default.
// To completely replace the existing options, set the 3rd `$merge` parameter to false
@mixin utilities-set-options($utility-name, $options, $merge: true) {
@if ($merge) {
$existing-options: utilities-get-options($utility-name);
2022-04-01 15:18:46 -07:00
// Allow the mixin to create a new utility when setting an unknown utility name
$options: if(
$existing-options,
map-merge(
utilities-get-options($utility-name),
$options
),
$options
);
}
$utilities: map-merge(
$utilities,
($utility-name: $options)
) !global; // !global ensures we modify the global $utilities map
}
// Set a specific option to a new value for the given utility
@mixin utilities-set-option($utility-name, $option-name, $value) {
@include utilities-set-options($utility-name, ($option-name: $value));
}
// Add new values to a given utility.
// If you want to completely reconfigure the values
// use `utilities-set-option` to provide a new map
// for the `values` option
@mixin utilities-add-values($utility-name, $values) {
$existing-values: utilities-get-values($utility-name);
@include utilities-set-option(
$utility-name,
values,
map-merge(
$existing-values,
$values
)
);
}
// Remove specific values from a given utility
@mixin utilities-remove-values($utility-name, $value-names...) {
$values: utilities-get-values($utility-name);
$updated-values: map-remove($values, $value-names...);
@include utilities-set-option($utility-name, values, $updated-values);
}
// Add a new utility to the utilities map
@mixin utilities-add($utility-name, $utility) {
$utilities: map-merge(
$utilities,
($utility-name: $utility)
) !global;
}
// Remove a utility from the utilities map
@mixin utilities-remove($utility-names...) {
$utilities: map-remove($utilities, $utility-names...) !global;
}