gradient-generator-ui/dist/gradient-generator.css

Library to create a gradient generator in vanilla-js with interactive user interface in html

.gg-control{height:100%;grid-column:1;grid-row:1;pointer-events:none}.gg-control .gg-control-delete,.gg-control .gg-control-value{pointer-events:auto;cursor:pointer;position:absolute;left:var(--pos-left);transform:translateX(-50%)}.gg-control .gg-control-delete{--gb-color: #fff;--color: #000;border:1px solid var(--color);cursor:pointer;border-radius:50%;padding:3px 7px;background:var(--gb-color);color:var(--color);top:10px}.gg-control .gg-control-value{width:25px;bottom:10px}.gg-control .gg-control-value::-webkit-color-swatch-wrapper{padding:0}.gg-control .gg-control-value::-webkit-color-swatch{border:none}.gg-control .gg-control-position{--gb-color: #fff;--color: #000;width:100%;height:100%;margin:0;background:none;pointer-events:none;outline:none;-webkit-appearance:none;appearance:none}.gg-control .gg-control-position::-webkit-slider-thumb,.gg-control .gg-control-position::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none}.gg-control .gg-control-position::-webkit-slider-thumb{width:10px;height:100%;border-radius:10px;background:var(--gb-color);border:1px solid var(--color);pointer-events:auto;cursor:pointer}.gg-control .gg-control-position::-webkit-slider-runnable-track{width:100%;height:100%}.gg-control .gg-control-position::-moz-range-thumb,.gg-control .gg-control-position::-moz-range-track{-webkit-appearance:none;appearance:none}.gg-control .gg-control-position::-moz-range-thumb{width:10px;height:100%;border-radius:10px;background:var(--gb-color);border:1px solid var(--color);pointer-events:auto;cursor:pointer}.gg-control .gg-control-position::-moz-range-track{width:100%;height:100%}.gg-control .gg-control-position::-ms-track,.gg-control .gg-control-position::-ms-thumb{-webkit-appearance:none;appearance:none}.gg-control .gg-control-position::-ms-track{width:100%;height:100%}.gg-control .gg-control-position::-ms-thumb{width:10px;height:100%;border-radius:10px;background:var(--gb-color);border:1px solid var(--color);pointer-events:auto;cursor:pointer}@media(min-width: 586px){.gg-control .gg-control-value{width:15px}.gg-control .gg-control-position::-webkit-slider-thumb{width:15px}.gg-control .gg-control-position::-moz-range-thumb{width:15px}.gg-control .gg-control-position::-ms-thumb{width:15px}}.gg-control .gg-control-delete,.gg-control .gg-control-value{opacity:.4;outline:none}.gg-control .gg-control-position::-webkit-slider-thumb{opacity:.4;outline:none}.gg-control .gg-control-position::-moz-range-thumb{opacity:.4;outline:none}.gg-control .gg-control-position::-ms-thumb{opacity:.4;outline:none}.gg-control .gg-control-delete:hover,.gg-control .gg-control-value:hover{opacity:1}.gg-control .gg-control-position:hover::-webkit-slider-thumb{opacity:1}.gg-control .gg-control-position:hover::-moz-range-thumb{opacity:1}.gg-control .gg-control-position:hover::-ms-thumb{opacity:1}.gg-control .gg-control-delete:focus,.gg-control .gg-control-value:focus{opacity:1;filter:brightness(0.9)}.gg-control .gg-control-position:focus{outline:none}.gg-control .gg-control-position:focus::-webkit-slider-thumb{opacity:1;filter:brightness(0.9)}.gg-control .gg-control-position:focus::-moz-range-thumb{opacity:1;filter:brightness(0.9)}.gg-control .gg-control-position:focus::-ms-thumb{opacity:1;filter:brightness(0.9)}.gg-container{min-height:150px;padding:3em 0;display:grid;position:relative;border-radius:4px;border:1px solid #aaa;overflow:hidden}.gg-container,.gg-container *{box-sizing:border-box}.gg-add{cursor:crosshair}.gg-add::after{content:"+";font-size:100px;font-weight:bold;background:#0007;color:#fff;display:grid;place-items:center;position:absolute;z-index:10;top:0;left:0;width:100%;height:100%}

/*# sourceMappingURL=gradient-generator.css.map*/