-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidate.css
116 lines (93 loc) · 3.71 KB
/
validate.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
:root {
--sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--sf-form-fz-small: 0.75rem;
--sf-lh-normal: 1.1875;
--sf-disabled: 0.4;
}
.sf-description, .sf-invalid, .sf-valid {
display: none;
color: hsl(var(--sf-form-c-txt) / 40%);
font-size: var(--sf-form-fz-small);
font-family: var(--sf-form-ff);
font-weight: 400;
line-height: 1;
text-transform: none;
margin: 0.5em 0 0;
padding: 0 0 0.5em;
}
.sf-description { display: block }
.sf-invalid { color: hsl(var(--sf-form-c-error)) }
.sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) }
.show.sf-description, .show.sf-invalid, .show.sf-valid { display: block }
.hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none }
/* validates */
.validates:focus:invalid ~ .sf-invalid,
.validates:focus:valid ~ .sf-valid,
.validates:focus:valid ~ .sf-description.sf-valid
{ display: block }
.validates:focus:invalid ~ .validates ~ .sf-invalid,
.validates:focus:valid ~ .validates ~ .sf-valid,
.validates:focus:valid ~ .validates ~ .sf-description.sf-valid
{ display: none }
.validates:focus ~ .sf-description { display: none }
.validates:focus ~ .validates ~ .sf-description { display: block }
/* error */
.error:not(:disabled) + .sf-invalid,
.error:not(:disabled) + .sf-valid + .sf-invalid,
.error:not(:disabled) + .sf-description + .sf-invalid
{ display: block !important }
.error:not(:disabled) + .sf-invalid + .sf-valid,
.error:not(:disabled) + .sf-invalid + .sf-description,
.error:not(:disabled) + .sf-description,
.error:not(:disabled) + .sf-description + .sf-valid,
.error:not(:disabled) + .sf-valid,
.error:not(:disabled) + .sf-valid + .sf-description
{ display: none !important }
.validates input[type='checkbox'] ~ .sf-description { display: none }
.validates input[type='checkbox']:invalid ~ .sf-invalid { display: block }
.validates input[type='checkbox']:valid ~ .sf-valid { display: block }
.validates:required:invalid:not(:focus) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
.validates:required:invalid:not(:disabled) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
.validates input[type='radio']:invalid::before,
.validates input[type='checkbox']:invalid::before
{ border-color: hsl(var(--sf-form-c-error)) }
.error:not(:disabled),
.validates:required:invalid:focus
{
border-bottom-color: hsl(var(--sf-form-c-error));
outline: none;
}
label.validates.sf-switch .sf-description,
label.validates.sf-switch .sf-valid,
label.validates.sf-switch .sf-invalid,
label.validates.sf-checkbox .sf-description,
label.validates.sf-checkbox .sf-valid,
label.validates.sf-checkbox .sf-invalid {
width: 100%;
line-height: var(--sf-lh-normal);
}
form.validates:invalid .sf-button[type='submit'] {
cursor: not-allowed;
text-decoration: none;
opacity: var(--sf-disabled);
-webkit-text-fill-color: hsl(var(--sf-form-c-txt));
}
/* /// */
html.var .sf-description,
html.var .sf-invalid,
html.var .sf-valid {
color: hsla(0, 0%, 10%, 0.4);
font-size: 12px;
font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
html.var label.validates.sf-switch .sf-description,
html.var label.validates.sf-switch .sf-valid,
html.var label.validates.sf-switch .sf-invalid,
html.var label.validates.sf-checkbox .sf-description,
html.var label.validates.sf-checkbox .sf-valid,
html.var label.validates.sf-checkbox .sf-invalid
{ line-height: 1.1875 }
html.var .sf-invalid { color: hsl(0, 100%, 60%) }
html.var .error:not(:disabled) { border-bottom-color: hsl(0, 100%, 60%) }
html.var .validates:invalid:required { border-bottom-color: hsl(39, 100%, 50%) }
html.var .validates:invalid:focus { border-bottom-color: hsl(0, 100%, 60%) }