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

Update utility mixin and wrap utility classes in $enable- variable

Browse Source 
- Rearrange Sass files to simplify things
- Rename `utl()` to `util()`
- Add new `$enable-utility-classes` variable for disabling the default generation of our utilities (useful if you want to only use utilities via mixin)
This commit is contained in:
Mark Otto
2021-12-04 12:12:42 -08:00
parent 0354fd27e4
commit b4cbc54143
8 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_variables.scss
View File

@@ -382,6 +382,7 @@ $enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-utility-classes: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;

1
scss/bootstrap-grid.scss vendored
View File

@@ -60,4 +60,3 @@ $utilities: map-get-multiple(
);
@import "utilities/api";
@import "utilities/mixin";

1
scss/bootstrap-utilities.scss vendored
View File

@@ -17,4 +17,3 @@
// Utilities
@import "utilities/api";
@import "utilities/mixin";

1
scss/bootstrap.scss vendored
View File

@@ -49,5 +49,4 @@
// Utilities
@import "utilities/api";
@import "utilities/mixin";
// scss-docs-end import-stack

2
scss/functions/_utilities-map.scss
View File

@@ -14,8 +14,8 @@
}
$utilities-map: () !default;
@each $key, $utility in $utilities {
@each $key, $utility in $utilities {
@if type-of($utility) == "map" {
$properties: map-get($utility, property);
// Some utilities set the value on more than one property.

89
scss/utilities/_api.scss
View File

@@ -1,47 +1,74 @@
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@if $enable-utility-classes {
// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
}
}
}
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if type-of($utility) == "map" and map-get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}
}
}
// Generate utility placeholders
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if type-of($utility) == "map" and map-get($utility, print) == true {
@include generate-utility($utility, "-print");
$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
@mixin util($class) {
@if map-has-key($utilities-map, $class) {
$definition: map-get($utilities-map, $class);
$breakpoint: map-get($definition, breakpoint);
@if $breakpoint != null {
@include media-breakpoint-up($breakpoint) {
@each $property in map-get($definition, properties) {
#{$property}: map-get($definition, value);
}
}
}
@else {
@each $property in map-get($definition, properties) {
#{$property}: map-get($definition, value);
}
}
}
@else {
@debug "Unknown utility class " + $class;
}
}

24
scss/utilities/_mixin.scss
View File

@@ -1,24 +0,0 @@
$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
@mixin utl($class) {
@if map-has-key($utilities-map, $class) {
$definition: map-get($utilities-map, $class);
$breakpoint: map-get($definition, breakpoint);
@if $breakpoint != null {
@include media-breakpoint-up($breakpoint) {
@each $property in map-get($definition, properties) {
#{$property}: map-get($definition, value);
}
}
}
@else {
@each $property in map-get($definition, properties) {
#{$property}: map-get($definition, value);
}
}
}
@else {
@debug "Unknown utility class " + $class;
}
}

1
site/content/docs/5.3/customize/options.md
View File

@@ -27,6 +27,7 @@ You can find and customize these variables for key global options in Bootstrap's
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
| `$enable-utility-classes` | `true` (default) or `false` | Enables the generation of utility classes. |
| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |
| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) |
{{< /bs-table >}}