rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +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/form-text";
@import "forms/form-control";

16
scss/_root.scss
View File

@ -119,15 +119,6 @@
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
// 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 {
@ -176,13 +167,6 @@
--#{$prefix}border-color: #{$border-color-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
}
}

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.
{{< 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.