Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_custom-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 // scss-lint:disable PropertyCount, VendorPrefix
2
3 // Embedded icons from Open Iconic.
4 // Released under MIT and copyright 2014 Waybury.
5 // https://useiconic.com/open
6
7
8 // Checkboxes and radios
9 //
10 // Base class takes care of all the key behavioral aspects.
11
12 .custom-control {
13 position: relative;
14 display: inline-flex;
15 min-height: (1rem * $line-height-base);
16 padding-left: $custom-control-gutter;
17 margin-right: $custom-control-spacer-x;
18 }
19
20 .custom-control-input {
21 position: absolute;
22 z-index: -1; // Put the input behind the label so it doesn't overlay text
23 opacity: 0;
24
25 &:checked ~ .custom-control-indicator {
26 color: $custom-control-indicator-checked-color;
27 background-color: $custom-control-indicator-checked-bg;
28 @include box-shadow($custom-control-indicator-checked-box-shadow);
29 }
30
31 &:focus ~ .custom-control-indicator {
32 // the mixin is not used here to make sure there is feedback
33 box-shadow: $custom-control-indicator-focus-box-shadow;
34 }
35
36 &:active ~ .custom-control-indicator {
37 color: $custom-control-indicator-active-color;
38 background-color: $custom-control-indicator-active-bg;
39 @include box-shadow($custom-control-indicator-active-box-shadow);
40 }
41
42 &:disabled {
43 ~ .custom-control-indicator {
44 background-color: $custom-control-indicator-disabled-bg;
45 }
46
47 ~ .custom-control-description {
48 color: $custom-control-description-disabled-color;
49 }
50 }
51 }
52
53 // Custom indicator
54 //
55 // Generates a shadow element to create our makeshift checkbox/radio background.
56
57 .custom-control-indicator {
58 position: absolute;
59 top: (($line-height-base - $custom-control-indicator-size) / 2);
60 left: 0;
61 display: block;
62 width: $custom-control-indicator-size;
63 height: $custom-control-indicator-size;
64 pointer-events: none;
65 user-select: none;
66 background-color: $custom-control-indicator-bg;
67 background-repeat: no-repeat;
68 background-position: center center;
69 background-size: $custom-control-indicator-bg-size;
70 @include box-shadow($custom-control-indicator-box-shadow);
71 }
72
73 // Checkboxes
74 //
75 // Tweak just a few things for checkboxes.
76
77 .custom-checkbox {
78 .custom-control-indicator {
79 @include border-radius($custom-checkbox-indicator-border-radius);
80 }
81
82 .custom-control-input:checked ~ .custom-control-indicator {
83 background-image: $custom-checkbox-indicator-icon-checked;
84 }
85
86 .custom-control-input:indeterminate ~ .custom-control-indicator {
87 background-color: $custom-checkbox-indicator-indeterminate-bg;
88 background-image: $custom-checkbox-indicator-icon-indeterminate;
89 @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
90 }
91 }
92
93 // Radios
94 //
95 // Tweak just a few things for radios.
96
97 .custom-radio {
98 .custom-control-indicator {
99 border-radius: $custom-radio-indicator-border-radius;
100 }
101
102 .custom-control-input:checked ~ .custom-control-indicator {
103 background-image: $custom-radio-indicator-icon-checked;
104 }
105 }
106
107
108 // Layout options
109 //
110 // By default radios and checkboxes are `inline-block` with no additional spacing
111 // set. Use these optional classes to tweak the layout.
112
113 .custom-controls-stacked {
114 display: flex;
115 flex-direction: column;
116
117 .custom-control {
118 margin-bottom: $custom-control-spacer-y;
119
120 + .custom-control {
121 margin-left: 0;
122 }
123 }
124 }
125
126
127 // Select
128 //
129 // Replaces the browser default select with a custom one, mostly pulled from
130 // http://primercss.io.
131 //
132
133 .custom-select {
134 display: inline-block;
135 max-width: 100%;
136 height: $input-height;
137 padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
138 line-height: $custom-select-line-height;
139 color: $custom-select-color;
140 vertical-align: middle;
141 background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
142 background-size: $custom-select-bg-size;
143 border: $custom-select-border-width solid $custom-select-border-color;
144 @if $enable-rounded {
145 border-radius: $custom-select-border-radius;
146 } @else {
147 border-radius: 0;
148 }
149 appearance: none;
150
151 &:focus {
152 border-color: $custom-select-focus-border-color;
153 outline: none;
154 @include box-shadow($custom-select-focus-box-shadow);
155
156 &::-ms-value {
157 // For visual consistency with other platforms/browsers,
158 // supress the default white text on blue background highlight given to
159 // the selected option text when the (still closed) <select> receives focus
160 // in IE and (under certain conditions) Edge.
161 // See https://github.com/twbs/bootstrap/issues/19398.
162 color: $input-color;
163 background-color: $input-bg;
164 }
165 }
166
167 &:disabled {
168 color: $custom-select-disabled-color;
169 background-color: $custom-select-disabled-bg;
170 }
171
172 // Hides the default caret in IE11
173 &::-ms-expand {
174 opacity: 0;
175 }
176 }
177
178 .custom-select-sm {
179 height: $custom-select-height-sm;
180 padding-top: $custom-select-padding-y;
181 padding-bottom: $custom-select-padding-y;
182 font-size: $custom-select-font-size-sm;
183 }
184
185
186 // File
187 //
188 // Custom file input.
189
190 .custom-file {
191 position: relative;
192 display: inline-block;
193 max-width: 100%;
194 height: $custom-file-height;
195 margin-bottom: 0;
196 }
197
198 .custom-file-input {
199 min-width: $custom-file-width;
200 max-width: 100%;
201 height: $custom-file-height;
202 margin: 0;
203 opacity: 0;
204
205 &:focus ~ .custom-file-control {
206 @include box-shadow($custom-file-focus-box-shadow);
207 }
208 }
209
210 .custom-file-control {
211 position: absolute;
212 top: 0;
213 right: 0;
214 left: 0;
215 z-index: 5;
216 height: $custom-file-height;
217 padding: $custom-file-padding-x $custom-file-padding-y;
218 line-height: $custom-file-line-height;
219 color: $custom-file-color;
220 pointer-events: none;
221 user-select: none;
222 background-color: $custom-file-bg;
223 border: $custom-file-border-width solid $custom-file-border-color;
224 @include border-radius($custom-file-border-radius);
225 @include box-shadow($custom-file-box-shadow);
226
227 @each $lang, $text in map-get($custom-file-text, placeholder) {
228 &:lang(#{$lang}):empty::after {
229 content: $text;
230 }
231 }
232
233 &::before {
234 position: absolute;
235 top: -$custom-file-border-width;
236 right: -$custom-file-border-width;
237 bottom: -$custom-file-border-width;
238 z-index: 6;
239 display: block;
240 height: $custom-file-height;
241 padding: $custom-file-padding-x $custom-file-padding-y;
242 line-height: $custom-file-line-height;
243 color: $custom-file-button-color;
244 background-color: $custom-file-button-bg;
245 border: $custom-file-border-width solid $custom-file-border-color;
246 @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
247 }
248
249 @each $lang, $text in map-get($custom-file-text, button-label) {
250 &:lang(#{$lang})::before {
251 content: $text;
252 }
253 }
254 }