_forms.scss — VK Blocks trunk

vk-blocks / lib / bootstrap / scss / _forms.scss

vk-blocks / lib / bootstrap / scss Last commit date

_forms.scss

348 lines

1	// stylelint-disable selector-no-qualifying-type
2
3	//
4	// Textual form controls
5	//
6
7	.form-control {
8	display: block;
9	width: 100%;
10	height: $input-height;
11	padding: $input-padding-y $input-padding-x;
12	font-family: $input-font-family;
13	@include font-size($input-font-size);
14	font-weight: $input-font-weight;
15	line-height: $input-line-height;
16	color: $input-color;
17	background-color: $input-bg;
18	background-clip: padding-box;
19	border: $input-border-width solid $input-border-color;
20
21	// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
22	@include border-radius($input-border-radius, 0);
23
24	@include box-shadow($input-box-shadow);
25	@include transition($input-transition);
26
27	// Unstyle the caret on `<select>`s in IE10+.
28	&::-ms-expand {
29	background-color: transparent;
30	border: 0;
31	}
32
33	// Remove select outline from select box in FF
34	&:-moz-focusring {
35	color: transparent;
36	text-shadow: 0 0 0 $input-color;
37	}
38
39	// Customize the `:focus` state to imitate native WebKit styles.
40	@include form-control-focus($ignore-warning: true);
41
42	// Placeholder
43	&::placeholder {
44	color: $input-placeholder-color;
45	// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
46	opacity: 1;
47	}
48
49	// Disabled and read-only inputs
50	//
51	// HTML5 says that controls under a fieldset > legend:first-child won't be
52	// disabled if the fieldset is disabled. Due to implementation difficulty, we
53	// don't honor that edge case; we style them as disabled anyway.
54	&:disabled,
55	&[readonly]] {
56	background-color: $input-disabled-bg;
57	// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
58	opacity: 1;
59	}
60	}
61
62	input[type="date"]="date""],
63	input[type="time"]="time""],
64	input[type="datetime-local"]="datetime-local""],
65	input[type="month"]="month""] {
66	&.form-control {
67	appearance: none; // Fix appearance for date inputs in Safari
68	}
69	}
70
71	select.form-control {
72	&:focus::-ms-value {
73	// Suppress the nested default white text on blue background highlight given to
74	// the selected option text when the (still closed) <select> receives focus
75	// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
76	// match the appearance of the native widget.
77	// See https://github.com/twbs/bootstrap/issues/19398.
78	color: $input-color;
79	background-color: $input-bg;
80	}
81	}
82
83	// Make file inputs better match text inputs by forcing them to new lines.
84	.form-control-file,
85	.form-control-range {
86	display: block;
87	width: 100%;
88	}
89
90
91	//
92	// Labels
93	//
94
95	// For use with horizontal and inline forms, when you need the label (or legend)
96	// text to align with the form controls.
97	.col-form-label {
98	padding-top: add($input-padding-y, $input-border-width);
99	padding-bottom: add($input-padding-y, $input-border-width);
100	margin-bottom: 0; // Override the `<label>/<legend>` default
101	@include font-size(inherit); // Override the `<legend>` default
102	line-height: $input-line-height;
103	}
104
105	.col-form-label-lg {
106	padding-top: add($input-padding-y-lg, $input-border-width);
107	padding-bottom: add($input-padding-y-lg, $input-border-width);
108	@include font-size($input-font-size-lg);
109	line-height: $input-line-height-lg;
110	}
111
112	.col-form-label-sm {
113	padding-top: add($input-padding-y-sm, $input-border-width);
114	padding-bottom: add($input-padding-y-sm, $input-border-width);
115	@include font-size($input-font-size-sm);
116	line-height: $input-line-height-sm;
117	}
118
119
120	// Readonly controls as plain text
121	//
122	// Apply class to a readonly input to make it appear like regular plain
123	// text (without any border, background color, focus indicator)
124
125	.form-control-plaintext {
126	display: block;
127	width: 100%;
128	padding: $input-padding-y 0;
129	margin-bottom: 0; // match inputs if this class comes on inputs with default margins
130	@include font-size($input-font-size);
131	line-height: $input-line-height;
132	color: $input-plaintext-color;
133	background-color: transparent;
134	border: solid transparent;
135	border-width: $input-border-width 0;
136
137	&.form-control-sm,
138	&.form-control-lg {
139	padding-right: 0;
140	padding-left: 0;
141	}
142	}
143
144
145	// Form control sizing
146	//
147	// Build on `.form-control` with modifier classes to decrease or increase the
148	// height and font-size of form controls.
149	//
150	// Repeated in `_input_group.scss` to avoid Sass extend issues.
151
152	.form-control-sm {
153	height: $input-height-sm;
154	padding: $input-padding-y-sm $input-padding-x-sm;
155	@include font-size($input-font-size-sm);
156	line-height: $input-line-height-sm;
157	@include border-radius($input-border-radius-sm);
158	}
159
160	.form-control-lg {
161	height: $input-height-lg;
162	padding: $input-padding-y-lg $input-padding-x-lg;
163	@include font-size($input-font-size-lg);
164	line-height: $input-line-height-lg;
165	@include border-radius($input-border-radius-lg);
166	}
167
168	// stylelint-disable-next-line no-duplicate-selectors
169	select.form-control {
170	&[size]],
171	&[multiple]] {
172	height: auto;
173	}
174	}
175
176	textarea.form-control {
177	height: auto;
178	}
179
180	// Form groups
181	//
182	// Designed to help with the organization and spacing of vertical forms. For
183	// horizontal forms, use the predefined grid classes.
184
185	.form-group {
186	margin-bottom: $form-group-margin-bottom;
187	}
188
189	.form-text {
190	display: block;
191	margin-top: $form-text-margin-top;
192	}
193
194
195	// Form grid
196	//
197	// Special replacement for our grid system's `.row` for tighter form layouts.
198
199	.form-row {
200	display: flex;
201	flex-wrap: wrap;
202	margin-right: -$form-grid-gutter-width / 2;
203	margin-left: -$form-grid-gutter-width / 2;
204
205	> .col,
206	> [class="col-"]="col-""] {
207	padding-right: $form-grid-gutter-width / 2;
208	padding-left: $form-grid-gutter-width / 2;
209	}
210	}
211
212
213	// Checkboxes and radios
214	//
215	// Indent the labels to position radios/checkboxes as hanging controls.
216
217	.form-check {
218	position: relative;
219	display: block;
220	padding-left: $form-check-input-gutter;
221	}
222
223	.form-check-input {
224	position: absolute;
225	margin-top: $form-check-input-margin-y;
226	margin-left: -$form-check-input-gutter;
227
228	// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
229	&[disabled]] ~ .form-check-label,
230	&:disabled ~ .form-check-label {
231	color: $text-muted;
232	}
233	}
234
235	.form-check-label {
236	margin-bottom: 0; // Override default `<label>` bottom margin
237	}
238
239	.form-check-inline {
240	display: inline-flex;
241	align-items: center;
242	padding-left: 0; // Override base .form-check
243	margin-right: $form-check-inline-margin-x;
244
245	// Undo .form-check-input defaults and add some `margin-right`.
246	.form-check-input {
247	position: static;
248	margin-top: 0;
249	margin-right: $form-check-inline-input-margin-x;
250	margin-left: 0;
251	}
252	}
253
254
255	// Form validation
256	//
257	// Provide feedback to users when form field values are valid or invalid. Works
258	// primarily for client-side validation via scoped `:invalid` and `:valid`
259	// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
260	// server side validation.
261
262	@each $state, $data in $form-validation-states {
263	@include form-validation-state($state, map-get($data, color), map-get($data, icon));
264	}
265
266	// Inline forms
267	//
268	// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
269	// forms begin stacked on extra small (mobile) devices and then go inline when
270	// viewports reach <768px.
271	//
272	// Requires wrapping inputs and labels with `.form-group` for proper display of
273	// default HTML form controls and our custom form controls (e.g., input groups).
274
275	.form-inline {
276	display: flex;
277	flex-flow: row wrap;
278	align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
279
280	// Because we use flex, the initial sizing of checkboxes is collapsed and
281	// doesn't occupy the full-width (which is what we want for xs grid tier),
282	// so we force that here.
283	.form-check {
284	width: 100%;
285	}
286
287	// Kick in the inline
288	@include media-breakpoint-up(sm) {
289	label {
290	display: flex;
291	align-items: center;
292	justify-content: center;
293	margin-bottom: 0;
294	}
295
296	// Inline-block all the things for "inline"
297	.form-group {
298	display: flex;
299	flex: 0 0 auto;
300	flex-flow: row wrap;
301	align-items: center;
302	margin-bottom: 0;
303	}
304
305	// Allow folks to not use `.form-group`
306	.form-control {
307	display: inline-block;
308	width: auto; // Prevent labels from stacking above inputs in `.form-group`
309	vertical-align: middle;
310	}
311
312	// Make static controls behave like regular ones
313	.form-control-plaintext {
314	display: inline-block;
315	}
316
317	.input-group,
318	.custom-select {
319	width: auto;
320	}
321
322	// Remove default margin on radios/checkboxes that were used for stacking, and
323	// then undo the floating of radios and checkboxes to match.
324	.form-check {
325	display: flex;
326	align-items: center;
327	justify-content: center;
328	width: auto;
329	padding-left: 0;
330	}
331	.form-check-input {
332	position: relative;
333	flex-shrink: 0;
334	margin-top: 0;
335	margin-right: $form-check-input-margin-x;
336	margin-left: 0;
337	}
338
339	.custom-control {
340	align-items: center;
341	justify-content: center;
342	}
343	.custom-control-label {
344	margin-bottom: 0;
345	}
346	}
347	}
348