Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/mixins/_forms.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // Form control focus state
2 //
3 // Generate a customized focus state and for any input with the specified color,
4 // which defaults to the `@input-border-color-focus` variable.
5 //
6 // We highly encourage you to not customize the default value, but instead use
7 // this to tweak colors on an as-needed basis. This aesthetic change is based on
8 // WebKit's default styles, but applicable to a wider range of browsers. Its
9 // usability and accessibility should be taken into account with any change.
10 //
11 // Example usage: change the default blue border and shadow to white for better
12 // contrast against a dark gray background.
13 @mixin form-control-focus() {
14 &:focus {
15 color: $input-focus-color;
16 background-color: $input-focus-bg;
17 border-color: $input-focus-border-color;
18 outline: none;
19 @include box-shadow($input-focus-box-shadow);
20 }
21 }
22
23
24 @mixin form-validation-state($state, $color) {
25
26 .form-control,
27 .custom-select {
28 .was-validated &:#{$state},
29 &.is-#{$state} {
30 border-color: $color;
31
32 &:focus {
33 box-shadow: 0 0 0 .2rem rgba($color,.25);
34 }
35
36 ~ .invalid-feedback,
37 ~ .invalid-tooltip {
38 display: block;
39 }
40 }
41 }
42
43
44 // TODO: redo check markup lol crap
45 .form-check-input {
46 .was-validated &:#{$state},
47 &.is-#{$state} {
48 + .form-check-label {
49 color: $color;
50 }
51 }
52 }
53
54 // custom radios and checks
55 .custom-control-input {
56 .was-validated &:#{$state},
57 &.is-#{$state} {
58 ~ .custom-control-indicator {
59 background-color: rgba($color, .25);
60 }
61 ~ .custom-control-description {
62 color: $color;
63 }
64 }
65 }
66
67 // custom file
68 .custom-file-input {
69 .was-validated &:#{$state},
70 &.is-#{$state} {
71 ~ .custom-file-control {
72 border-color: $color;
73
74 &::before { border-color: inherit; }
75 }
76 &:focus {
77 box-shadow: 0 0 0 .2rem rgba($color,.25);
78 }
79 }
80 }
81 }