source: Application/ocrent/wwwroot/lib/bootstrap/scss/mixins/_forms.scss

Last change on this file was f5f7c24, checked in by 192011 <mk.snicker@…>, 17 months ago

Initial commit

  • Property mode set to 100644
File size: 4.0 KB
Line 
1// This mixin uses an `if()` technique to be compatible with Dart Sass
2// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
4// scss-docs-start form-validation-mixins
5@mixin form-validation-state-selector($state) {
6 @if ($state == "valid" or $state == "invalid") {
7 .was-validated #{if(&, "&", "")}:#{$state},
8 #{if(&, "&", "")}.is-#{$state} {
9 @content;
10 }
11 } @else {
12 #{if(&, "&", "")}.is-#{$state} {
13 @content;
14 }
15 }
16}
17
18@mixin form-validation-state(
19 $state,
20 $color,
21 $icon,
22 $tooltip-color: color-contrast($color),
23 $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24 $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25) {
26 .#{$state}-feedback {
27 display: none;
28 width: 100%;
29 margin-top: $form-feedback-margin-top;
30 @include font-size($form-feedback-font-size);
31 font-style: $form-feedback-font-style;
32 color: $color;
33 }
34
35 .#{$state}-tooltip {
36 position: absolute;
37 top: 100%;
38 z-index: 5;
39 display: none;
40 max-width: 100%; // Contain to parent when possible
41 padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42 margin-top: .1rem;
43 @include font-size($form-feedback-tooltip-font-size);
44 line-height: $form-feedback-tooltip-line-height;
45 color: $tooltip-color;
46 background-color: $tooltip-bg-color;
47 @include border-radius($form-feedback-tooltip-border-radius);
48 }
49
50 @include form-validation-state-selector($state) {
51 ~ .#{$state}-feedback,
52 ~ .#{$state}-tooltip {
53 display: block;
54 }
55 }
56
57 .form-control {
58 @include form-validation-state-selector($state) {
59 border-color: $color;
60
61 @if $enable-validation-icons {
62 padding-right: $input-height-inner;
63 background-image: escape-svg($icon);
64 background-repeat: no-repeat;
65 background-position: right $input-height-inner-quarter center;
66 background-size: $input-height-inner-half $input-height-inner-half;
67 }
68
69 &:focus {
70 border-color: $color;
71 box-shadow: $focus-box-shadow;
72 }
73 }
74 }
75
76 // stylelint-disable-next-line selector-no-qualifying-type
77 textarea.form-control {
78 @include form-validation-state-selector($state) {
79 @if $enable-validation-icons {
80 padding-right: $input-height-inner;
81 background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82 }
83 }
84 }
85
86 .form-select {
87 @include form-validation-state-selector($state) {
88 border-color: $color;
89
90 @if $enable-validation-icons {
91 &:not([multiple]):not([size]),
92 &:not([multiple])[size="1"] {
93 padding-right: $form-select-feedback-icon-padding-end;
94 background-image: escape-svg($form-select-indicator), escape-svg($icon);
95 background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96 background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97 }
98 }
99
100 &:focus {
101 border-color: $color;
102 box-shadow: $focus-box-shadow;
103 }
104 }
105 }
106
107 .form-control-color {
108 @include form-validation-state-selector($state) {
109 @if $enable-validation-icons {
110 width: add($form-color-width, $input-height-inner);
111 }
112 }
113 }
114
115 .form-check-input {
116 @include form-validation-state-selector($state) {
117 border-color: $color;
118
119 &:checked {
120 background-color: $color;
121 }
122
123 &:focus {
124 box-shadow: $focus-box-shadow;
125 }
126
127 ~ .form-check-label {
128 color: $color;
129 }
130 }
131 }
132 .form-check-inline .form-check-input {
133 ~ .#{$state}-feedback {
134 margin-left: .5em;
135 }
136 }
137
138 .input-group {
139 > .form-control:not(:focus),
140 > .form-select:not(:focus),
141 > .form-floating:not(:focus-within) {
142 @include form-validation-state-selector($state) {
143 @if $state == "valid" {
144 z-index: 3;
145 } @else if $state == "invalid" {
146 z-index: 4;
147 }
148 }
149 }
150 }
151}
152// scss-docs-end form-validation-mixins
Note: See TracBrowser for help on using the repository browser.