source: imaps-frontend/node_modules/bootstrap/scss/mixins/_forms.scss

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 4.5 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 $border-color: $color
26) {
27 .#{$state}-feedback {
28 display: none;
29 width: 100%;
30 margin-top: $form-feedback-margin-top;
31 @include font-size($form-feedback-font-size);
32 font-style: $form-feedback-font-style;
33 color: $color;
34 }
35
36 .#{$state}-tooltip {
37 position: absolute;
38 top: 100%;
39 z-index: 5;
40 display: none;
41 max-width: 100%; // Contain to parent when possible
42 padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
43 margin-top: .1rem;
44 @include font-size($form-feedback-tooltip-font-size);
45 line-height: $form-feedback-tooltip-line-height;
46 color: $tooltip-color;
47 background-color: $tooltip-bg-color;
48 @include border-radius($form-feedback-tooltip-border-radius);
49 }
50
51 @include form-validation-state-selector($state) {
52 ~ .#{$state}-feedback,
53 ~ .#{$state}-tooltip {
54 display: block;
55 }
56 }
57
58 .form-control {
59 @include form-validation-state-selector($state) {
60 border-color: $border-color;
61
62 @if $enable-validation-icons {
63 padding-right: $input-height-inner;
64 background-image: escape-svg($icon);
65 background-repeat: no-repeat;
66 background-position: right $input-height-inner-quarter center;
67 background-size: $input-height-inner-half $input-height-inner-half;
68 }
69
70 &:focus {
71 border-color: $border-color;
72 @if $enable-shadows {
73 @include box-shadow($input-box-shadow, $focus-box-shadow);
74 } @else {
75 // Avoid using mixin so we can pass custom focus shadow properly
76 box-shadow: $focus-box-shadow;
77 }
78 }
79 }
80 }
81
82 // stylelint-disable-next-line selector-no-qualifying-type
83 textarea.form-control {
84 @include form-validation-state-selector($state) {
85 @if $enable-validation-icons {
86 padding-right: $input-height-inner;
87 background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
88 }
89 }
90 }
91
92 .form-select {
93 @include form-validation-state-selector($state) {
94 border-color: $border-color;
95
96 @if $enable-validation-icons {
97 &:not([multiple]):not([size]),
98 &:not([multiple])[size="1"] {
99 --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
100 padding-right: $form-select-feedback-icon-padding-end;
101 background-position: $form-select-bg-position, $form-select-feedback-icon-position;
102 background-size: $form-select-bg-size, $form-select-feedback-icon-size;
103 }
104 }
105
106 &:focus {
107 border-color: $border-color;
108 @if $enable-shadows {
109 @include box-shadow($form-select-box-shadow, $focus-box-shadow);
110 } @else {
111 // Avoid using mixin so we can pass custom focus shadow properly
112 box-shadow: $focus-box-shadow;
113 }
114 }
115 }
116 }
117
118 .form-control-color {
119 @include form-validation-state-selector($state) {
120 @if $enable-validation-icons {
121 width: add($form-color-width, $input-height-inner);
122 }
123 }
124 }
125
126 .form-check-input {
127 @include form-validation-state-selector($state) {
128 border-color: $border-color;
129
130 &:checked {
131 background-color: $color;
132 }
133
134 &:focus {
135 box-shadow: $focus-box-shadow;
136 }
137
138 ~ .form-check-label {
139 color: $color;
140 }
141 }
142 }
143 .form-check-inline .form-check-input {
144 ~ .#{$state}-feedback {
145 margin-left: .5em;
146 }
147 }
148
149 .input-group {
150 > .form-control:not(:focus),
151 > .form-select:not(:focus),
152 > .form-floating:not(:focus-within) {
153 @include form-validation-state-selector($state) {
154 @if $state == "valid" {
155 z-index: 3;
156 } @else if $state == "invalid" {
157 z-index: 4;
158 }
159 }
160 }
161 }
162}
163// scss-docs-end form-validation-mixins
Note: See TracBrowser for help on using the repository browser.