alwan
Version:
A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.
1 lines • 12.9 kB
Source Map (JSON)
{"version":3,"sources":["alwan.scss"],"names":[],"mappings":"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","file":"alwan.min.css","sourcesContent":[":root {\n --alwan-pattern: url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'><path fill='%23D0D0D0' d='M0 0h10v10H0Z'/><path fill='%23fff' d='M0 10h10v10H0Z'/><path fill='%23D0D0D0' d='M10 10h10v10H10Z'/><path fill='%23fff' d='M10 0h10v10H10Z'/></svg>\");\n}\n\n.alwan {\n --bg: #fff;\n --fg: #333;\n --outer-bc: #ccc;\n --bc: #ccc;\n --btn-bg-hover: #f0f0f0;\n --thumb-bg: #fff;\n --thumb-bg-hover: #f0f0f0;\n --label-color: #555;\n --input-bg: #fafafa;\n --input-bg-hover: #f0f0f0;\n --input-bc-hover: #a8a8a8;\n --swatches-bg: #f5f5f5;\n width: 260px;\n max-width: 260px;\n background: var(--bg);\n border: 1px solid var(--outer-bc);\n overflow: hidden;\n}\n.alwan * {\n box-sizing: border-box;\n}\n.alwan > div {\n width: 260px;\n}\n.alwan__popover-container {\n transform: translate(0);\n width: 0;\n height: 0;\n}\n.alwan__popover-container > .alwan {\n position: fixed;\n height: auto;\n top: 0;\n left: 0;\n z-index: 999999;\n border: 0;\n overflow: auto;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n.alwan:not(.alwan--open) {\n visibility: hidden;\n overflow: hidden;\n height: 0;\n}\n.alwan.alwan--dark {\n --bg: #111;\n --fg: #ccc;\n --outer-bc: #aaa;\n --bc: #34373a;\n --btn-bg-hover: #444;\n --thumb-bg: #151515;\n --thumb-bg-hover: #242424;\n --label-color: #d8d8d8;\n --input-bg: #181818;\n --input-bg-hover: #272727;\n --input-bc-hover: #484b4d;\n --swatches-bg: #151515;\n}\n.alwan__container {\n position: relative;\n display: flex;\n align-items: center;\n padding: 10px 15px;\n border-top: 1px solid var(--bc);\n}\n.alwan__container > * {\n width: 100%;\n}\n.alwan__selector {\n overflow: hidden;\n height: 136px;\n outline: 0;\n touch-action: none;\n user-select: none;\n background: linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(var(--h, 0), 100%, 50%));\n}\n.alwan__selector:focus .alwan__cursor {\n box-shadow: 0 0 1px 2px #117ce0;\n}\n.alwan__selector[tabindex] {\n cursor: crosshair;\n}\n.alwan__selector[tabindex]:active, .alwan__selector[tabindex]:active > .alwan__cursor {\n cursor: grabbing;\n}\n.alwan__selector[tabindex] .alwan__cursor {\n cursor: grab;\n cursor: -webkit-grab;\n}\n.alwan__cursor {\n position: relative;\n top: -8px;\n left: -8px;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n background: transparent;\n border: 2px solid #fff;\n box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);\n}\n.alwan__preview {\n --color: rgb(var(--rgb), var(--a));\n width: 42px;\n height: 42px;\n margin-right: 15px;\n border: 1px solid var(--bc);\n border-radius: 5px;\n flex-shrink: 0;\n}\n.alwan__preview .alwan__cp {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n color: #fff;\n opacity: 0;\n border-radius: 0;\n margin: 0;\n}\n.alwan__preview .alwan__cp:focus, .alwan__preview .alwan__cp:hover:not(:disabled) {\n opacity: 1;\n z-index: 100;\n background-color: rgba(0, 0, 0, 0.6);\n}\n.alwan__preview .alwan__cp:focus-visible {\n border: 0;\n}\n.alwan__slider {\n --hue-track: linear-gradient(\n 90deg,\n #ff0000,\n #ff00ff,\n #0000ff,\n #00ffff,\n #00ff00,\n #ffff00,\n #ff0000\n );\n --alpha-track:\n linear-gradient(90deg, transparent, rgb(var(--rgb))),\n var(--alwan-pattern);\n display: block;\n width: 100%;\n height: 15px;\n background-color: transparent;\n margin: 0;\n padding: 0;\n cursor: pointer;\n outline: 0;\n -webkit-appearance: none;\n appearance: none;\n touch-action: none;\n user-select: none;\n}\n.alwan__slider:active {\n cursor: grabbing;\n cursor: -webkit-grabbing;\n}\n.alwan__slider::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 15px;\n border: 0;\n border-radius: 8px;\n}\n.alwan__slider::-moz-range-track {\n width: 100%;\n height: 15px;\n border: 0;\n border-radius: 8px;\n}\n.alwan__slider:focus-visible::-webkit-slider-runnable-track {\n outline: 2px solid rgba(17, 124, 224, 0.5);\n outline-offset: 2px;\n}\n.alwan__slider:focus-visible::-moz-range-track {\n outline: 2px solid rgba(17, 124, 224, 0.5);\n outline-offset: 2px;\n}\n.alwan__slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-top: -2.5px;\n height: 20px;\n width: 20px;\n border: 1px solid #999;\n border-radius: 100%;\n background-color: var(--thumb-bg);\n box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);\n}\n.alwan__slider::-moz-range-thumb {\n box-sizing: border-box;\n padding: 0;\n height: 20px;\n width: 20px;\n border: 1px solid #999;\n border-radius: 100%;\n background-color: var(--thumb-bg);\n box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);\n}\n.alwan__slider:not(:disabled)::-webkit-slider-thumb:hover {\n cursor: grab;\n cursor: -webkit-grab;\n border-color: #555;\n background: var(--thumb-bg-hover);\n}\n.alwan__slider:not(:disabled)::-moz-range-thumb:hover {\n cursor: grab;\n cursor: -webkit-grab;\n border-color: #555;\n background: var(--thumb-bg-hover);\n}\n.alwan__slider:active:not(:disabled)::-webkit-slider-thumb {\n cursor: grabbing;\n cursor: -webkit-grabbing;\n outline: 5px solid rgba(17, 124, 224, 0.3);\n}\n.alwan__slider:active:not(:disabled)::-moz-range-thumb {\n cursor: grabbing;\n cursor: -webkit-grabbing;\n outline: 5px solid rgba(17, 124, 224, 0.3);\n}\n.alwan__slider:focus::-webkit-slider-thumb {\n border-color: #117ce0;\n}\n.alwan__slider:focus::-moz-range-thumb {\n border-color: #117ce0;\n}\n.alwan__slider:disabled {\n opacity: 0.5;\n cursor: default;\n}\n.alwan__hue {\n direction: rtl;\n}\n.alwan__hue::-webkit-slider-runnable-track {\n background: var(--hue-track);\n}\n.alwan__hue::-moz-range-track {\n background: var(--hue-track);\n}\n.alwan__alpha {\n margin-top: 14px;\n}\n.alwan__alpha::-webkit-slider-runnable-track {\n background: var(--alpha-track);\n}\n.alwan__alpha::-moz-range-track {\n background: var(--alpha-track);\n}\n.alwan__inputs {\n display: flex;\n}\n.alwan__inputs > label {\n width: 100%;\n text-align: center;\n margin-right: 4px;\n text-transform: uppercase;\n color: var(--label-color);\n cursor: pointer;\n line-height: 1;\n font-family: system-ui;\n font-size: 13px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.alwan__input {\n display: block;\n width: 100%;\n padding: 8px 0;\n text-align: center;\n color: var(--fg);\n font-size: 14px;\n font-family: monospace;\n border: 1px solid var(--bc);\n margin-bottom: 3px;\n background-color: var(--input-bg);\n line-height: 1;\n border-radius: 2px;\n transition: border-color 0.2s, background-color 0.2s;\n}\n.alwan__input::selection {\n color: #fff;\n background-color: #117ce0;\n}\n.alwan__input:focus {\n outline: 0;\n border-color: #117ce0;\n background-color: var(--bg);\n}\n.alwan__input:focus + span {\n color: #117ce0;\n}\n.alwan__input:hover:not(:focus, :disabled) {\n background-color: var(--input-bg-hover);\n border-color: var(--input-bc-hover);\n}\n.alwan__input:disabled, .alwan__input:disabled + span {\n opacity: 0.5;\n}\n.alwan__swatches {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n background-color: var(--swatches-bg);\n padding: 10px 15px 0 15px;\n max-height: 100px;\n overflow-y: auto;\n border-top: 1px solid var(--bc);\n}\n.alwan__button {\n display: inline-block;\n width: auto;\n background: transparent;\n color: var(--fg);\n border: 1px solid transparent;\n cursor: pointer;\n padding: 8px 4px;\n transition: background-color 0.2s ease-in-out;\n outline: 0;\n}\n.alwan__button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.alwan__button:hover:not(:disabled) {\n background-color: var(--btn-bg-hover);\n}\n.alwan__button:focus-visible:not(.alwan__ref) {\n border-color: #117ce0;\n}\n.alwan__button svg {\n fill: currentColor;\n pointer-events: none;\n vertical-align: middle;\n}\n.alwan__swatch {\n width: 22px;\n height: 22px;\n margin: 0 5px 10px 5px;\n border-radius: 3px;\n}\n.alwan__swatch:hover:not(:disabled) {\n transform: scale(1.1);\n}\n.alwan__swatch:focus {\n outline: 1px solid var(--color);\n outline-offset: 1px;\n}\n.alwan__ref {\n width: 26px;\n height: 26px;\n border-radius: 3px;\n border: 3px solid #f5f5f5;\n outline: 1px solid #333;\n flex-shrink: 0;\n}\n.alwan__ref:focus, .alwan__ref:focus-visible {\n outline-color: #117ce0;\n box-shadow: 0 0 2px 2px #117ce0;\n}\n.alwan__cp {\n margin-right: 15px;\n}\n.alwan__swatch, .alwan__preview, .alwan__ref {\n position: relative;\n background: var(--alwan-pattern);\n background-clip: padding-box;\n overflow: hidden;\n padding: 0;\n}\n.alwan__swatch::before, .alwan__preview::before, .alwan__ref::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color);\n}\n.alwan__toggle-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 0;\n height: 10px;\n border-top: 1px solid var(--bc);\n overflow: hidden;\n}\n.alwan--collapse.alwan__swatches {\n display: none;\n}\n.alwan--collapse + .alwan__toggle-button svg {\n transform: rotate(180deg);\n}"]}