@thednp/color-picker 0.0.2 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +17 -14
- 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 */
|