source: css/mini/_input_control.scss@ 5c9a606

Last change on this file since 5c9a606 was 5c9a606, checked in by w96k <w96k.ru@…>, on May 5, 2019 at 2:16:42 AM

Delete Hugo; Add basic haunt blog
  • Property mode set to 100644
File size: 13.3 KB
Line 
1/*
2 Definitions for forms and input elements.
3*/
4// Different elements are styled based on the same set of rules.
5$input-group-name: 'input-group' !default; // Class name for input groups.
6$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
7$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
8$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
9$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
10$button-class-name: 'button' !default; // Class name for elements styled as buttons.
11$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
12$button-group-name: 'button-group' !default; // Class name for button groups.
13$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
14$form-back-color: #f0f0f0 !default; // Background color for forms.
15$form-fore-color: #111 !default; // Text color for forms.
16$form-border-color: #ddd !default; // Border color for forms.
17$input-back-color: #f8f8f8 !default; // Background color for input elements.
18$input-fore-color: #111 !default; // Text color for input elements.
19$input-border-color: #ddd !default; // Border color for input elements.
20$input-focus-color: #0288d1 !default; // Border color for focused input elements.
21$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
22$button-back-color: #e2e2e2 !default; // Background color for buttons.
23$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
24$button-fore-color: #212121 !default; // Text color for buttons.
25$button-border-color: transparent !default; // Border color for buttons.
26$button-hover-border-color: transparent !default; // Border color for buttons (hover).
27$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
28// CSS variable name definitions [exercise caution if modifying these]
29$form-back-color-var: '--form-back-color' !default;
30$form-fore-color-var: '--form-fore-color' !default;
31$form-border-color-var: '--form-border-color' !default;
32$input-back-color-var: '--input-back-color' !default;
33$input-fore-color-var: '--input-fore-color' !default;
34$input-border-color-var: '--input-border-color' !default;
35$input-focus-color-var: '--input-focus-color' !default;
36$input-invalid-color-var: '--input-invalid-color' !default;
37$button-back-color-var: '--button-back-color' !default;
38$button-hover-back-color-var: '--button-hover-back-color' !default;
39$button-fore-color-var: '--button-fore-color' !default;
40$button-border-color-var: '--button-border-color' !default;
41$button-hover-border-color-var: '--button-hover-border-color' !default;
42$button-group-border-color-var: '--button-group-border-color' !default;
43// == Uncomment below code if this module is used on its own ==
44//
45// $base-font-size: 1rem !default; // Font sizing for all elements
46// $universal-margin: 0.5rem !default; // Universal margin for the most elements
47// $universal-padding: 0.5rem !default; // Universal padding for the most elements
48// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
49// $universal-box-shadow: none !default; // Universal box-shadow for most elements
50// $universal-margin-var: '--universal-margin' !default;
51// $universal-padding-var: '--universal-padding' !default;
52// $universal-border-radius-var: '--universal-border-radius' !default;
53// $universal-box-shadow-var: '--universal-box-shadow' !default;
54// :root {
55// #{$universal-margin-var}: $universal-margin;
56// #{$universal-padding-var}: $universal-padding;
57// #{$universal-border-radius-var}: $universal-border-radius;
58// @if $universal-box-shadow != none {
59// #{$universal-box-shadow-var}: $universal-box-shadow;
60// }
61// }
62//
63// ============================================================
64// Check the `_input_control_mixins.scss` file to find this module's mixins.
65@import 'input_control_mixins';
66/* Input_control module CSS variable definitions */
67:root {
68 #{$form-back-color-var}: $form-back-color;
69 #{$form-fore-color-var}: $form-fore-color;
70 #{$form-border-color-var}: $form-border-color;
71 #{$input-back-color-var}: $input-back-color;
72 #{$input-fore-color-var}: $input-fore-color;
73 #{$input-border-color-var}: $input-border-color;
74 #{$input-focus-color-var}: $input-focus-color;
75 #{$input-invalid-color-var}: $input-invalid-color;
76 #{$button-back-color-var}: $button-back-color;
77 #{$button-hover-back-color-var}: $button-hover-back-color;
78 #{$button-fore-color-var}: $button-fore-color;
79 #{$button-border-color-var}: $button-border-color;
80 #{$button-hover-border-color-var}: $button-hover-border-color;
81 #{$button-group-border-color-var}: $button-group-border-color;
82}
83// Base form styling
84form { // Text color is the default, this can be changed manually.
85 background: var(#{$form-back-color-var});
86 color: var(#{$form-fore-color-var});
87 border: $__1px solid var(#{$form-border-color-var});
88 border-radius: var(#{$universal-border-radius-var});
89 margin: var(#{$universal-margin-var});
90 padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
91 @if $universal-box-shadow != none {
92 box-shadow: var(#{$universal-box-shadow-var});
93 }
94}
95// Fieldset styling
96fieldset {
97 // Apply always to overwrite defaults for all of the below.
98 border: $__1px solid var(#{$form-border-color-var});
99 border-radius: var(#{$universal-border-radius-var});
100 margin: calc(var(#{$universal-margin-var}) / 4);
101 padding: var(#{$universal-padding-var});
102}
103// Legend styling.
104legend {
105 // Edge fixes.
106 box-sizing: border-box;
107 display: table;
108 max-width: 100%;
109 white-space: normal;
110 // Actual styling.
111 font-weight: $bold-font-weight;
112 padding: calc(var(#{$universal-padding-var}) / 2);
113}
114// Label syling. - Basically just padding, but there might be more in the future.
115label {
116 padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
117}
118// Input group styling.
119.#{$input-group-name} {
120 display: inline-block;
121 // Fluid input groups
122 @if $_include-fluid-input-group {
123 &.#{$input-group-fluid-name} {
124 display: flex;
125 align-items: center;
126 justify-content: center;
127 & > input {
128 max-width: 100%;
129 flex-grow: 1;
130 flex-basis: 0px;
131 }
132 // On mobile
133 @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
134 align-items: stretch;
135 flex-direction: column;
136 }
137 }
138 // Vertical input groups
139 &.#{$input-group-vertical-name} {
140 display: flex;
141 align-items: stretch;
142 flex-direction: column;
143 & > input {
144 max-width: 100%;
145 flex-grow: 1;
146 flex-basis: 0px;
147 }
148 }
149 }
150}
151// Correct the cursor style of increment and decrement buttons in Chrome.
152[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
153 height: auto;
154}
155// Correct style in Chrome and Safari.
156[type="search"] {
157 -webkit-appearance: textfield;
158 outline-offset: -2px;
159}
160// Correct style in Chrome and Safari.
161[type="search"]::-webkit-search-cancel-button,
162[type="search"]::-webkit-search-decoration {
163 -webkit-appearance: none;
164}
165// Common textual input styling. - Avoid using box-shadow with these.
166input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
167[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
168 box-sizing: border-box;
169 // Background, color and border should not be unassigned, as the browser defaults will apply.
170 background: var(#{$input-back-color-var});
171 color: var(#{$input-fore-color-var});
172 border: $__1px solid var(#{$input-border-color-var});
173 border-radius: var(#{$universal-border-radius-var});
174 margin: calc(var(#{$universal-margin-var}) / 2);
175 padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
176}
177// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
178input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
179 &:hover, &:focus {
180 border-color: var(#{$input-focus-color-var});
181 box-shadow: none;
182 }
183 &:invalid, &:focus:invalid{
184 border-color: var(#{$input-invalid-color-var});
185 box-shadow: none;
186 }
187 &[readonly]{
188 background: var(#{$secondary-back-color-var});
189 }
190}
191// Fix for select and option elements overflowing their parent container.
192select {
193 max-width: 100%;
194}
195option {
196 overflow: hidden;
197 text-overflow: ellipsis;
198}
199// Styling for checkboxes and radio buttons.
200[type="checkbox"], [type="radio"] {
201 -webkit-appearance: none;
202 -moz-appearance: none;
203 appearance: none;
204 position: relative;
205 height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
206 width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
207 vertical-align: text-bottom;
208 padding: 0; // Remove padding added from previous styles.
209 flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
210 flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
211 &:checked:before {
212 position: absolute;
213 }
214}
215[type="checkbox"] {
216 &:checked:before {
217 content: '\2713';
218 font-family: sans-serif;
219 font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
220 top: calc(0rem - var(#{$universal-padding-var}));
221 left: calc(var(#{$universal-padding-var}) / 4);
222 }
223}
224[type="radio"] {
225 border-radius: 100%;
226 &:checked:before {
227 border-radius: 100%;
228 content: '';
229 top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
230 left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
231 background: var(#{$input-fore-color-var});
232 width: 0.5rem;
233 height: 0.5rem;
234 }
235}
236// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
237:placeholder-shown {
238 color: var(#{$input-fore-color-var});
239}
240::-ms-placeholder {
241 color: var(#{$input-fore-color-var});
242 opacity: 0.54;
243}
244// Definitions for the button and button-like elements.
245// Different elements are styled based on the same set of rules.
246// Reset for Firefox focusing on button elements.
247button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
248 border-style: none;
249 padding: 0;
250}
251// Fixes for Android 4, iOS and Safari.
252button, html [type="button"], [type="reset"], [type="submit"] {
253 -webkit-appearance: button;
254}
255// Other fixes.
256button {
257 overflow: visible; // Show the overflow in IE.
258 text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
259}
260// Default styling
261button, [type="button"], [type="submit"], [type="reset"],
262a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
263a[role="button"], label[role="button"], [role="button"] {
264 display: inline-block;
265 background: var(#{$button-back-color-var});
266 color: var(#{$button-fore-color-var});
267 border: $__1px solid var(#{$button-border-color-var});
268 border-radius: var(#{$universal-border-radius-var});
269 padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
270 margin: var(#{$universal-margin-var});
271 text-decoration: none;
272 cursor: pointer;
273 transition: background 0.3s;
274 &:hover, &:focus {
275 background: var(#{$button-hover-back-color-var});
276 border-color: var(#{$button-hover-border-color-var});
277 }
278}
279// Disabled styling for input and button elements.
280input, textarea, select, button, .#{$button-class-name}, [role="button"] {
281 // .button[disabled] is actually higher specificity than a.button, so no need for more than that
282 &:disabled, &[disabled] {
283 cursor: not-allowed;
284 opacity: $input-disabled-opacity;
285 }
286}
287// Button group styling.
288.#{$button-group-name} {
289 display: flex;
290 border: $__1px solid var(#{$button-group-border-color-var});
291 border-radius: var(#{$universal-border-radius-var});
292 margin: var(#{$universal-margin-var});
293 @if $universal-box-shadow != none {
294 box-shadow: var(#{$universal-box-shadow-var});
295 }
296 & > button, [type="button"], & > [type="submit"], & > [type="reset"],
297 & > .#{$button-class-name}, & > [role="button"] {
298 margin: 0;
299 max-width: 100%;
300 flex: 1 1 auto;
301 text-align: center;
302 border: 0;
303 border-radius: 0;
304 box-shadow: none;
305 }
306 & > :not(:first-child) {
307 border-left: $__1px solid var(#{$button-group-border-color-var});
308 }
309 // Responsiveness for button groups
310 @media screen and (max-width: #{$button-group-mobile-breakpoint}) {
311 flex-direction: column;
312 & > :not(:first-child) {
313 border: 0; // Reapply to remove the left border from elements.
314 border-top: $__1px solid var(#{$button-group-border-color-var});
315 }
316 }
317}
Note: See TracBrowser for help on using the repository browser.