rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Reduce bundle size by importing variables in _forms.scss directly

Browse Source
This commit is contained in:
louismaxime.piton 2023-08-24 11:41:15 +02:00
parent a8efd9f3e3
commit eac8f88c4e
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scss/_forms.scss
View File

@ -1,3 +1,25 @@
:root {
// scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
--#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
// scss-docs-end root-form-validation-variables
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
--#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
}
}
@import "forms/labels"; @import "forms/labels";
@import "forms/form-text"; @import "forms/form-text";
@import "forms/form-control"; @import "forms/form-control";

16
scss/_root.scss
View File

@ -119,15 +119,6 @@
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color}; --#{$prefix}focus-ring-color: #{$focus-ring-color};
// scss-docs-end root-focus-variables // scss-docs-end root-focus-variables
// scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
--#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
// scss-docs-end root-form-validation-variables
} }
@if $enable-dark-mode { @if $enable-dark-mode {
@ -176,13 +167,6 @@
--#{$prefix}border-color: #{$border-color-dark}; --#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
--#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
// scss-docs-end root-dark-mode-vars // scss-docs-end root-dark-mode-vars
} }
} }

2
site/content/docs/5.3/forms/validation.md
View File

@ -357,7 +357,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} {{< scss-docs name="root-form-validation-variables" file="scss/_forms.scss" >}}
These variables are also color mode adaptive, meaning they change color while in dark mode. These variables are also color mode adaptive, meaning they change color while in dark mode.