@thednp/color-picker 0.0.1-alpha2 → 0.0.1-alpha3
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 +31 -15
- package/dist/css/color-picker.css +37 -15
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +37 -15
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-picker-element-esm.js +164 -135
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +164 -135
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +159 -133
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +159 -133
- package/dist/js/color-picker.min.js +2 -2
- package/package.json +1 -1
- package/src/js/color-palette.js +18 -9
- package/src/js/color-picker-element.js +7 -3
- package/src/js/color-picker.js +59 -48
- package/src/js/color.js +33 -34
- package/src/js/util/getColorControls.js +3 -3
- package/src/js/util/getColorForm.js +0 -1
- package/src/js/util/getColorMenu.js +21 -28
- package/src/js/util/roundPart.js +9 -0
- package/src/js/util/setCSSProperties.js +12 -0
- package/src/js/util/tabindex.js +3 -0
- package/src/scss/color-picker.scss +35 -12
- package/types/cp.d.ts +1 -3
package/README.md
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
# ColorPicker Web Component
|
|
2
2
|
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
3
|
|
|
4
|
-
|
|
4
|
+
[](http://thednp.github.io/color-picker)
|
|
5
5
|
|
|
6
6
|
[](https://www.npmjs.com/package/@thednp/color-picker)
|
|
7
7
|
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
|
8
8
|
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
# Demo
|
|
13
|
-
Download the package and check the `index.html`, or check it online [here](http://thednp.github.io/color-picker).
|
|
10
|
+
**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
|
|
14
11
|
|
|
15
12
|
|
|
16
13
|
# Highlights
|
|
17
14
|
* Accessibility Focus for WAI-ARIA compliance
|
|
18
15
|
* ES6+ sources with TypeScript definitions
|
|
16
|
+
* Framework agnostic and flexible design
|
|
19
17
|
* Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
|
|
20
18
|
* Supports keyboard and touch events
|
|
21
19
|
* Automatic repositioning of the popup dropdown on show / window scroll
|
|
@@ -68,33 +66,51 @@ var myPicker = new ColorPicker('input.SELECTOR');
|
|
|
68
66
|
</script>
|
|
69
67
|
```
|
|
70
68
|
|
|
71
|
-
To use the DATA-API, you
|
|
69
|
+
To use the DATA-API, you can provide for instance the `data-format="hex"`, and other specific attributes like so:
|
|
72
70
|
```html
|
|
73
71
|
<label for="myPicker">Color Label</label>
|
|
74
72
|
<div class="color-picker">
|
|
75
|
-
<input id="myPicker" name="myPicker" data-function="color-picker" class="color-preview" value="#069">
|
|
73
|
+
<input id="myPicker" name="myPicker" data-function="color-picker" data-format="hex" data-color-presets="red,green,blue" class="color-preview" value="#069">
|
|
76
74
|
</div>
|
|
77
75
|
```
|
|
78
|
-
The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage).
|
|
76
|
+
The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage#initialize-multiple-targets).
|
|
79
77
|
|
|
80
|
-
Alternatively you can use the `ColorPickerElement` custom element:
|
|
78
|
+
Alternatively you can use the `ColorPickerElement` custom element, the `data-function="color-picker"` attribute is no longer required:
|
|
81
79
|
```html
|
|
82
|
-
<label for="myPicker">
|
|
83
|
-
<color-picker>
|
|
84
|
-
<input id="myPicker" name="myPicker" class="color-preview" value="#069"
|
|
80
|
+
<label for="myPicker">Colour Field Label</label>
|
|
81
|
+
<color-picker data-format="rgb" data-color-keywords="#069:default,#111:revert">
|
|
82
|
+
<input id="myPicker" name="myPicker" class="color-preview" value="#069">
|
|
85
83
|
</color-picker>
|
|
86
84
|
|
|
87
85
|
<script type="module" src="../path-to/color-picker-element-esm.js"></script>
|
|
88
86
|
```
|
|
89
|
-
|
|
87
|
+
As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
|
|
90
88
|
|
|
91
89
|
|
|
92
|
-
#
|
|
90
|
+
# Initialize INPUT
|
|
93
91
|
```javascript
|
|
94
92
|
import ColorPicker from '@thednp/color-picker';
|
|
95
93
|
|
|
96
|
-
let myPicker = new ColorPicker('#myPicker')
|
|
94
|
+
let myPicker = new ColorPicker('#myPicker');
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
# Initialize Custom Element
|
|
98
|
+
```javascript
|
|
99
|
+
import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
|
|
100
|
+
|
|
101
|
+
// initialize the CustomElement
|
|
102
|
+
const myPicker = new ColorPickerElement();
|
|
103
|
+
// set DATA API
|
|
104
|
+
myPicker.setAttribute('data-format', 'hsl');
|
|
105
|
+
myPicker.setAttribute('data-id', 'ADD_YOUR_UNIQUE_ID');
|
|
106
|
+
myPicker.setAttribute('data-value', 'rgb(150 0 150 / 0.8)');
|
|
107
|
+
myPicker.setAttribute('data-label', 'Color Picker Element Label');
|
|
108
|
+
myPicker.setAttribute('data-color-keywords', 'false');
|
|
109
|
+
|
|
110
|
+
// append, connectedCallback() is triggered
|
|
111
|
+
document.body.append(myPicker);
|
|
97
112
|
```
|
|
113
|
+
Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
|
|
98
114
|
|
|
99
115
|
|
|
100
116
|
# Thanks
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker v0.0.
|
|
2
|
+
* ColorPicker v0.0.1alpha3 (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
|
*/
|
|
@@ -253,18 +253,34 @@ color-picker:focus,
|
|
|
253
253
|
padding: 0;
|
|
254
254
|
margin: 0;
|
|
255
255
|
list-style: none;
|
|
256
|
+
--grid-item-size: 2rem;
|
|
257
|
+
--grid-fit: 5;
|
|
258
|
+
--grid-gap: .25rem;
|
|
259
|
+
--grid-height: auto;
|
|
260
|
+
--grid-hover-height: auto;
|
|
261
|
+
grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
|
|
262
|
+
grid-template-rows: repeat(auto-fill, var(--grid-item-size));
|
|
263
|
+
gap: var(--grid-gap);
|
|
256
264
|
}
|
|
257
265
|
|
|
258
266
|
.color-options.scrollable {
|
|
267
|
+
height: var(--grid-height);
|
|
259
268
|
margin: 0 -0.5rem 0 0;
|
|
260
269
|
overflow-y: scroll;
|
|
261
270
|
transition: height 0.33s ease;
|
|
262
271
|
}
|
|
263
272
|
|
|
273
|
+
.color-options.scrollable:hover {
|
|
274
|
+
height: var(--grid-hover-height);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.color-options + .color-defaults {
|
|
278
|
+
margin-top: 0.25rem;
|
|
279
|
+
}
|
|
280
|
+
|
|
264
281
|
.multiline + .color-defaults {
|
|
265
282
|
flex-direction: row;
|
|
266
283
|
flex-wrap: wrap;
|
|
267
|
-
margin-top: 0.25rem;
|
|
268
284
|
}
|
|
269
285
|
.multiline + .color-defaults .color-option {
|
|
270
286
|
padding: 0.25rem 0.33rem;
|
|
@@ -273,21 +289,31 @@ color-picker:focus,
|
|
|
273
289
|
|
|
274
290
|
.color-options .color-option {
|
|
275
291
|
position: relative;
|
|
292
|
+
width: var(--grid-item-size);
|
|
293
|
+
height: var(--grid-item-size);
|
|
276
294
|
overflow: hidden;
|
|
277
295
|
text-indent: 2.1rem;
|
|
278
|
-
background: #eee;
|
|
279
|
-
opacity: 0.8;
|
|
280
296
|
}
|
|
281
297
|
|
|
282
|
-
.color-options .color-option:hover,
|
|
283
298
|
.color-options .color-option:active,
|
|
284
299
|
.color-options .color-option:focus {
|
|
285
|
-
|
|
300
|
+
outline: none;
|
|
286
301
|
}
|
|
287
302
|
|
|
288
|
-
.color-options .color-option
|
|
289
|
-
|
|
290
|
-
|
|
303
|
+
.color-options .color-option::before {
|
|
304
|
+
position: absolute;
|
|
305
|
+
top: 0;
|
|
306
|
+
right: 0;
|
|
307
|
+
bottom: 0;
|
|
308
|
+
left: 0;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.color-options .color-option:hover::before,
|
|
312
|
+
.color-options .color-option:active::before,
|
|
313
|
+
.color-options .color-option:focus::before {
|
|
314
|
+
content: "";
|
|
315
|
+
border: 3px solid rgba(255, 255, 255, 0.75);
|
|
316
|
+
mix-blend-mode: difference;
|
|
291
317
|
}
|
|
292
318
|
|
|
293
319
|
.color-options .color-option:active,
|
|
@@ -295,9 +321,6 @@ color-picker:focus,
|
|
|
295
321
|
box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
|
|
296
322
|
}
|
|
297
323
|
|
|
298
|
-
.color-options .color-option.active {
|
|
299
|
-
opacity: 1;
|
|
300
|
-
}
|
|
301
324
|
.color-options .color-option.active:after {
|
|
302
325
|
position: absolute;
|
|
303
326
|
top: 50%;
|
|
@@ -305,7 +328,7 @@ color-picker:focus,
|
|
|
305
328
|
width: 4px;
|
|
306
329
|
height: 4px;
|
|
307
330
|
margin: -2px 0 0 -2px;
|
|
308
|
-
content: "
|
|
331
|
+
content: "";
|
|
309
332
|
border-radius: 4px;
|
|
310
333
|
}
|
|
311
334
|
|
|
@@ -323,7 +346,7 @@ color-picker:focus,
|
|
|
323
346
|
flex-direction: row;
|
|
324
347
|
flex-wrap: wrap;
|
|
325
348
|
align-items: center;
|
|
326
|
-
padding: 0.
|
|
349
|
+
padding: 0.25rem 0 0;
|
|
327
350
|
font: 12px sans-serif;
|
|
328
351
|
}
|
|
329
352
|
|
|
@@ -421,7 +444,6 @@ color-picker:focus,
|
|
|
421
444
|
background-color: #000;
|
|
422
445
|
border: 1px solid #fff;
|
|
423
446
|
outline: none;
|
|
424
|
-
will-change: transform;
|
|
425
447
|
}
|
|
426
448
|
|
|
427
449
|
.knob:hover {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker v0.0.
|
|
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:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.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-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;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:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.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:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.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{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none}.color-options.scrollable{margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap
|
|
1
|
+
/* ColorPicker v0.0.1alpha3 | thednp © 2022 | MIT-License */
|
|
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:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.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-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;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:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.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:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.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{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;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:height .33s ease}.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 rgba(255,255,255,.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 rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.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:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.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;user-select:none;background-color:#000;border:1px solid #fff;outline:none}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0;border-radius:5px}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.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 v0.0.
|
|
2
|
+
* ColorPicker v0.0.1alpha3 (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
|
*/
|
|
@@ -253,18 +253,34 @@ color-picker:focus,
|
|
|
253
253
|
padding: 0;
|
|
254
254
|
margin: 0;
|
|
255
255
|
list-style: none;
|
|
256
|
+
--grid-item-size: 2rem;
|
|
257
|
+
--grid-fit: 5;
|
|
258
|
+
--grid-gap: .25rem;
|
|
259
|
+
--grid-height: auto;
|
|
260
|
+
--grid-hover-height: auto;
|
|
261
|
+
grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
|
|
262
|
+
grid-template-rows: repeat(auto-fill, var(--grid-item-size));
|
|
263
|
+
gap: var(--grid-gap);
|
|
256
264
|
}
|
|
257
265
|
|
|
258
266
|
.color-options.scrollable {
|
|
267
|
+
height: var(--grid-height);
|
|
259
268
|
margin: 0 -0.5rem 0 0;
|
|
260
269
|
overflow-y: scroll;
|
|
261
270
|
transition: height 0.33s ease;
|
|
262
271
|
}
|
|
263
272
|
|
|
273
|
+
.color-options.scrollable:hover {
|
|
274
|
+
height: var(--grid-hover-height);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.color-options + .color-defaults {
|
|
278
|
+
margin-top: 0.25rem;
|
|
279
|
+
}
|
|
280
|
+
|
|
264
281
|
.multiline + .color-defaults {
|
|
265
282
|
flex-direction: row;
|
|
266
283
|
flex-wrap: wrap;
|
|
267
|
-
margin-top: 0.25rem;
|
|
268
284
|
}
|
|
269
285
|
.multiline + .color-defaults .color-option {
|
|
270
286
|
padding: 0.25rem 0.33rem;
|
|
@@ -273,21 +289,31 @@ color-picker:focus,
|
|
|
273
289
|
|
|
274
290
|
.color-options .color-option {
|
|
275
291
|
position: relative;
|
|
292
|
+
width: var(--grid-item-size);
|
|
293
|
+
height: var(--grid-item-size);
|
|
276
294
|
overflow: hidden;
|
|
277
295
|
text-indent: 2.1rem;
|
|
278
|
-
background: #eee;
|
|
279
|
-
opacity: 0.8;
|
|
280
296
|
}
|
|
281
297
|
|
|
282
|
-
.color-options .color-option:hover,
|
|
283
298
|
.color-options .color-option:active,
|
|
284
299
|
.color-options .color-option:focus {
|
|
285
|
-
|
|
300
|
+
outline: none;
|
|
286
301
|
}
|
|
287
302
|
|
|
288
|
-
.color-options .color-option
|
|
289
|
-
|
|
290
|
-
|
|
303
|
+
.color-options .color-option::before {
|
|
304
|
+
position: absolute;
|
|
305
|
+
top: 0;
|
|
306
|
+
right: 0;
|
|
307
|
+
bottom: 0;
|
|
308
|
+
left: 0;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.color-options .color-option:hover::before,
|
|
312
|
+
.color-options .color-option:active::before,
|
|
313
|
+
.color-options .color-option:focus::before {
|
|
314
|
+
content: "";
|
|
315
|
+
border: 3px solid rgba(255, 255, 255, 0.75);
|
|
316
|
+
mix-blend-mode: difference;
|
|
291
317
|
}
|
|
292
318
|
|
|
293
319
|
.color-options .color-option:active,
|
|
@@ -295,9 +321,6 @@ color-picker:focus,
|
|
|
295
321
|
box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
|
|
296
322
|
}
|
|
297
323
|
|
|
298
|
-
.color-options .color-option.active {
|
|
299
|
-
opacity: 1;
|
|
300
|
-
}
|
|
301
324
|
.color-options .color-option.active:after {
|
|
302
325
|
position: absolute;
|
|
303
326
|
top: 50%;
|
|
@@ -305,7 +328,7 @@ color-picker:focus,
|
|
|
305
328
|
width: 4px;
|
|
306
329
|
height: 4px;
|
|
307
330
|
margin: -2px 0 0 -2px;
|
|
308
|
-
content: "
|
|
331
|
+
content: "";
|
|
309
332
|
border-radius: 4px;
|
|
310
333
|
}
|
|
311
334
|
|
|
@@ -323,7 +346,7 @@ color-picker:focus,
|
|
|
323
346
|
flex-direction: row;
|
|
324
347
|
flex-wrap: wrap;
|
|
325
348
|
align-items: center;
|
|
326
|
-
padding: 0.
|
|
349
|
+
padding: 0.25rem 0 0;
|
|
327
350
|
font: 12px sans-serif;
|
|
328
351
|
}
|
|
329
352
|
|
|
@@ -421,7 +444,6 @@ color-picker:focus,
|
|
|
421
444
|
background-color: #000;
|
|
422
445
|
border: 1px solid #fff;
|
|
423
446
|
outline: none;
|
|
424
|
-
will-change: transform;
|
|
425
447
|
}
|
|
426
448
|
|
|
427
449
|
.knob:hover {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker RTL v0.0.
|
|
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:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.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-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;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:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.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:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.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{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none}.color-options.scrollable{margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap
|
|
1
|
+
/* ColorPicker RTL v0.0.1alpha3 | thednp © 2022 | MIT-License */
|
|
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:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.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-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;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:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.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:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.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{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;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:height .33s ease}.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 rgba(255,255,255,.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 rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.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:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.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;user-select:none;background-color:#000;border:1px solid #fff;outline:none}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0;border-radius:5px}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.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}[dir=rtl] .color-preview{text-align:right}[dir=rtl] .menu-toggle{right:auto;left:0;border-radius:.25rem 0 0 .25rem}[dir=rtl] .color-dropdown.picker{right:0;left:auto}[dir=rtl] .color-dropdown.menu{right:auto;left:0}[dir=rtl] .color-control+.color-control{margin-right:.5rem;margin-left:0}[dir=rtl] .color-options.scrollable{margin:0 0 0 -0.5rem}
|