mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

WIP, needs to be broken apart

Browse Source 
- button ideas
- rewrite utility mixin
- cleanup some code
- remove hyphen from infix by default
This commit is contained in:
Mark Otto
2025-03-07 09:46:35 -08:00
parent 9f8967d470
commit 12fb082b3b
23 changed files with 1129 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
scss/mixins/_utilities.scss
View File

@@ -2,15 +2,38 @@
@use "../config" as *;
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
$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);
// - 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);
// 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);
}
}
// Calculate infix once, before the loop
$infix: if($infix == "", "", "-" + $infix);
@each $key, $value in $values {
$properties: map.get($utility, property);
@@ -19,20 +42,21 @@
$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 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`
$css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, 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
$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);
// $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
$customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
@if map.get($utility, rfs) {
// Inside the media query
@@ -49,52 +73,76 @@
$is-css-var: map.get($utility, css-var);
$is-local-vars: map.get($utility, local-vars);
$is-rtl: map.get($utility, rtl);
// $is-rtl: map.get($utility, rtl);
@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};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$prefix}#{$css-variable-name}: #{$value};
}
}
$selector: "";
@if $selectorType == "class" {
// Use the fallback of the first property if no `class` key is used
@if $customClass != "" {
$selector: ".#{$customClass + $infix + $customClassModifier}";
} @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;
}
}
@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;
}
}
}
$selector: ".#{$selectorClass + $infix + $customClassModifier}";
}
} @else if $selectorType == "attr-starts" {
$selector: "[class^=\"#{$selectorClass}\"]";
} @else if $selectorType == "attr-includes" {
$selector: "[class*=\"#{$selectorClass}\"]";
}
@if $is-rtl == false {
/* rtl:end:remove */
// @debug $utility;
// @debug $selectorType;
// @debug $selector;
// @debug $properties;
// @debug $values;
#{$selector} {
@each $property in $properties {
#{$property}: $value;
}
}
// @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;
// // }
// // }
// // }
// }
// }
}
}