-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
321 lines (311 loc) · 10.8 KB
/
index.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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
:root {
--color-option-picker--disabled: #666;
--color-option-picker: #000;
--color-option-picker__option--active: #fff;
--color-option-picker__option--disabled: #666;
--color-option-picker__option--hover: #fff;
--color-option-picker__option--selected: #00f;
--color-option-picker__option-group--disabled: #666;
--color-option-picker__option-group: #000;
--color-option-picker__options--disabled: #666;
--fill-option-picker--disabled: #eee;
--fill-option-picker: #fff;
--fill-option-picker__option--active: #009;
--fill-option-picker__option--disabled: none;
--fill-option-picker__option--hover: #00f;
--fill-option-picker__option--selected: none;
--fill-option-picker__option: none;
--fill-option-picker__options--disabled: #eee;
--fill-option-picker__options: #fff;
--font-face-option-picker: inherit;
--font-height-option-picker: 1.5em;
--font-size-option-picker: inherit;
--shadow-option-picker: none;
--shadow-option-picker__options: 0 1px 2px rgba(0, 0, 0, .4);
--stroke-option-picker--disabled: #666;
--stroke-option-picker--focus: #00f;
--stroke-option-picker--open: #00f;
--stroke-option-picker: #000;
--stroke-option-picker__options--disabled: #999;
--stroke-option-picker__options--open: #00f;
--stroke-option-picker__options: #000;
--width-option-picker: 12em;
}
.option-picker,
.option-picker::before,
.option-picker::after,
.option-picker *,
.option-picker *::before,
.option-picker *::after {
box-sizing: border-box;
font: inherit;
}
.option-picker {
-moz-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
background: var(--fill-option-picker);
border: 1px solid;
border-color: var(--stroke-option-picker);
border-radius: var(--arc-option-picker);
box-shadow: var(--shadow-option-picker);
color: var(--color-option-picker);
cursor: pointer;
display: inline-block;
font-family: var(--font-face-option-picker);
font-size: var(--font-size-option-picker);
height: var(--height-option-picker, auto);
line-height: var(--font-height-option-picker);
max-height: var(--height-max-option-picker, 100%);
max-width: var(--width-max-option-picker, 100%);
min-height: var(--height-min-option-picker, 0);
min-width: var(--width-min-option-picker, 0);
outline: 0;
padding: 0.25em;
position: relative;
user-select: none;
vertical-align: middle;
width: var(--width-option-picker, auto);
}
.option-picker:hover {
background: var(--fill-option-picker--hover, var(--fill-option-picker));
border-color: var(--stroke-option-picker--hover, var(--stroke-option-picker));
box-shadow: var(--shadow-option-picker--hover, var(--shadow-option-picker));
color: var(--color-option-picker--hover, var(--color-option-picker));
}
.option-picker:focus {
background: var(--fill-option-picker--focus, var(--fill-option-picker));
border-color: var(--stroke-option-picker--focus, var(--stroke-option-picker));
box-shadow: var(--shadow-option-picker--focus, var(--shadow-option-picker));
color: var(--color-option-picker--focus, var(--color-option-picker));
}
.option-picker:active {
background: var(--fill-option-picker--active, var(--fill-option-picker));
border-color: var(--stroke-option-picker--active, var(--stroke-option-picker));
box-shadow: var(--shadow-option-picker--active, var(--shadow-option-picker));
color: var(--color-option-picker--active, var(--color-option-picker));
}
.option-picker::after {
border: 0 solid transparent;
border-bottom-color: inherit;
border-left-width: 0.35em;
border-right-width: 0.35em;
border-top-color: inherit;
border-top-width: 0.45em;
content: "";
height: 0;
pointer-events: none;
position: absolute;
right: 0.5em;
top: calc(50% - 0.225em);
width: 0;
}
.option-picker--open.option-picker--down {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.option-picker--open.option-picker--up {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.option-picker--open::after {
border-bottom-width: 0.45em;
border-top-width: 0;
}
.option-picker--open .option-picker__options {
background: var(--fill-option-picker__options--open, var(--fill-option-picker__options, var(--fill-option-picker)));
border-color: var(--stroke-option-picker__options--open, var(--stroke-option-picker__options, var(--stroke-option-picker)));
color: var(--color-option-picker__options--open, var(--stroke-option-picker__options, var(--stroke-option-picker)));
display: block;
}
.option-picker--open.option-picker--down .option-picker__options {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.option-picker--open.option-picker--up .option-picker__options {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.option-picker * {
outline: 0;
}
.option-picker.option-picker--focus {
background: var(--fill-option-picker--focus, var(--fill-option-picker));
border-color: var(--stroke-option-picker--focus, var(--stroke-option-picker));
box-shadow: var(--shadow-option-picker--focus, var(--shadow-option-picker));
color: var(--color-option-picker--focus, var(--color-option-picker));
}
.option-picker.option-picker--disabled {
background: var(--fill-option-picker--disabled, var(--fill-option-picker));
border-color: var(--stroke-option-picker--disabled, var(--stroke-option-picker));
box-shadow: var(--shadow-option-picker--disabled, var(--shadow-option-picker));
color: var(--color-option-picker--disabled, var(--color-option-picker));
}
.option-picker__options {
background: var(--fill-option-picker__options, var(--fill-option-picker));
border: inherit;
border-color: var(--stroke-option-picker__options, var(--stroke-option-picker));
border-radius: var(--arc-option-picker__options, var(--arc-option-picker));
box-shadow: var(--shadow-option-picker__options);
color: var(--color-option-picker__options, var(--color-option-picker));
display: none;
overflow: auto;
position: fixed;
z-index: 9999;
}
.option-picker__options[hidden] {
display: none;
}
.option-picker__options .option-picker__option {
background: var(--fill-option-picker__option);
color: var(--color-option-picker__option);
cursor: pointer;
display: block;
font: inherit;
overflow: hidden;
padding: 0 0.5em;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-picker__options .option-picker__option[hidden] {
display: none;
}
.option-picker__options .option-picker__option:not(.option-picker__option--disabled):hover {
background: var(--fill-option-picker__option--hover, var(--fill-option-picker__option));
color: var(--color-option-picker__option--hover, var(--color-option-picker__option));
}
.option-picker__options .option-picker__option:not(.option-picker__option--disabled):focus {
background: var(--fill-option-picker__option--focus, var(--fill-option-picker__option));
color: var(--color-option-picker__option--focus, var(--color-option-picker__option));
}
.option-picker__options .option-picker__option:not(.option-picker__option--disabled):active {
background: var(--fill-option-picker__option--active, var(--fill-option-picker__option));
color: var(--color-option-picker__option--active, var(--color-option-picker__option));
}
.option-picker__options .option-picker__option--selected {
background: var(--fill-option-picker__option--selected, var(--fill-option-picker__option));
color: var(--color-option-picker__option--selected, var(--color-option-picker__option));
}
.option-picker__options .option-picker__option--disabled {
background: var(--fill-option-picker__option--disabled, var(--fill-option-picker__option));
color: var(--color-option-picker__option--disabled, var(--color-option-picker__option));
}
.option-picker__options .option-picker__option--disabled {
cursor: not-allowed;
}
.option-picker__option-group {
display: block;
padding: 0 0.5em;
}
.option-picker__option-group[title]::before {
content: attr(title);
display: block;
font-weight: bold;
margin: 0 -0.5em;
overflow: hidden;
padding: 0 0.5em;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-picker__option-group--disabled {
color: var(--color-disabled__option-group--disabled, var(--color-disabled__option-group));
}
.option-picker__option-group .option-picker__option {
margin: 0 -0.5em;
padding-left: 1.5em;
}
.option-picker__source {
left: -9999px;
position: fixed;
top: -9999px;
}
.option-picker__source:disabled + .option-picker {
background: var(--fill-option-picker--disabled, var(--fill-option-picker));
border-color: var(--stroke-option-picker--disabled, var(--stroke-option-picker));
color: var(--color-option-picker--disabled, var(--color-option-picker));
cursor: not-allowed;
}
.option-picker__source:disabled + .option-picker::after {
border-top-color: var(--stroke-option-picker--disabled, var(--stroke-option-picker));
}
.option-picker__source:disabled + .option-picker .option-picker__option {
color: var(--color-option-picker--disabled, var(--color-option-picker));
}
.option-picker__source:disabled + .option-picker .option-picker__options {
background: var(--fill-option-picker__options--disabled, var(--fill-option-picker--disabled), var(--fill-option-picker));
border-color: var(--stroke-option-picker__options--disabled, var(--stroke-option-picker--disabled, var(--stroke-option-picker)));
color: var(--color-option-picker__options--disabled, var(--color-option-picker--disabled, var(--color-option-picker)));
}
.option-picker__source:disabled + .option-picker .option-picker__options,
.option-picker__source:disabled + .option-picker .option-picker__values {
pointer-events: none;
}
.option-picker__source[size] + .option-picker {
height: auto;
}
.option-picker__source[size] + .option-picker::after {
display: none;
}
.option-picker__source[size] + .option-picker .option-picker__options {
border-color: inherit;
border-width: 0;
border-top-width: inherit;
box-shadow: none;
display: block;
margin: 0.25em -0.25em -0.25em;
position: relative;
z-index: 1;
}
.option-picker__source[size] + .option-picker .option-picker__values {
margin: 0;
}
.option-picker__source[multiple] + .option-picker .option-picker__values {
white-space: normal;
}
.option-picker__input span {
display: block;
height: 100%;
outline: 0;
position: relative;
z-index: 1;
}
.option-picker__input span * {
display: none;
}
.option-picker__input span + span {
bottom: 0;
left: 0;
opacity: 0.5;
padding: inherit;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 0;
}
.option-picker__input span {
position: relative;
z-index: 1;
}
.option-picker__input span + span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.option-picker__input {
cursor: text;
}
.option-picker__input,
.option-picker__values {
display: block;
margin-right: 1.25em;
overflow: hidden;
padding: 0 0.25em;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}