@thednp/color-picker 0.0.1-alpha2 → 0.0.1-alpha3
Sign up to get free protection for your applications and to get access to all the features.
- 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}
|