mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki Activity

Proposal for form validation

Browse Source
This commit is contained in:
louismaxime.piton
2023-08-22 12:14:56 +02:00
parent 674dfd0044
commit daf481627f
4 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/forms/_form-check.scss
View File

@@ -35,11 +35,11 @@
&:focus {
border-color: $form-check-input-focus-border;
outline: 0;
box-shadow: $form-check-input-focus-box-shadow;
box-shadow: var(--#{$prefix}form-check-focus-box-shadow, $form-check-input-focus-box-shadow);
}
&:checked {
background-color: $form-check-input-checked-bg-color;
background-color: var(--#{$prefix}form-check-checked-bg-color, $form-check-input-checked-bg-color);
@if $enable-gradients {
background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
} @else {

6
scss/forms/_form-control.scss
View File

@@ -21,7 +21,7 @@
appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@@ -41,7 +41,7 @@
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
outline: 0;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -165,7 +165,7 @@
}
.form-control-color {
width: $form-color-width;
width: var(--#{$prefix}form-color-width, $form-color-width);
padding: var(--#{$prefix}form-control-padding-y);
&:not(:disabled):not([readonly]) {

8
scss/forms/_form-select.scss
View File

@@ -20,19 +20,19 @@
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color;
border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
@include transition($form-select-transition);
&:focus {
border-color: $form-select-focus-border-color;
border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@include box-shadow($form-select-box-shadow, var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
box-shadow: var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow);
}
}

31
scss/mixins/_forms.scss
View File

@@ -57,7 +57,9 @@
.form-control {
@include form-validation-state-selector($state) {
border-color: $border-color;
--#{$prefix}input-border-color: #{$border-color};
--#{$prefix}input-focus-border-color: #{$border-color};
--#{$prefix}input-focus-box-shadow: #{$focus-box-shadow};
@if $enable-validation-icons {
padding-right: $input-height-inner;
@@ -66,11 +68,6 @@
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
}
@@ -86,7 +83,9 @@
.form-select {
@include form-validation-state-selector($state) {
border-color: $border-color;
--#{$prefix}form-select-border-color: #{$border-color};
--#{$prefix}form-select-focus-border-color: #{$border-color};
--#{$prefix}form-select-focus-box-shadow: #{$focus-box-shadow};
@if $enable-validation-icons {
&:not([multiple]):not([size]),
@@ -97,34 +96,24 @@
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
--#{$prefix}form-color-width: #{add($form-color-width, $input-height-inner)};
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
--#{$prefix}form-check-focus-box-shadow: #{$focus-box-shadow};
--#{$prefix}form-check-checked-bg-color: #{$color};
border-color: $border-color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}