@thednp/color-picker 0.0.2-alpha4 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -1
- package/dist/css/color-picker.css +82 -46
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +82 -46
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-esm.js +1 -1
- package/dist/js/color-esm.min.js +1 -1
- package/dist/js/color-palette-esm.js +1 -1
- package/dist/js/color-palette-esm.min.js +1 -1
- package/dist/js/color-palette.js +1 -1
- package/dist/js/color-palette.min.js +1 -1
- package/dist/js/color-picker-element-esm.js +180 -164
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +180 -164
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +69 -113
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +69 -113
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +1 -1
- package/dist/js/color.min.js +1 -1
- package/package.json +20 -19
- package/src/js/color-picker-element.js +44 -33
- package/src/js/color-picker.js +43 -44
- package/src/js/util/getColorMenu.js +7 -8
- package/src/js/util/setMarkup.js +4 -7
- package/src/js/util/toggleCEAttr.js +70 -0
- package/src/scss/_variables.scss +7 -0
- package/src/scss/color-picker.scss +86 -45
- package/types/index.d.ts +1 -1
- package/types/source/types.d.ts +8 -6
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
# ColorPicker
|
|
1
|
+
# ColorPicker [](https://coveralls.io/github/thednp/color-picker?branch=main)   [](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
|
|
2
|
+
|
|
2
3
|
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
|
3
4
|
|
|
4
5
|
[](http://thednp.github.io/color-picker)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker
|
|
2
|
+
* ColorPicker v1.0.0 (http://thednp.github.io/color-picker)
|
|
3
3
|
* Copyright 2022 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -8,6 +8,38 @@ color-picker,
|
|
|
8
8
|
.color-picker {
|
|
9
9
|
position: relative;
|
|
10
10
|
display: flex;
|
|
11
|
+
--white-15: rgba(255, 255, 255, 0.15);
|
|
12
|
+
--white-25: rgba(255, 255, 255, 0.25);
|
|
13
|
+
--white-33: rgba(255, 255, 255, 0.33);
|
|
14
|
+
--white-50: rgba(255, 255, 255, 0.5);
|
|
15
|
+
--white-75: rgba(255, 255, 255, 0.75);
|
|
16
|
+
--white-90: rgba(255, 255, 255, 0.9);
|
|
17
|
+
--black-15: rgba(0, 0, 0, 0.15);
|
|
18
|
+
--black-25: rgba(0, 0, 0, 0.25);
|
|
19
|
+
--black-33: rgba(0, 0, 0, 0.33);
|
|
20
|
+
--black-50: rgba(0, 0, 0, 0.5);
|
|
21
|
+
--black-75: rgba(0, 0, 0, 0.75);
|
|
22
|
+
--black-90: rgba(0, 0, 0, 0.9);
|
|
23
|
+
--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;
|
|
24
|
+
--btn-transition: box-shadow 0.33s ease, border 0.33s ease;
|
|
25
|
+
--options-transition: height 0.33s ease;
|
|
26
|
+
--dropdown-bg: var(--black-75);
|
|
27
|
+
--dropdown-color: var(--white-75);
|
|
28
|
+
--dropdown-shadow: 0 6px 12px var(--black-33);
|
|
29
|
+
--dropdown-scrollbar-bg: var(--white-33);
|
|
30
|
+
--dropdown-scrollbar-bg-hover: var(--white-50);
|
|
31
|
+
--knob-bg: #000;
|
|
32
|
+
--knob-border: 1px solid var(--white-90);
|
|
33
|
+
--knob-shadow-hover: 0 0 0 6px var(--white-50);
|
|
34
|
+
--knob-shadow-active: 0 0 0 6px var(--white-90);
|
|
35
|
+
--input-border: 1px solid var(--white-15);
|
|
36
|
+
--input-border-hover: 1px solid var(--white-33);
|
|
37
|
+
--input-bg-hover: var(--black-15);
|
|
38
|
+
--option-color-hover: var(--black-75);
|
|
39
|
+
--option-bg-hover: var(--white-50);
|
|
40
|
+
--option-color-active: var(--black-75);
|
|
41
|
+
--option-bg-active: var(--white-90);
|
|
42
|
+
--visual-shadow: 0 0 0 1px var(--white-15) inset;
|
|
11
43
|
}
|
|
12
44
|
|
|
13
45
|
color-picker:focus,
|
|
@@ -23,12 +55,12 @@ color-picker:focus,
|
|
|
23
55
|
flex-direction: column;
|
|
24
56
|
width: min-content;
|
|
25
57
|
padding: 0.5rem;
|
|
26
|
-
color:
|
|
27
|
-
background:
|
|
58
|
+
color: var(--dropdown-color);
|
|
59
|
+
background: var(--dropdown-bg);
|
|
28
60
|
border-radius: 0.5rem;
|
|
29
|
-
box-shadow:
|
|
61
|
+
box-shadow: var(--dropdown-shadow);
|
|
30
62
|
opacity: 0;
|
|
31
|
-
transition:
|
|
63
|
+
transition: var(--dropdown-transition);
|
|
32
64
|
}
|
|
33
65
|
|
|
34
66
|
.color-dropdown.picker {
|
|
@@ -84,13 +116,12 @@ color-picker:focus,
|
|
|
84
116
|
border-radius: 0.25rem;
|
|
85
117
|
outline: none;
|
|
86
118
|
appearance: none;
|
|
87
|
-
transition
|
|
88
|
-
transition-property: box-shadow, border;
|
|
119
|
+
transition: var(--btn-transition);
|
|
89
120
|
}
|
|
90
121
|
|
|
91
122
|
.btn-appearance:focus,
|
|
92
123
|
.btn-appearance:hover {
|
|
93
|
-
box-shadow: 0 0 0 3px
|
|
124
|
+
box-shadow: 0 0 0 3px var(--black-15);
|
|
94
125
|
}
|
|
95
126
|
|
|
96
127
|
/* color-preview */
|
|
@@ -101,28 +132,28 @@ color-picker:focus,
|
|
|
101
132
|
}
|
|
102
133
|
|
|
103
134
|
.txt-dark .color-preview {
|
|
104
|
-
color:
|
|
135
|
+
color: var(--white-75);
|
|
105
136
|
}
|
|
106
137
|
|
|
107
138
|
.txt-dark .color-preview:focus {
|
|
108
|
-
box-shadow: 0 0 0 1px
|
|
139
|
+
box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
|
|
109
140
|
}
|
|
110
141
|
|
|
111
142
|
.txt-dark .color-preview::placeholder {
|
|
112
|
-
color:
|
|
143
|
+
color: var(--white-50);
|
|
113
144
|
}
|
|
114
145
|
|
|
115
146
|
.txt-light .color-preview {
|
|
116
|
-
color:
|
|
147
|
+
color: var(--black-75);
|
|
117
148
|
}
|
|
118
149
|
|
|
119
150
|
.txt-light .color-preview:focus {
|
|
120
|
-
color:
|
|
121
|
-
box-shadow: 0 0 0 1px
|
|
151
|
+
color: var(--black-75);
|
|
152
|
+
box-shadow: 0 0 0 1px var(--black-50) inset, 0 0 0 3px var(--black-15);
|
|
122
153
|
}
|
|
123
154
|
|
|
124
155
|
.txt-light .color-preview::placeholder {
|
|
125
|
-
color:
|
|
156
|
+
color: var(--black-50);
|
|
126
157
|
}
|
|
127
158
|
|
|
128
159
|
/* picker-toggle */
|
|
@@ -155,21 +186,21 @@ color-picker:focus,
|
|
|
155
186
|
}
|
|
156
187
|
|
|
157
188
|
.txt-light .menu-toggle {
|
|
158
|
-
background:
|
|
189
|
+
background: var(--black-50);
|
|
159
190
|
}
|
|
160
191
|
|
|
161
192
|
.txt-light .menu-toggle:focus,
|
|
162
193
|
.txt-light .menu-toggle:focus {
|
|
163
|
-
background:
|
|
194
|
+
background: var(--black-75);
|
|
164
195
|
}
|
|
165
196
|
|
|
166
197
|
.txt-dark .menu-toggle {
|
|
167
|
-
background:
|
|
198
|
+
background: var(--white-33);
|
|
168
199
|
}
|
|
169
200
|
|
|
170
201
|
.txt-dark .menu-toggle:focus,
|
|
171
202
|
.txt-dark .menu-toggle:focus {
|
|
172
|
-
background:
|
|
203
|
+
background: var(--white-50);
|
|
173
204
|
}
|
|
174
205
|
|
|
175
206
|
.menu-toggle svg {
|
|
@@ -200,11 +231,11 @@ color-picker:focus,
|
|
|
200
231
|
}
|
|
201
232
|
|
|
202
233
|
.scrollable:hover::-webkit-scrollbar-thumb {
|
|
203
|
-
background-color:
|
|
234
|
+
background-color: var(--dropdown-scrollbar-bg);
|
|
204
235
|
}
|
|
205
236
|
|
|
206
237
|
.scrollable::-webkit-scrollbar-thumb:hover {
|
|
207
|
-
background-color:
|
|
238
|
+
background-color: var(--dropdown-scrollbar-bg-hover);
|
|
208
239
|
}
|
|
209
240
|
|
|
210
241
|
/* color-defaults */
|
|
@@ -237,27 +268,28 @@ color-picker:focus,
|
|
|
237
268
|
|
|
238
269
|
.color-defaults .color-option:focus,
|
|
239
270
|
.color-defaults .color-option:hover {
|
|
240
|
-
|
|
271
|
+
color: var(--option-color-hover);
|
|
272
|
+
background: var(--option-bg-hover);
|
|
241
273
|
outline: none;
|
|
242
274
|
}
|
|
243
275
|
|
|
244
276
|
.color-defaults .color-option:active,
|
|
245
277
|
.color-defaults .color-option.active {
|
|
246
|
-
color:
|
|
247
|
-
background:
|
|
278
|
+
color: var(--option-color-active);
|
|
279
|
+
background: var(--option-bg-active);
|
|
248
280
|
}
|
|
249
281
|
|
|
250
282
|
/* color-options grid */
|
|
251
283
|
.color-options {
|
|
252
|
-
display: grid;
|
|
253
|
-
padding: 0;
|
|
254
|
-
margin: 0;
|
|
255
|
-
list-style: none;
|
|
256
284
|
--grid-item-size: 2rem;
|
|
257
285
|
--grid-fit: 5;
|
|
258
286
|
--grid-gap: .25rem;
|
|
259
287
|
--grid-height: auto;
|
|
260
288
|
--grid-hover-height: auto;
|
|
289
|
+
display: grid;
|
|
290
|
+
padding: 0;
|
|
291
|
+
margin: 0;
|
|
292
|
+
list-style: none;
|
|
261
293
|
grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
|
|
262
294
|
grid-template-rows: repeat(auto-fill, var(--grid-item-size));
|
|
263
295
|
gap: var(--grid-gap);
|
|
@@ -267,7 +299,7 @@ color-picker:focus,
|
|
|
267
299
|
height: var(--grid-height);
|
|
268
300
|
margin: 0 -0.5rem 0 0;
|
|
269
301
|
overflow-y: scroll;
|
|
270
|
-
transition:
|
|
302
|
+
transition: var(--options-transition);
|
|
271
303
|
}
|
|
272
304
|
|
|
273
305
|
.color-options.scrollable:hover {
|
|
@@ -312,7 +344,7 @@ color-picker:focus,
|
|
|
312
344
|
.color-options .color-option:active::before,
|
|
313
345
|
.color-options .color-option:focus::before {
|
|
314
346
|
content: "";
|
|
315
|
-
border: 3px solid
|
|
347
|
+
border: 3px solid var(--white-75);
|
|
316
348
|
mix-blend-mode: difference;
|
|
317
349
|
}
|
|
318
350
|
|
|
@@ -333,11 +365,11 @@ color-picker:focus,
|
|
|
333
365
|
}
|
|
334
366
|
|
|
335
367
|
.txt-dark .color-options .color-option.active:after {
|
|
336
|
-
box-shadow: 0 0 0 4px
|
|
368
|
+
box-shadow: 0 0 0 4px var(--white-90);
|
|
337
369
|
}
|
|
338
370
|
|
|
339
371
|
.txt-light .color-options .color-option.active:after {
|
|
340
|
-
box-shadow: 0 0 0 4px
|
|
372
|
+
box-shadow: 0 0 0 4px var(--black-90);
|
|
341
373
|
}
|
|
342
374
|
|
|
343
375
|
/* color-form */
|
|
@@ -370,25 +402,27 @@ color-picker:focus,
|
|
|
370
402
|
color: inherit;
|
|
371
403
|
text-align: right;
|
|
372
404
|
background: transparent;
|
|
373
|
-
border:
|
|
405
|
+
border: var(--input-border);
|
|
374
406
|
outline: none;
|
|
375
407
|
}
|
|
376
408
|
|
|
377
409
|
.color-input.hex {
|
|
378
410
|
width: 92.5%;
|
|
379
411
|
max-width: 92.5%;
|
|
380
|
-
/* width: calc(100% - 4% - 1rem); */
|
|
381
412
|
}
|
|
382
413
|
|
|
383
414
|
.color-input:active,
|
|
384
415
|
.color-input:focus {
|
|
385
|
-
background:
|
|
386
|
-
border:
|
|
416
|
+
background: var(--input-bg-hover);
|
|
417
|
+
border: var(--input-border-hover);
|
|
387
418
|
}
|
|
388
419
|
|
|
389
420
|
/* visual control */
|
|
390
421
|
.visual-control {
|
|
391
422
|
height: 150px;
|
|
423
|
+
/* important for mobile devices */
|
|
424
|
+
touch-action: none;
|
|
425
|
+
box-shadow: var(--visual-shadow);
|
|
392
426
|
}
|
|
393
427
|
|
|
394
428
|
.visual-control1 {
|
|
@@ -440,22 +474,24 @@ color-picker:focus,
|
|
|
440
474
|
top: 0;
|
|
441
475
|
left: 0;
|
|
442
476
|
height: 7px;
|
|
477
|
+
/* important for mobile devices */
|
|
478
|
+
touch-action: none;
|
|
443
479
|
user-select: none;
|
|
444
|
-
background-color:
|
|
445
|
-
border:
|
|
480
|
+
background-color: var(--knob-bg);
|
|
481
|
+
border: var(--knob-border);
|
|
446
482
|
border-radius: 5px;
|
|
447
483
|
outline: none;
|
|
448
484
|
will-change: transform;
|
|
449
485
|
}
|
|
450
486
|
|
|
451
487
|
.knob:hover {
|
|
452
|
-
box-shadow:
|
|
488
|
+
box-shadow: var(--knob-shadow-hover);
|
|
453
489
|
}
|
|
454
490
|
|
|
455
491
|
.knob:focus,
|
|
456
492
|
.knob:active {
|
|
457
493
|
z-index: 1;
|
|
458
|
-
box-shadow:
|
|
494
|
+
box-shadow: var(--knob-shadow-active);
|
|
459
495
|
}
|
|
460
496
|
|
|
461
497
|
/* color-pointer */
|
|
@@ -466,29 +502,29 @@ color-picker:focus,
|
|
|
466
502
|
}
|
|
467
503
|
|
|
468
504
|
.txt-dark .color-pointer {
|
|
469
|
-
box-shadow: 0 0 0 5px
|
|
505
|
+
box-shadow: 0 0 0 5px var(--white-50);
|
|
470
506
|
}
|
|
471
507
|
|
|
472
508
|
.txt-light .color-pointer {
|
|
473
|
-
box-shadow: 0 0 0 5px
|
|
509
|
+
box-shadow: 0 0 0 5px var(--black-50);
|
|
474
510
|
}
|
|
475
511
|
|
|
476
512
|
.txt-dark .color-pointer:hover {
|
|
477
|
-
box-shadow: 0 0 0 5px
|
|
513
|
+
box-shadow: 0 0 0 5px var(--white-75);
|
|
478
514
|
}
|
|
479
515
|
|
|
480
516
|
.txt-light .color-pointer:hover {
|
|
481
|
-
box-shadow: 0 0 0 5px
|
|
517
|
+
box-shadow: 0 0 0 5px var(--black-75);
|
|
482
518
|
}
|
|
483
519
|
|
|
484
520
|
.txt-dark .color-pointer:focus,
|
|
485
521
|
.txt-dark .color-pointer:active {
|
|
486
|
-
box-shadow: 0 0 0 5px
|
|
522
|
+
box-shadow: 0 0 0 5px var(--white-90);
|
|
487
523
|
}
|
|
488
524
|
|
|
489
525
|
.txt-light .color-pointer:focus,
|
|
490
526
|
.txt-light .color-pointer:active {
|
|
491
|
-
box-shadow: 0 0 0 5px
|
|
527
|
+
box-shadow: 0 0 0 5px var(--black-90);
|
|
492
528
|
}
|
|
493
529
|
|
|
494
530
|
/* utility */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker
|
|
2
|
-
color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:
|
|
1
|
+
/* ColorPicker v1.0.0 | thednp © 2022 | MIT-License */
|
|
2
|
+
color-picker,.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px var(--black-50) inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker
|
|
2
|
+
* ColorPicker v1.0.0 (http://thednp.github.io/color-picker)
|
|
3
3
|
* Copyright 2022 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -8,6 +8,38 @@ color-picker,
|
|
|
8
8
|
.color-picker {
|
|
9
9
|
position: relative;
|
|
10
10
|
display: flex;
|
|
11
|
+
--white-15: rgba(255, 255, 255, 0.15);
|
|
12
|
+
--white-25: rgba(255, 255, 255, 0.25);
|
|
13
|
+
--white-33: rgba(255, 255, 255, 0.33);
|
|
14
|
+
--white-50: rgba(255, 255, 255, 0.5);
|
|
15
|
+
--white-75: rgba(255, 255, 255, 0.75);
|
|
16
|
+
--white-90: rgba(255, 255, 255, 0.9);
|
|
17
|
+
--black-15: rgba(0, 0, 0, 0.15);
|
|
18
|
+
--black-25: rgba(0, 0, 0, 0.25);
|
|
19
|
+
--black-33: rgba(0, 0, 0, 0.33);
|
|
20
|
+
--black-50: rgba(0, 0, 0, 0.5);
|
|
21
|
+
--black-75: rgba(0, 0, 0, 0.75);
|
|
22
|
+
--black-90: rgba(0, 0, 0, 0.9);
|
|
23
|
+
--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;
|
|
24
|
+
--btn-transition: box-shadow 0.33s ease, border 0.33s ease;
|
|
25
|
+
--options-transition: height 0.33s ease;
|
|
26
|
+
--dropdown-bg: var(--black-75);
|
|
27
|
+
--dropdown-color: var(--white-75);
|
|
28
|
+
--dropdown-shadow: 0 6px 12px var(--black-33);
|
|
29
|
+
--dropdown-scrollbar-bg: var(--white-33);
|
|
30
|
+
--dropdown-scrollbar-bg-hover: var(--white-50);
|
|
31
|
+
--knob-bg: #000;
|
|
32
|
+
--knob-border: 1px solid var(--white-90);
|
|
33
|
+
--knob-shadow-hover: 0 0 0 6px var(--white-50);
|
|
34
|
+
--knob-shadow-active: 0 0 0 6px var(--white-90);
|
|
35
|
+
--input-border: 1px solid var(--white-15);
|
|
36
|
+
--input-border-hover: 1px solid var(--white-33);
|
|
37
|
+
--input-bg-hover: var(--black-15);
|
|
38
|
+
--option-color-hover: var(--black-75);
|
|
39
|
+
--option-bg-hover: var(--white-50);
|
|
40
|
+
--option-color-active: var(--black-75);
|
|
41
|
+
--option-bg-active: var(--white-90);
|
|
42
|
+
--visual-shadow: 0 0 0 1px var(--white-15) inset;
|
|
11
43
|
}
|
|
12
44
|
|
|
13
45
|
color-picker:focus,
|
|
@@ -23,12 +55,12 @@ color-picker:focus,
|
|
|
23
55
|
flex-direction: column;
|
|
24
56
|
width: min-content;
|
|
25
57
|
padding: 0.5rem;
|
|
26
|
-
color:
|
|
27
|
-
background:
|
|
58
|
+
color: var(--dropdown-color);
|
|
59
|
+
background: var(--dropdown-bg);
|
|
28
60
|
border-radius: 0.5rem;
|
|
29
|
-
box-shadow:
|
|
61
|
+
box-shadow: var(--dropdown-shadow);
|
|
30
62
|
opacity: 0;
|
|
31
|
-
transition:
|
|
63
|
+
transition: var(--dropdown-transition);
|
|
32
64
|
}
|
|
33
65
|
|
|
34
66
|
.color-dropdown.picker {
|
|
@@ -84,13 +116,12 @@ color-picker:focus,
|
|
|
84
116
|
border-radius: 0.25rem;
|
|
85
117
|
outline: none;
|
|
86
118
|
appearance: none;
|
|
87
|
-
transition
|
|
88
|
-
transition-property: box-shadow, border;
|
|
119
|
+
transition: var(--btn-transition);
|
|
89
120
|
}
|
|
90
121
|
|
|
91
122
|
.btn-appearance:focus,
|
|
92
123
|
.btn-appearance:hover {
|
|
93
|
-
box-shadow: 0 0 0 3px
|
|
124
|
+
box-shadow: 0 0 0 3px var(--black-15);
|
|
94
125
|
}
|
|
95
126
|
|
|
96
127
|
/* color-preview */
|
|
@@ -101,28 +132,28 @@ color-picker:focus,
|
|
|
101
132
|
}
|
|
102
133
|
|
|
103
134
|
.txt-dark .color-preview {
|
|
104
|
-
color:
|
|
135
|
+
color: var(--white-75);
|
|
105
136
|
}
|
|
106
137
|
|
|
107
138
|
.txt-dark .color-preview:focus {
|
|
108
|
-
box-shadow: 0 0 0 1px
|
|
139
|
+
box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
|
|
109
140
|
}
|
|
110
141
|
|
|
111
142
|
.txt-dark .color-preview::placeholder {
|
|
112
|
-
color:
|
|
143
|
+
color: var(--white-50);
|
|
113
144
|
}
|
|
114
145
|
|
|
115
146
|
.txt-light .color-preview {
|
|
116
|
-
color:
|
|
147
|
+
color: var(--black-75);
|
|
117
148
|
}
|
|
118
149
|
|
|
119
150
|
.txt-light .color-preview:focus {
|
|
120
|
-
color:
|
|
121
|
-
box-shadow: 0 0 0 1px
|
|
151
|
+
color: var(--black-75);
|
|
152
|
+
box-shadow: 0 0 0 1px var(--black-50) inset, 0 0 0 3px var(--black-15);
|
|
122
153
|
}
|
|
123
154
|
|
|
124
155
|
.txt-light .color-preview::placeholder {
|
|
125
|
-
color:
|
|
156
|
+
color: var(--black-50);
|
|
126
157
|
}
|
|
127
158
|
|
|
128
159
|
/* picker-toggle */
|
|
@@ -155,21 +186,21 @@ color-picker:focus,
|
|
|
155
186
|
}
|
|
156
187
|
|
|
157
188
|
.txt-light .menu-toggle {
|
|
158
|
-
background:
|
|
189
|
+
background: var(--black-50);
|
|
159
190
|
}
|
|
160
191
|
|
|
161
192
|
.txt-light .menu-toggle:focus,
|
|
162
193
|
.txt-light .menu-toggle:focus {
|
|
163
|
-
background:
|
|
194
|
+
background: var(--black-75);
|
|
164
195
|
}
|
|
165
196
|
|
|
166
197
|
.txt-dark .menu-toggle {
|
|
167
|
-
background:
|
|
198
|
+
background: var(--white-33);
|
|
168
199
|
}
|
|
169
200
|
|
|
170
201
|
.txt-dark .menu-toggle:focus,
|
|
171
202
|
.txt-dark .menu-toggle:focus {
|
|
172
|
-
background:
|
|
203
|
+
background: var(--white-50);
|
|
173
204
|
}
|
|
174
205
|
|
|
175
206
|
.menu-toggle svg {
|
|
@@ -200,11 +231,11 @@ color-picker:focus,
|
|
|
200
231
|
}
|
|
201
232
|
|
|
202
233
|
.scrollable:hover::-webkit-scrollbar-thumb {
|
|
203
|
-
background-color:
|
|
234
|
+
background-color: var(--dropdown-scrollbar-bg);
|
|
204
235
|
}
|
|
205
236
|
|
|
206
237
|
.scrollable::-webkit-scrollbar-thumb:hover {
|
|
207
|
-
background-color:
|
|
238
|
+
background-color: var(--dropdown-scrollbar-bg-hover);
|
|
208
239
|
}
|
|
209
240
|
|
|
210
241
|
/* color-defaults */
|
|
@@ -237,27 +268,28 @@ color-picker:focus,
|
|
|
237
268
|
|
|
238
269
|
.color-defaults .color-option:focus,
|
|
239
270
|
.color-defaults .color-option:hover {
|
|
240
|
-
|
|
271
|
+
color: var(--option-color-hover);
|
|
272
|
+
background: var(--option-bg-hover);
|
|
241
273
|
outline: none;
|
|
242
274
|
}
|
|
243
275
|
|
|
244
276
|
.color-defaults .color-option:active,
|
|
245
277
|
.color-defaults .color-option.active {
|
|
246
|
-
color:
|
|
247
|
-
background:
|
|
278
|
+
color: var(--option-color-active);
|
|
279
|
+
background: var(--option-bg-active);
|
|
248
280
|
}
|
|
249
281
|
|
|
250
282
|
/* color-options grid */
|
|
251
283
|
.color-options {
|
|
252
|
-
display: grid;
|
|
253
|
-
padding: 0;
|
|
254
|
-
margin: 0;
|
|
255
|
-
list-style: none;
|
|
256
284
|
--grid-item-size: 2rem;
|
|
257
285
|
--grid-fit: 5;
|
|
258
286
|
--grid-gap: .25rem;
|
|
259
287
|
--grid-height: auto;
|
|
260
288
|
--grid-hover-height: auto;
|
|
289
|
+
display: grid;
|
|
290
|
+
padding: 0;
|
|
291
|
+
margin: 0;
|
|
292
|
+
list-style: none;
|
|
261
293
|
grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
|
|
262
294
|
grid-template-rows: repeat(auto-fill, var(--grid-item-size));
|
|
263
295
|
gap: var(--grid-gap);
|
|
@@ -267,7 +299,7 @@ color-picker:focus,
|
|
|
267
299
|
height: var(--grid-height);
|
|
268
300
|
margin: 0 -0.5rem 0 0;
|
|
269
301
|
overflow-y: scroll;
|
|
270
|
-
transition:
|
|
302
|
+
transition: var(--options-transition);
|
|
271
303
|
}
|
|
272
304
|
|
|
273
305
|
.color-options.scrollable:hover {
|
|
@@ -312,7 +344,7 @@ color-picker:focus,
|
|
|
312
344
|
.color-options .color-option:active::before,
|
|
313
345
|
.color-options .color-option:focus::before {
|
|
314
346
|
content: "";
|
|
315
|
-
border: 3px solid
|
|
347
|
+
border: 3px solid var(--white-75);
|
|
316
348
|
mix-blend-mode: difference;
|
|
317
349
|
}
|
|
318
350
|
|
|
@@ -333,11 +365,11 @@ color-picker:focus,
|
|
|
333
365
|
}
|
|
334
366
|
|
|
335
367
|
.txt-dark .color-options .color-option.active:after {
|
|
336
|
-
box-shadow: 0 0 0 4px
|
|
368
|
+
box-shadow: 0 0 0 4px var(--white-90);
|
|
337
369
|
}
|
|
338
370
|
|
|
339
371
|
.txt-light .color-options .color-option.active:after {
|
|
340
|
-
box-shadow: 0 0 0 4px
|
|
372
|
+
box-shadow: 0 0 0 4px var(--black-90);
|
|
341
373
|
}
|
|
342
374
|
|
|
343
375
|
/* color-form */
|
|
@@ -370,25 +402,27 @@ color-picker:focus,
|
|
|
370
402
|
color: inherit;
|
|
371
403
|
text-align: right;
|
|
372
404
|
background: transparent;
|
|
373
|
-
border:
|
|
405
|
+
border: var(--input-border);
|
|
374
406
|
outline: none;
|
|
375
407
|
}
|
|
376
408
|
|
|
377
409
|
.color-input.hex {
|
|
378
410
|
width: 92.5%;
|
|
379
411
|
max-width: 92.5%;
|
|
380
|
-
/* width: calc(100% - 4% - 1rem); */
|
|
381
412
|
}
|
|
382
413
|
|
|
383
414
|
.color-input:active,
|
|
384
415
|
.color-input:focus {
|
|
385
|
-
background:
|
|
386
|
-
border:
|
|
416
|
+
background: var(--input-bg-hover);
|
|
417
|
+
border: var(--input-border-hover);
|
|
387
418
|
}
|
|
388
419
|
|
|
389
420
|
/* visual control */
|
|
390
421
|
.visual-control {
|
|
391
422
|
height: 150px;
|
|
423
|
+
/* important for mobile devices */
|
|
424
|
+
touch-action: none;
|
|
425
|
+
box-shadow: var(--visual-shadow);
|
|
392
426
|
}
|
|
393
427
|
|
|
394
428
|
.visual-control1 {
|
|
@@ -440,22 +474,24 @@ color-picker:focus,
|
|
|
440
474
|
top: 0;
|
|
441
475
|
left: 0;
|
|
442
476
|
height: 7px;
|
|
477
|
+
/* important for mobile devices */
|
|
478
|
+
touch-action: none;
|
|
443
479
|
user-select: none;
|
|
444
|
-
background-color:
|
|
445
|
-
border:
|
|
480
|
+
background-color: var(--knob-bg);
|
|
481
|
+
border: var(--knob-border);
|
|
446
482
|
border-radius: 5px;
|
|
447
483
|
outline: none;
|
|
448
484
|
will-change: transform;
|
|
449
485
|
}
|
|
450
486
|
|
|
451
487
|
.knob:hover {
|
|
452
|
-
box-shadow:
|
|
488
|
+
box-shadow: var(--knob-shadow-hover);
|
|
453
489
|
}
|
|
454
490
|
|
|
455
491
|
.knob:focus,
|
|
456
492
|
.knob:active {
|
|
457
493
|
z-index: 1;
|
|
458
|
-
box-shadow:
|
|
494
|
+
box-shadow: var(--knob-shadow-active);
|
|
459
495
|
}
|
|
460
496
|
|
|
461
497
|
/* color-pointer */
|
|
@@ -466,29 +502,29 @@ color-picker:focus,
|
|
|
466
502
|
}
|
|
467
503
|
|
|
468
504
|
.txt-dark .color-pointer {
|
|
469
|
-
box-shadow: 0 0 0 5px
|
|
505
|
+
box-shadow: 0 0 0 5px var(--white-50);
|
|
470
506
|
}
|
|
471
507
|
|
|
472
508
|
.txt-light .color-pointer {
|
|
473
|
-
box-shadow: 0 0 0 5px
|
|
509
|
+
box-shadow: 0 0 0 5px var(--black-50);
|
|
474
510
|
}
|
|
475
511
|
|
|
476
512
|
.txt-dark .color-pointer:hover {
|
|
477
|
-
box-shadow: 0 0 0 5px
|
|
513
|
+
box-shadow: 0 0 0 5px var(--white-75);
|
|
478
514
|
}
|
|
479
515
|
|
|
480
516
|
.txt-light .color-pointer:hover {
|
|
481
|
-
box-shadow: 0 0 0 5px
|
|
517
|
+
box-shadow: 0 0 0 5px var(--black-75);
|
|
482
518
|
}
|
|
483
519
|
|
|
484
520
|
.txt-dark .color-pointer:focus,
|
|
485
521
|
.txt-dark .color-pointer:active {
|
|
486
|
-
box-shadow: 0 0 0 5px
|
|
522
|
+
box-shadow: 0 0 0 5px var(--white-90);
|
|
487
523
|
}
|
|
488
524
|
|
|
489
525
|
.txt-light .color-pointer:focus,
|
|
490
526
|
.txt-light .color-pointer:active {
|
|
491
|
-
box-shadow: 0 0 0 5px
|
|
527
|
+
box-shadow: 0 0 0 5px var(--black-90);
|
|
492
528
|
}
|
|
493
529
|
|
|
494
530
|
/* utility */
|