1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | $abide-inputs: true !default;
|
12 |
|
13 |
|
14 |
|
15 | $abide-labels: true !default;
|
16 |
|
17 |
|
18 |
|
19 | $input-background-invalid: get-color(alert) !default;
|
20 |
|
21 |
|
22 |
|
23 | $form-label-color-invalid: get-color(alert) !default;
|
24 |
|
25 |
|
26 |
|
27 | $input-error-color: get-color(alert) !default;
|
28 |
|
29 |
|
30 |
|
31 | $input-error-font-size: rem-calc(12) !default;
|
32 |
|
33 |
|
34 |
|
35 | $input-error-font-weight: $global-weight-bold !default;
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | @mixin form-input-error(
|
42 | $background: $input-background-invalid,
|
43 | $background-lighten: 10%
|
44 | ) {
|
45 | &:not(:focus) {
|
46 | border-color: $background;
|
47 | background-color: mix($background, $white, $background-lighten);
|
48 | &::placeholder {
|
49 | color: $background;
|
50 | }
|
51 | }
|
52 | }
|
53 |
|
54 |
|
55 | @mixin form-error {
|
56 | display: none;
|
57 | margin-top: $form-spacing * -0.5;
|
58 | margin-bottom: $form-spacing;
|
59 |
|
60 | font-size: $input-error-font-size;
|
61 | font-weight: $input-error-font-weight;
|
62 | color: $input-error-color;
|
63 | }
|
64 |
|
65 | @mixin foundation-form-error {
|
66 | @if $abide-inputs {
|
67 |
|
68 | .is-invalid-input {
|
69 | @include form-input-error;
|
70 | }
|
71 | }
|
72 |
|
73 | @if $abide-labels {
|
74 |
|
75 | .is-invalid-label {
|
76 | color: $form-label-color-invalid;
|
77 | }
|
78 | }
|
79 |
|
80 |
|
81 | .form-error {
|
82 | @include form-error;
|
83 |
|
84 | &.is-visible {
|
85 | display: block;
|
86 | }
|
87 | }
|
88 | }
|