UNPKG

svelte-chroma-picker

Version:

A color picker for Svelte using chroma-js to do the color manipulations

17 lines (16 loc) 2.58 kB
[role='presentation'].svelte-1rsulyd.svelte-1rsulyd{background:rgb(var(--color-red), var(--color-green), var(--color-blue));box-shadow:rgba(0, 0, 0, 0.06) 0 0 0 1px;height:var(--height);width:var(--width)}[data-picker='saturation'].svelte-1rsulyd.svelte-1rsulyd{background:linear-gradient( to right, rgb(255, 255, 255), rgba(255, 255, 255, 0) );height:var(--height);width:var(--width)}[data-picker='value'].svelte-1rsulyd.svelte-1rsulyd{background:linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));height:var(--height);overflow:hidden;width:var(--width)}[data-picker='handle'].svelte-1rsulyd.svelte-1rsulyd{background:transparent;border-radius:50%;border:2px solid #f2f2f2;box-shadow:0 0.3px 1.4px rgba(0, 0, 0, 0.6), 0 0.9px 4.7px rgba(0, 0, 0, 0.032), 0 4px 21px rgba(0, 0, 0, 0.04);cursor:crosshair;height:8px;left:100%;margin:0;padding:0;position:relative;transform:translate(-9px, -9px);width:8px;top:var(--top, 50%);left:var(--left, 50%)}[data-picker='colorBox'].svelte-1rsulyd.svelte-1rsulyd{box-shadow:0 0 1px rgba(0, 0, 0, 0.32) inset;cursor:crosshair;display:block;height:100%;position:relative;transform:translate(0, -16px);touch-action:none;width:100%}label.svelte-1rsulyd.svelte-1rsulyd{display:block;margin:0.8em 0;max-width:calc(var(--width) - 4px);width:calc(var(--width) - 4px)}label.svelte-1rsulyd span.svelte-1rsulyd{border:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}input.svelte-1rsulyd.svelte-1rsulyd{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255, 255, 255, 0);background:linear-gradient( to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100% );border-radius:6px;border:none;box-shadow:rgba(0, 0, 0, 0.06) 0 0 0 1px inset;height:12px;outline:none;padding:1px 2px;width:100%}input.svelte-1rsulyd.svelte-1rsulyd::-moz-range-track{background:transparent;border:inherit}input.svelte-1rsulyd.svelte-1rsulyd::-ms-track{background:transparent;border:inherit;color:transparent}input.svelte-1rsulyd.svelte-1rsulyd::-ms-fill-lower,input.svelte-1rsulyd.svelte-1rsulyd::-ms-fill-upper{background:transparent}input.svelte-1rsulyd.svelte-1rsulyd::-ms-tooltip{display:none}input.svelte-1rsulyd.svelte-1rsulyd::-webkit-slider-thumb,input.svelte-1rsulyd.svelte-1rsulyd::-moz-range-thumb{-webkit-appearance:none;background:#fff;box-shadow:rgba(0, 0, 0, 0.12) 0 0 0 1px inset;border-radius:10px;border:none;height:10px;width:10px} /*# sourceMappingURL=index.css.map */