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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ratchet/base/form.js +9 -3
  3. data/app/assets/javascripts/ratchet/base/sync-input-value.js +9 -18
  4. data/app/assets/javascripts/ratchet/core.js +9 -3
  5. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +6 -6
  6. data/app/assets/javascripts/ratchet/enhancement/mapbox.js +48 -0
  7. data/app/assets/stylesheets/ratchet/_core.scss +4 -2
  8. data/app/assets/stylesheets/ratchet/base/_button.scss +15 -14
  9. data/app/assets/stylesheets/ratchet/base/_document.scss +30 -66
  10. data/app/assets/stylesheets/ratchet/base/_form.scss +162 -529
  11. data/app/assets/stylesheets/ratchet/base/_label-placeholder.scss +97 -0
  12. data/app/assets/stylesheets/ratchet/base/_media.scss +1 -1
  13. data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +65 -11
  14. data/app/assets/stylesheets/ratchet/base/_section.scss +284 -0
  15. data/app/assets/stylesheets/ratchet/base/_table.scss +4 -4
  16. data/app/assets/stylesheets/ratchet/base/_text.scss +50 -45
  17. data/app/assets/stylesheets/ratchet/base/_validation.scss +83 -0
  18. data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +39 -39
  19. data/app/assets/stylesheets/ratchet/utility/_color.scss +135 -0
  20. data/app/assets/stylesheets/ratchet/utility/_global.scss +21 -40
  21. data/app/assets/stylesheets/ratchet/utility/_loader.scss +1 -1
  22. data/app/helpers/ratchet/application_helper.rb +16 -10
  23. data/app/helpers/ratchet/form_helper.rb +302 -18
  24. data/app/views/layouts/ratchet/default.html.slim +2 -2
  25. data/app/views/shared/ratchet/_defs.html.slim +67 -0
  26. data/app/views/shared/ratchet/_footer.html.slim +6 -0
  27. data/app/views/shared/ratchet/_header.html.slim +5 -0
  28. data/app/views/shared/ratchet/_icons.html.slim +53 -6
  29. data/lib/ratchet_design/version.rb +1 -1
  30. data/public/{core-0.1.12.js → core-0.1.13.js} +66 -66
  31. data/public/core-0.1.13.js.gz +0 -0
  32. data/public/core-0.1.13.map.json +1 -0
  33. data/public/{fonts-woff-0.1.12.css → fonts-woff-0.1.13.css} +0 -0
  34. data/public/{fonts-woff-0.1.12.css.gz → fonts-woff-0.1.13.css.gz} +0 -0
  35. data/public/{fonts-woff2-0.1.12.css → fonts-woff2-0.1.13.css} +0 -0
  36. data/public/{fonts-woff2-0.1.12.css.gz → fonts-woff2-0.1.13.css.gz} +0 -0
  37. metadata +36 -32
  38. data/app/assets/javascripts/ratchet/utility/loader.js +0 -84
  39. data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +0 -22
  40. data/public/core-0.1.12.js.gz +0 -0
  41. 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
- // Input labels
41
- label {
42
- padding: 0;
43
- clear: both;
44
- flex: 1 0 auto;
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
- // Default active color
51
- :not(.valid):not(.invalid) > {
52
- textarea,
53
- #{$text-inputs} {
54
- &:focus + span,
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
- // Validated label
62
- .valid > {
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
- // Invalidated label
80
- .invalid > {
81
- textarea,
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
- // Select-specific styles
98
- select {
99
- margin: 0;
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
- // Inputs
107
- textarea,
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
- // Move labels out of the way on focus and empty
143
- &:focus + span,
144
- &:active + span,
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
- // Inline forms
152
- @mixin inline-form($size: normal, $gutter: 10px) {
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
- // Leave right margin off last element
162
- > :not(:last-child) {
163
- margin-right: $gutter;
39
+ &.max {
40
+ max-width: 100%;
164
41
  }
165
42
 
166
43
  }
167
44
 
168
- %success-btn {
169
- @include button($color: $apple);
45
+ .switch-label, .tick-label {
46
+ pointer-events: none;
47
+ * { pointer-events: all; }
170
48
  }
171
49
 
172
- /* ===================================== *
173
- * ii. Common
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: 14px;
187
- text-transform: uppercase;
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
- // Nested range inputs
238
- > input[type=range] {
239
- margin-top: 12px;
240
- margin-bottom: 5px;
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
- // Inputs
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: border-color .2s;
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
- &:hover,
267
- &:focus,
268
- &:active {
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
- // Bare inputs
275
- :not(label) > {
276
- input,
277
- select,
278
- textarea {
279
- margin-bottom: 10px;
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
- max-height: vr(20) + 5px; // 305px
167
+ margin-top: 10px;
297
168
  min-height: vr(8) + 5px; // 125px;
298
169
  }
299
170
 
300
- /* ===================================== *
301
- * iv. Select
302
- * ------------------------------------- */
303
-
304
- // Select inputs
305
- select {
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
- // Radios
345
- input[type=radio] {
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
- // Checkboxes
357
- input[type=checkbox] {
358
-
359
- + .tick-label {
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
- position: relative;
402
- -webkit-appearance: none;
403
- cursor: pointer;
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
- &:focus::-webkit-slider-thumb,
439
- &:active::-webkit-slider-thumb {
440
- border: 1px solid $cerulean;
441
- box-shadow:
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
- &:hover::-moz-range-thumb {
466
- border: 1px solid $aluminum;
204
+ label + & {
205
+ margin-top: -5px;
467
206
  }
468
207
 
469
- &:focus::-moz-range-thumb,
470
- &:active::-moz-range-thumb {
471
- border: 1px solid $cerulean;
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
- * vii. Other HTML5
480
- * ------------------------------------- */
481
-
482
- // Color inputs
483
- input[type=color] {
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
- &::-webkit-color-swatch-wrapper {
500
- background: $white;
501
- padding: 0 2px;
221
+ > * {
222
+ padding: 0 5px;
502
223
  }
503
224
  }
504
225
 
505
- input[type=date],
506
- input[type=month],
507
- input[type=week],
508
- input[type=datetime],
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
- // Apply invalid state to required fields
561
- &.invalid:required,
562
- .invalid &:required {
563
- border-color: $punch;
564
- }
233
+ .button-cell {
234
+ display: flex;
235
+ flex-direction: row-reverse;
565
236
 
566
- // Apply valid state to Chrome’s autofilled fields
567
- &.valid:required:-webkit-autofill,
568
- .valid &:required:-webkit-autofill {
569
- -webkit-text-fill-color: $apple;
237
+ @include until(550px) {
238
+ width: 100%;
570
239
  }
571
240
 
572
- // Apply invalid state to Chrome’s autofilled fields
573
- &.invalid:required::-webkit-autofill,
574
- .invalid &:required::-webkit-autofill {
575
- -webkit-text-fill-color: $punch;
241
+ @include until(400px) {
242
+ a.button, button {
243
+ width: 100%;
244
+ }
576
245
  }
577
246
  }
578
247
 
579
- // Validation message animation declaration
580
- @keyframes scale-fade-in {
581
- 0% {
582
- opacity: 0;
583
- transform: translate(-50%, -6px) scale(.5);
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
- 100% {
587
- opacity: 1;
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
+