-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
shared.scss
172 lines (156 loc) · 5.24 KB
/
shared.scss
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$form-colors: dv.$colors !default;
$input-h: #{cv.getVar("scheme-h")} !default;
$input-s: #{cv.getVar("scheme-s")} !default;
$input-l: #{cv.getVar("scheme-main-l")} !default;
$input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
$input-color-l: cv.getVar("text-strong-l") !default;
$input-background-l: cv.getVar("scheme-main-l") !default;
$input-background-l-delta: 0% !default;
$input-height: cv.getVar("control-height") !default;
$input-shadow: inset 0 0.0625em 0.125em
hsla(
#{cv.getVar("scheme-h")},
#{cv.getVar("scheme-s")},
#{cv.getVar("scheme-invert-l")},
0.05
) !default;
$input-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-strong-l")},
0.3
) !default;
$input-focus-h: cv.getVar("focus-h") !default;
$input-focus-s: cv.getVar("focus-s") !default;
$input-focus-l: cv.getVar("focus-l") !default;
$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
$input-disabled-color: cv.getVar("text-weak") !default;
$input-disabled-background-color: cv.getVar("background") !default;
$input-disabled-border-color: cv.getVar("background") !default;
$input-disabled-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-weak-l")},
0.3
) !default;
$input-arrow: cv.getVar("link") !default;
$input-icon-color: cv.getVar("text-light") !default;
$input-icon-hover-color: cv.getVar("text-weak") !default;
$input-icon-focus-color: cv.getVar("link") !default;
$input-radius: cv.getVar("radius") !default;
.#{iv.$class-prefix}control,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}textarea,
.#{iv.$class-prefix}select select {
@include cv.register-vars(
(
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
"input-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h},
"input-focus-s": #{$input-focus-s},
"input-focus-l": #{$input-focus-l},
"input-focus-shadow-size": #{$input-focus-shadow-size},
"input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
"input-color-l": #{$input-color-l},
"input-background-l": #{$input-background-l},
"input-background-l-delta": #{$input-background-l-delta},
"input-height": #{$input-height},
"input-shadow": #{$input-shadow},
"input-placeholder-color": #{$input-placeholder-color},
"input-disabled-color": #{$input-disabled-color},
"input-disabled-background-color": #{$input-disabled-background-color},
"input-disabled-border-color": #{$input-disabled-border-color},
"input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
"input-arrow": #{$input-arrow},
"input-icon-color": #{$input-icon-color},
"input-icon-hover-color": #{$input-icon-hover-color},
"input-icon-focus-color": #{$input-icon-focus-color},
"input-radius": #{$input-radius},
)
);
}
@mixin input {
@extend %control;
background-color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
calc(
#{cv.getVar("input-background-l")} + #{cv.getVar(
"input-background-l-delta"
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
#{cv.getVar("input-color-l")}
);
@include mx.placeholder {
color: cv.getVar("input-placeholder-color");
}
&:hover,
&.#{iv.$class-prefix}is-hovered {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
)
);
}
&:active,
&.#{iv.$class-prefix}is-active {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
)
);
}
&:focus,
&:focus-within,
&.#{iv.$class-prefix}is-focused {
border-color: hsl(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l")
);
box-shadow: cv.getVar("input-focus-shadow-size")
hsla(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l"),
cv.getVar("input-focus-shadow-alpha")
);
}
&[disabled],
fieldset[disabled] & {
background-color: cv.getVar("input-disabled-background-color");
border-color: cv.getVar("input-disabled-border-color");
box-shadow: none;
color: cv.getVar("input-disabled-color");
@include mx.placeholder {
color: cv.getVar("input-disabled-placeholder-color");
}
}
}
%input {
@include input;
}