_forms.scss — VK Blocks 0.16.2

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

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

_forms.scss

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