ratchet_design 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ratchet/base/form.js +9 -3
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +9 -18
- data/app/assets/javascripts/ratchet/core.js +9 -3
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +6 -6
- data/app/assets/javascripts/ratchet/enhancement/mapbox.js +48 -0
- data/app/assets/stylesheets/ratchet/_core.scss +4 -2
- data/app/assets/stylesheets/ratchet/base/_button.scss +15 -14
- data/app/assets/stylesheets/ratchet/base/_document.scss +30 -66
- data/app/assets/stylesheets/ratchet/base/_form.scss +162 -529
- data/app/assets/stylesheets/ratchet/base/_label-placeholder.scss +97 -0
- data/app/assets/stylesheets/ratchet/base/_media.scss +1 -1
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +65 -11
- data/app/assets/stylesheets/ratchet/base/_section.scss +284 -0
- data/app/assets/stylesheets/ratchet/base/_table.scss +4 -4
- data/app/assets/stylesheets/ratchet/base/_text.scss +50 -45
- data/app/assets/stylesheets/ratchet/base/_validation.scss +83 -0
- data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +39 -39
- data/app/assets/stylesheets/ratchet/utility/_color.scss +135 -0
- data/app/assets/stylesheets/ratchet/utility/_global.scss +21 -40
- data/app/assets/stylesheets/ratchet/utility/_loader.scss +1 -1
- data/app/helpers/ratchet/application_helper.rb +16 -10
- data/app/helpers/ratchet/form_helper.rb +302 -18
- data/app/views/layouts/ratchet/default.html.slim +2 -2
- data/app/views/shared/ratchet/_defs.html.slim +67 -0
- data/app/views/shared/ratchet/_footer.html.slim +6 -0
- data/app/views/shared/ratchet/_header.html.slim +5 -0
- data/app/views/shared/ratchet/_icons.html.slim +53 -6
- data/lib/ratchet_design/version.rb +1 -1
- data/public/{core-0.1.12.js → core-0.1.13.js} +66 -66
- data/public/core-0.1.13.js.gz +0 -0
- data/public/core-0.1.13.map.json +1 -0
- data/public/{fonts-woff-0.1.12.css → fonts-woff-0.1.13.css} +0 -0
- data/public/{fonts-woff-0.1.12.css.gz → fonts-woff-0.1.13.css.gz} +0 -0
- data/public/{fonts-woff2-0.1.12.css → fonts-woff2-0.1.13.css} +0 -0
- data/public/{fonts-woff2-0.1.12.css.gz → fonts-woff2-0.1.13.css.gz} +0 -0
- metadata +36 -32
- data/app/assets/javascripts/ratchet/utility/loader.js +0 -84
- data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +0 -22
- data/public/core-0.1.12.js.gz +0 -0
- data/public/core-0.1.12.map.json +0 -1
@@ -1,179 +1,69 @@
|
|
1
|
-
|
2
|
-
* e. Form module
|
3
|
-
* -------------------------------------------------------------------------- */
|
4
|
-
|
5
|
-
/* ===================================== *
|
6
|
-
* i. Utility
|
7
|
-
* ------------------------------------- */
|
8
|
-
|
9
|
-
// Universal text-based input variable
|
10
|
-
$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]';
|
11
|
-
|
12
|
-
// Nested labels
|
13
|
-
@mixin nested-label($size: normal, $spacing: on) {
|
14
|
-
|
15
|
-
// Scoped variables
|
16
|
-
$font-size: if($size == large, 17px, 16px);
|
17
|
-
$padding-y: if($size == large, 12px, 9px);
|
18
|
-
$padding-x: if($size == large, 14px, 12px);
|
19
|
-
$margin: if($size == large, 19px, 25px);
|
20
|
-
$distance: if($size == large, -24px, -22px);
|
21
|
-
$scale: if($size == large, .824, .875);
|
22
|
-
$height: if($size == large, 56px, 50px);
|
23
|
-
|
24
|
-
@if $spacing != on {
|
25
|
-
$margin: 0;
|
26
|
-
}
|
27
|
-
|
28
|
-
// Active state
|
29
|
-
%active {
|
30
|
-
z-index: 2;
|
31
|
-
transform: translate3d(0, $distance, 0) scale($scale);
|
32
|
-
}
|
33
|
-
|
34
|
-
// Hide input placeholder text
|
35
|
-
::placeholder {
|
36
|
-
opacity: 0;
|
37
|
-
color: transparent;
|
38
|
-
}
|
1
|
+
$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
|
39
2
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
background: $white;
|
46
|
-
font-size: $font-size;
|
47
|
-
margin-bottom: $margin;
|
48
|
-
}
|
3
|
+
$formBlue: $cerulean;//#4392f9;
|
4
|
+
//$steel: darken($page-border, 25); // Blue-Gray
|
5
|
+
$alabaster: hsl(0, 0%, 79%); // Light Blue
|
6
|
+
$isabella: #dde8eb; // Off-Cream
|
7
|
+
$duration: .2s;
|
49
8
|
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
&:active + span {
|
56
|
-
color: darken($aluminum, 10);
|
57
|
-
}
|
58
|
-
}
|
9
|
+
@mixin input-active {
|
10
|
+
&:focus,
|
11
|
+
&:hover:not([disabled]),
|
12
|
+
&:active {
|
13
|
+
@content;
|
59
14
|
}
|
15
|
+
}
|
60
16
|
|
61
|
-
|
62
|
-
|
63
|
-
textarea,
|
64
|
-
#{$text-inputs} {
|
65
|
-
|
66
|
-
// Non-required active color
|
67
|
-
&:not(:required):focus + span,
|
68
|
-
&:not(:required):active + span {
|
69
|
-
color: darken($aluminum, 10);
|
70
|
-
}
|
71
|
-
|
72
|
-
// Required active color
|
73
|
-
&:required + span {
|
74
|
-
color: $apple;
|
75
|
-
}
|
76
|
-
}
|
77
|
-
}
|
17
|
+
$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
18
|
+
$empty-shadow: 0 0 0 transparent;
|
78
19
|
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
#{$text-inputs} {
|
83
|
-
|
84
|
-
// Non-required active color
|
85
|
-
&:not(:required):focus + span,
|
86
|
-
&:not(:required):active + span {
|
87
|
-
color: darken($aluminum, 10);
|
88
|
-
}
|
89
|
-
|
90
|
-
// Required active color
|
91
|
-
&:required + span {
|
92
|
-
color: $punch;
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
20
|
+
@function input-shadow($color: $alabaster, $size: 1px) {
|
21
|
+
@return 0 0 0 $size $color inset, $empty-shadow;
|
22
|
+
}
|
96
23
|
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
font-size: $font-size;
|
101
|
-
line-height: inherit;
|
102
|
-
height: $height;
|
103
|
-
padding: $padding-y $padding-x;
|
104
|
-
}
|
24
|
+
@function input-focus-shadow($color: $steel) {
|
25
|
+
@return 0 0 0 1px $color inset, $input-weight-shadow
|
26
|
+
}
|
105
27
|
|
106
|
-
|
107
|
-
|
108
|
-
#{$text-inputs} {
|
109
|
-
z-index: 1;
|
110
|
-
margin: 0;
|
111
|
-
font-size: $font-size;
|
112
|
-
line-height: inherit;
|
113
|
-
background: transparent;
|
114
|
-
padding: $padding-y $padding-x;
|
115
|
-
|
116
|
-
// Faux-placeholder labels
|
117
|
-
& + span {
|
118
|
-
background: $white;
|
119
|
-
box-shadow:
|
120
|
-
-6px 0 $white,
|
121
|
-
6px 0 $white;
|
122
|
-
font-size: inherit;
|
123
|
-
height: vr(2); // 30px
|
124
|
-
position: absolute;
|
125
|
-
top: $padding-y;
|
126
|
-
left: $padding-x;
|
127
|
-
padding: 1px 0 0 1px;
|
128
|
-
transform-origin: left top 0;
|
129
|
-
will-change: transform;
|
130
|
-
-webkit-filter: blur(0);
|
131
|
-
backface-visibility: hidden;
|
132
|
-
-webkit-font-smoothing: subpixel-antialiased;
|
133
|
-
z-index: 0;
|
134
|
-
color: $alto;
|
135
|
-
transform: translate3d(0, 0, 0) scale(1);
|
136
|
-
transition:
|
137
|
-
z-index .2s,
|
138
|
-
color .2s,
|
139
|
-
transform .2s;
|
140
|
-
}
|
28
|
+
$focus-shadow: input-focus-shadow();
|
29
|
+
$input-shadow: input-shadow();
|
141
30
|
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
&:not([value=""]) + span, {
|
146
|
-
@extend %active;
|
147
|
-
}
|
148
|
-
}
|
31
|
+
*, *:before, *:after {
|
32
|
+
transition-duration: .25s;
|
33
|
+
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
149
34
|
}
|
150
35
|
|
151
|
-
|
152
|
-
|
153
|
-
@include nested-label($size, off);
|
154
|
-
@include grid;
|
155
|
-
|
156
|
-
// Remove top spacing from submit button
|
157
|
-
> [type=submit] {
|
158
|
-
margin-top: 0;
|
159
|
-
}
|
36
|
+
form {
|
37
|
+
width: 100%;
|
160
38
|
|
161
|
-
|
162
|
-
|
163
|
-
margin-right: $gutter;
|
39
|
+
&.max {
|
40
|
+
max-width: 100%;
|
164
41
|
}
|
165
42
|
|
166
43
|
}
|
167
44
|
|
168
|
-
|
169
|
-
|
45
|
+
.switch-label, .tick-label {
|
46
|
+
pointer-events: none;
|
47
|
+
* { pointer-events: all; }
|
170
48
|
}
|
171
49
|
|
172
|
-
|
173
|
-
|
174
|
-
|
50
|
+
label {
|
51
|
+
// Bare text-based inputs
|
52
|
+
+ input,
|
53
|
+
+ select,
|
54
|
+
+ textarea {
|
55
|
+
margin-top: -5px;
|
56
|
+
}
|
57
|
+
|
58
|
+
[type=checkbox], [type=radio] {
|
59
|
+
position: absolute;
|
60
|
+
border: none;
|
61
|
+
cursor: pointer;
|
62
|
+
opacity: 0;
|
63
|
+
z-index: -1;
|
64
|
+
}
|
65
|
+
}
|
175
66
|
|
176
|
-
// Remove default fieldset styles
|
177
67
|
fieldset {
|
178
68
|
border: 0;
|
179
69
|
padding: 0;
|
@@ -183,103 +73,78 @@ fieldset {
|
|
183
73
|
|
184
74
|
// Fieldset legends
|
185
75
|
legend {
|
186
|
-
font-size:
|
187
|
-
|
188
|
-
letter-spacing: .02em;
|
189
|
-
font-weight: 700;
|
76
|
+
font-size: 24px;
|
77
|
+
font-weight: 300;
|
190
78
|
padding-top: 11px;
|
191
|
-
box-shadow: 0 1px $iron;
|
192
79
|
width: 100%;
|
193
80
|
margin-bottom: 19px;
|
194
|
-
|
195
|
-
|
196
|
-
// Placeholder text color
|
197
|
-
::placeholder {
|
198
|
-
opacity: 1;
|
199
|
-
color: $alto;
|
200
|
-
}
|
201
|
-
|
202
|
-
// Remove FF’s default input outline
|
203
|
-
input::-moz-focus-inner {
|
204
|
-
border: 0;
|
205
|
-
}
|
206
|
-
|
207
|
-
// Labels
|
208
|
-
label {
|
209
|
-
display: flex;
|
210
|
-
flex-direction: column;
|
211
|
-
position: relative;
|
212
|
-
font-size: 15px;
|
213
|
-
padding-top: 10px;
|
214
|
-
margin-bottom: 10px;
|
215
|
-
|
216
|
-
// Checkbox- & radio-specific labels
|
217
|
-
&.tick-label {
|
218
|
-
flex-direction: row;
|
219
|
-
align-items: center;
|
220
|
-
margin-bottom: 5px;
|
221
|
-
}
|
222
|
-
|
223
|
-
// Bare text-based inputs
|
224
|
-
+ input,
|
225
|
-
+ select,
|
226
|
-
+ textarea {
|
227
|
-
margin-top: -5px;
|
228
|
-
}
|
229
|
-
|
230
|
-
// Nested text-based inputs
|
231
|
-
> input,
|
232
|
-
> select,
|
233
|
-
> textarea {
|
234
|
-
margin-top: 5px;
|
81
|
+
+ * {
|
82
|
+
clear: both;
|
235
83
|
}
|
84
|
+
}
|
236
85
|
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
86
|
+
fieldset h2, legend.header {
|
87
|
+
text-transform: none;
|
88
|
+
letter-spacing: normal;
|
89
|
+
justify-content: space-between;
|
90
|
+
box-shadow: none;
|
91
|
+
font-weight: 300;
|
92
|
+
width: 100%;
|
93
|
+
float: left;
|
94
|
+
font-size: 24px;
|
95
|
+
padding: vr(2) 0 0; // 30px
|
96
|
+
margin: 0 0 vr(3); // 30px
|
97
|
+
text-align: center;
|
98
|
+
+ * { clear: both; }
|
242
99
|
}
|
243
100
|
|
244
|
-
/* ===================================== *
|
245
|
-
* iii. Text-based
|
246
|
-
* ------------------------------------- */
|
247
101
|
|
248
|
-
|
249
|
-
input,
|
250
|
-
select,
|
251
|
-
textarea {
|
102
|
+
@mixin input-base {
|
252
103
|
width: 100%;
|
253
104
|
font-size: 16px;
|
105
|
+
border: none;
|
254
106
|
line-height: vr(2); // 30px
|
255
107
|
padding: 9px 12px;
|
256
|
-
border: 1px solid $alto;
|
257
108
|
border-radius: $radius;
|
258
|
-
transition:
|
109
|
+
transition-property: box-shadow, color;
|
259
110
|
appearance: none;
|
111
|
+
box-shadow: $input-shadow;
|
260
112
|
|
261
113
|
// Keep Chrome’s autofilled fields white
|
262
114
|
&:-webkit-autofill {
|
263
115
|
-webkit-box-shadow: 0 0 0 1000px $white inset;
|
264
116
|
}
|
265
117
|
|
266
|
-
&:
|
267
|
-
|
268
|
-
|
269
|
-
outline: 0;
|
270
|
-
border-color: $aluminum;
|
118
|
+
&:disabled:not([type="submit"]) {
|
119
|
+
color: $isabella;
|
120
|
+
cursor: default;
|
271
121
|
}
|
272
122
|
}
|
273
123
|
|
274
|
-
|
275
|
-
:
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
124
|
+
input, select, textarea {
|
125
|
+
outline: 0;
|
126
|
+
outline-style: none;
|
127
|
+
border: none;
|
128
|
+
|
129
|
+
&::-moz-focus-inner {
|
130
|
+
border: none;
|
131
|
+
padding: 0;
|
132
|
+
}
|
133
|
+
|
134
|
+
}
|
135
|
+
|
136
|
+
#{$text-inputs}, select, textarea {
|
137
|
+
@include input-base;
|
138
|
+
|
139
|
+
@include input-active {
|
140
|
+
box-shadow: $focus-shadow;
|
280
141
|
}
|
281
142
|
}
|
282
143
|
|
144
|
+
textarea {
|
145
|
+
line-height: vr(1.5);
|
146
|
+
}
|
147
|
+
|
283
148
|
// Override default search styling
|
284
149
|
input[type=search] {
|
285
150
|
&,
|
@@ -289,342 +154,110 @@ input[type=search] {
|
|
289
154
|
}
|
290
155
|
}
|
291
156
|
|
157
|
+
select {
|
158
|
+
min-height: 50px;
|
159
|
+
cursor: pointer;
|
160
|
+
background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14'%3E%3Cpolygon fill='%237A7B7C' points='3.5,0 0,6 7,6'/%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 7px 14px no-repeat;
|
161
|
+
}
|
162
|
+
|
292
163
|
// Confine resizing of textareas
|
293
164
|
textarea {
|
294
165
|
display: block;
|
295
166
|
resize: vertical;
|
296
|
-
|
167
|
+
margin-top: 10px;
|
297
168
|
min-height: vr(8) + 5px; // 125px;
|
298
169
|
}
|
299
170
|
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
height: 50px;
|
307
|
-
cursor: pointer;
|
308
|
-
background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14'%3E%3Cpolygon fill='%237A7B7C' points='3.5,0 0,6 7,6'/%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 7px 14px no-repeat;
|
309
|
-
}
|
310
|
-
|
311
|
-
/* ===================================== *
|
312
|
-
* v. Radio button & checkbox
|
313
|
-
* ------------------------------------- */
|
314
|
-
|
315
|
-
// Radios & checkboxes
|
316
|
-
input[type=radio],
|
317
|
-
input[type=checkbox] {
|
318
|
-
position: absolute;
|
319
|
-
opacity: 0;
|
320
|
-
|
321
|
-
&:focus + .tick-label,
|
322
|
-
&:active + .tick-label {
|
323
|
-
box-shadow: 0 0 0 1px $aluminum inset;
|
324
|
-
}
|
325
|
-
|
326
|
-
+ .tick-label {
|
327
|
-
width: 20px;
|
328
|
-
height: 20px;
|
329
|
-
margin: 0 8px 0 0;
|
330
|
-
cursor: pointer;
|
331
|
-
background: $white;
|
332
|
-
transition: .2s box-shadow;
|
333
|
-
box-shadow: 0 0 0 1px $alto inset;
|
334
|
-
|
335
|
-
&:hover,
|
336
|
-
&:focus,
|
337
|
-
&:active {
|
338
|
-
outline: 0;
|
339
|
-
box-shadow: 0 0 0 1px $aluminum inset;
|
340
|
-
}
|
171
|
+
// Bare inputs
|
172
|
+
:not(label) > {
|
173
|
+
input,
|
174
|
+
select,
|
175
|
+
textarea {
|
176
|
+
margin: 15px 0;
|
341
177
|
}
|
342
178
|
}
|
343
179
|
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
+ .tick-label {
|
348
|
-
border-radius: 50%;
|
349
|
-
}
|
350
|
-
|
351
|
-
&:checked + .tick-label {
|
352
|
-
box-shadow: 0 0 0 8px $cerulean inset;
|
353
|
-
}
|
180
|
+
::placeholder {
|
181
|
+
opacity: 1;
|
182
|
+
color: $alabaster;
|
354
183
|
}
|
355
184
|
|
356
|
-
|
357
|
-
input[type=
|
358
|
-
|
359
|
-
|
360
|
-
border-radius: $radius;
|
361
|
-
position: relative;
|
362
|
-
|
363
|
-
&:before {
|
364
|
-
content: '';
|
365
|
-
position: absolute;
|
366
|
-
left: 0;
|
367
|
-
top: 0;
|
368
|
-
width: 100%;
|
369
|
-
height: 60%;
|
370
|
-
margin: 15% 0 0 0;
|
371
|
-
border: solid $white;
|
372
|
-
border-width: 0 0 3px 3px;
|
373
|
-
transition: transform .2s;
|
374
|
-
transform: scale(0) rotate(-45deg);
|
375
|
-
}
|
376
|
-
}
|
377
|
-
|
378
|
-
&:checked + .tick-label {
|
379
|
-
box-shadow: 0 0 0 10px $cerulean inset;
|
380
|
-
}
|
381
|
-
|
382
|
-
&:checked + .tick-label:before {
|
383
|
-
transform: scale(.5) rotate(-45deg);
|
384
|
-
}
|
185
|
+
input[type=number]::-webkit-outer-spin-button,
|
186
|
+
input[type=number]::-webkit-inner-spin-button {
|
187
|
+
-webkit-appearance: none;
|
188
|
+
margin: 0;
|
385
189
|
}
|
386
190
|
|
387
|
-
|
388
|
-
* vi. Range slider
|
389
|
-
* ------------------------------------- */
|
390
|
-
|
391
|
-
// Range sliders
|
392
|
-
input[type=range] {
|
393
|
-
background-color: $alto;
|
394
|
-
width: 100%;
|
395
|
-
height: 8px;
|
396
|
-
border-radius: 4px;
|
397
|
-
outline: 0;
|
398
|
-
border: 0;
|
399
|
-
padding: 0;
|
191
|
+
.inline-fields {
|
400
192
|
display: flex;
|
401
|
-
|
402
|
-
-
|
403
|
-
|
404
|
-
|
405
|
-
// Firefox track
|
406
|
-
&::-moz-range-track {
|
407
|
-
-moz-appearance: none;
|
408
|
-
opacity: 0;
|
409
|
-
}
|
410
|
-
|
411
|
-
// Remove default Firefox focus styles
|
412
|
-
&::-moz-focus-outer {
|
413
|
-
border: 0;
|
414
|
-
}
|
415
|
-
|
416
|
-
// Webkit thumb
|
417
|
-
&::-webkit-slider-thumb {
|
418
|
-
border: 0;
|
419
|
-
width: 22px;
|
420
|
-
height: 22px;
|
421
|
-
border-radius: 50%;
|
422
|
-
background: $white;
|
423
|
-
-webkit-appearance: none;
|
424
|
-
background: rgba($aluminum, .25);
|
425
|
-
border: 1px solid rgba($aluminum, .25);
|
426
|
-
box-shadow:
|
427
|
-
0 0 0 8px $white inset,
|
428
|
-
0 0 0 10px $aluminum inset;
|
429
|
-
transition:
|
430
|
-
border .2s,
|
431
|
-
box-shadow .2s;
|
432
|
-
}
|
433
|
-
|
434
|
-
&:hover::-webkit-slider-thumb {
|
435
|
-
border: 1px solid $aluminum;
|
436
|
-
}
|
193
|
+
flex: 0 1 auto;
|
194
|
+
flex-wrap: wrap;
|
195
|
+
flex-direction: row;
|
196
|
+
align-items: center;
|
437
197
|
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
0 0 0 8px $white inset,
|
443
|
-
0 0 0 10px $cerulean inset;
|
444
|
-
}
|
445
|
-
|
446
|
-
// Firefox thumb
|
447
|
-
&::-moz-range-thumb {
|
448
|
-
border: 0;
|
449
|
-
width: 22px;
|
450
|
-
height: 22px;
|
451
|
-
cursor: pointer;
|
452
|
-
border-radius: 50%;
|
453
|
-
-moz-appearance: none;
|
454
|
-
box-sizing: border-box;
|
455
|
-
background: rgba($aluminum, .25);
|
456
|
-
border: 1px solid rgba($aluminum, .25);
|
457
|
-
box-shadow:
|
458
|
-
0 0 0 8px $white inset,
|
459
|
-
0 0 0 10px $aluminum inset;
|
460
|
-
transition:
|
461
|
-
border .2s,
|
462
|
-
box-shadow .2s;
|
198
|
+
// Remove top spacing from submit button
|
199
|
+
> [type=submit] {
|
200
|
+
margin-top: 0;
|
201
|
+
align-self: stretch;
|
463
202
|
}
|
464
203
|
|
465
|
-
|
466
|
-
|
204
|
+
label + & {
|
205
|
+
margin-top: -5px;
|
467
206
|
}
|
468
207
|
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
box-shadow:
|
473
|
-
0 0 0 8px $white inset,
|
474
|
-
0 0 0 10px $cerulean inset;
|
208
|
+
.label-text-wrapper {
|
209
|
+
&:before { top: vr(2/15); }
|
210
|
+
.label-text:before { top: vr(3/5); }
|
475
211
|
}
|
476
212
|
}
|
477
213
|
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
appearance: none;
|
485
|
-
width: 50px;
|
486
|
-
height: 50px;
|
487
|
-
padding: 5px 3px;
|
488
|
-
background: $white;
|
489
|
-
border: 1px solid $alto;
|
490
|
-
border-radius: $radius;
|
491
|
-
cursor: crosshair;
|
492
|
-
|
493
|
-
&:hover,
|
494
|
-
&:focus,
|
495
|
-
&:active {
|
496
|
-
border-color: $aluminum;
|
497
|
-
}
|
214
|
+
.form-row {
|
215
|
+
display: flex;
|
216
|
+
justify-content: space-between;
|
217
|
+
align-items: flex-end;
|
218
|
+
flex-wrap: wrap;
|
219
|
+
margin: 0 -5px;
|
498
220
|
|
499
|
-
|
500
|
-
|
501
|
-
padding: 0 2px;
|
221
|
+
> * {
|
222
|
+
padding: 0 5px;
|
502
223
|
}
|
503
224
|
}
|
504
225
|
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
input[type=datetime-local] {
|
510
|
-
height: 50px;
|
511
|
-
}
|
512
|
-
|
513
|
-
/* ===================================== *
|
514
|
-
* viii. Button
|
515
|
-
* ------------------------------------- */
|
516
|
-
|
517
|
-
// Form buttons
|
518
|
-
input[type=button],
|
519
|
-
button[type=button] {
|
520
|
-
@include button;
|
521
|
-
}
|
522
|
-
|
523
|
-
// Form submit buttons
|
524
|
-
input[type=submit],
|
525
|
-
button[type=submit] {
|
526
|
-
@extend %success-btn;
|
527
|
-
}
|
528
|
-
|
529
|
-
/* ===================================== *
|
530
|
-
* ix. Validation
|
531
|
-
* ------------------------------------- */
|
532
|
-
|
533
|
-
// Apply validation styles to inputs & textareas
|
534
|
-
textarea, #{$text-inputs}, select {
|
535
|
-
|
536
|
-
// Strip default styling
|
537
|
-
&:invalid {
|
538
|
-
outline: 0;
|
539
|
-
box-shadow: none;
|
540
|
-
}
|
541
|
-
|
542
|
-
// Apply valid state color to required fields & adjacent labels
|
543
|
-
&.valid:required,
|
544
|
-
.valid &:required {
|
545
|
-
color: $apple;
|
546
|
-
}
|
547
|
-
|
548
|
-
// Apply valid state to required fields
|
549
|
-
&.valid:required,
|
550
|
-
.valid &:required {
|
551
|
-
border-color: $apple;
|
552
|
-
}
|
553
|
-
|
554
|
-
// Apply invalid state color to required fields & adjacent labels
|
555
|
-
&.invalid:required,
|
556
|
-
.invalid &:required {
|
557
|
-
color: $punch;
|
226
|
+
.wide-cell {
|
227
|
+
flex: 1 0 auto;
|
228
|
+
@include until(400px) {
|
229
|
+
width: 100%;
|
558
230
|
}
|
231
|
+
}
|
559
232
|
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
border-color: $punch;
|
564
|
-
}
|
233
|
+
.button-cell {
|
234
|
+
display: flex;
|
235
|
+
flex-direction: row-reverse;
|
565
236
|
|
566
|
-
|
567
|
-
|
568
|
-
.valid &:required:-webkit-autofill {
|
569
|
-
-webkit-text-fill-color: $apple;
|
237
|
+
@include until(550px) {
|
238
|
+
width: 100%;
|
570
239
|
}
|
571
240
|
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
241
|
+
@include until(400px) {
|
242
|
+
a.button, button {
|
243
|
+
width: 100%;
|
244
|
+
}
|
576
245
|
}
|
577
246
|
}
|
578
247
|
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
|
584
|
-
|
248
|
+
label {
|
249
|
+
display: flex;
|
250
|
+
font-size: 15px;
|
251
|
+
flex-direction: column;
|
252
|
+
position: relative;
|
253
|
+
flex: 1 0 auto;
|
254
|
+
margin: 18px 0;
|
585
255
|
|
586
|
-
|
587
|
-
|
588
|
-
transform: translate(-50%, 6px) scale(1);
|
256
|
+
&.label-text {
|
257
|
+
transition-property: box-shadow, color;
|
589
258
|
}
|
590
|
-
|
591
|
-
|
592
|
-
// Inline validation messages
|
593
|
-
.validation-message {
|
594
|
-
position: absolute;
|
595
|
-
left: 50%;
|
596
|
-
top: 100%;
|
597
|
-
width: 325px;
|
598
|
-
max-width: 100vw;
|
599
|
-
z-index: 3;
|
600
|
-
text-align: center;
|
601
|
-
transform: translate(-50%, 6px) scale(1);
|
602
|
-
transform-origin: center top;
|
603
|
-
animation: scale-fade-in .2s ease-out;
|
604
|
-
|
605
|
-
// Message bubble (also a hack to maintain proper word wrap)
|
606
|
-
p {
|
607
|
-
display: inline-block;
|
608
|
-
margin: 0;
|
609
|
-
padding: 12px 18px;
|
610
|
-
border-radius: $radius;
|
611
|
-
background: $punch;
|
612
|
-
color: $white;
|
613
|
-
font-size: 14px;
|
614
|
-
line-height: 21px;
|
615
|
-
|
616
|
-
// Message bubble triangle
|
617
|
-
&:before {
|
618
|
-
content: '';
|
619
|
-
position: absolute;
|
620
|
-
left: 50%;
|
621
|
-
margin-left: -6px;
|
622
|
-
bottom: 100%;
|
623
|
-
width: 0;
|
624
|
-
height: 0;
|
625
|
-
border-style: solid;
|
626
|
-
border-width: 0 6px 6px 6px;
|
627
|
-
border-color: transparent transparent $punch transparent;
|
628
|
-
}
|
259
|
+
select, input, textarea {
|
260
|
+
margin: 0px;
|
629
261
|
}
|
630
262
|
}
|
263
|
+
|