infinity-forge/dist/ui/components/form/input-range/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputRange = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.InputRange = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  label {\n    margin-bottom: 20px;\n  }\n\n  input {\n    padding: 0;\n    border: none;\n  }\n\n  span {\n    font-size: 14px;\n  }\n\n  .value-box {\n    position: relative;\n  }\n\n  .value_actual {\n    position: absolute;\n    top: 0;\n  }\n\n  .values_input_range {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  input[type='range'] {\n    font-size: 1.5rem;\n    width: 100%;\n  }\n\n  input[type='range'] {\n    color: ", ";\n    --thumb-height: 14px;\n    --track-height: 0.14em;\n    --track-color: #dcdcdc;\n    --brightness-hover: 180%;\n    --brightness-down: 80%;\n    --clip-edges: 0.125em;\n  }\n\n  input[type='range'] {\n    position: relative;\n    background: #fff0;\n    overflow: hidden;\n  }\n\n  input[type='range']:active {\n    cursor: grabbing;\n  }\n\n  input[type='range']:disabled {\n    filter: grayscale(1);\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  /* === WebKit specific styles === */\n  input[type='range'],\n  input[type='range']::-webkit-slider-runnable-track,\n  input[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    transition: all ease 100ms;\n    height: var(--thumb-height);\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n    --clip-further: calc(100% + 1px);\n    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;\n\n    width: var(--thumb-width, var(--thumb-height));\n    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n    background-color: currentColor;\n    box-shadow: var(--box-fill);\n    border-radius: var(--thumb-width, var(--thumb-height));\n    height: 1.4rem;\n    width: 1.4rem;\n\n    filter: brightness(100%);\n    clip-path: polygon(\n      100% -1px,\n      var(--clip-edges) -1px,\n      0 var(--clip-top),\n      -100vmax var(--clip-top),\n      -100vmax var(--clip-bottom),\n      0 var(--clip-bottom),\n      var(--clip-edges) 100%,\n      var(--clip-further) var(--clip-further)\n    );\n  }\n\n  input[type='range']::-webkit-slider-runnable-track {\n    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n  }\n"], ["\n  label {\n    margin-bottom: 20px;\n  }\n\n  input {\n    padding: 0;\n    border: none;\n  }\n\n  span {\n    font-size: 14px;\n  }\n\n  .value-box {\n    position: relative;\n  }\n\n  .value_actual {\n    position: absolute;\n    top: 0;\n  }\n\n  .values_input_range {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  input[type='range'] {\n    font-size: 1.5rem;\n    width: 100%;\n  }\n\n  input[type='range'] {\n    color: ", ";\n    --thumb-height: 14px;\n    --track-height: 0.14em;\n    --track-color: #dcdcdc;\n    --brightness-hover: 180%;\n    --brightness-down: 80%;\n    --clip-edges: 0.125em;\n  }\n\n  input[type='range'] {\n    position: relative;\n    background: #fff0;\n    overflow: hidden;\n  }\n\n  input[type='range']:active {\n    cursor: grabbing;\n  }\n\n  input[type='range']:disabled {\n    filter: grayscale(1);\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  /* === WebKit specific styles === */\n  input[type='range'],\n  input[type='range']::-webkit-slider-runnable-track,\n  input[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    transition: all ease 100ms;\n    height: var(--thumb-height);\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n    --clip-further: calc(100% + 1px);\n    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;\n\n    width: var(--thumb-width, var(--thumb-height));\n    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n    background-color: currentColor;\n    box-shadow: var(--box-fill);\n    border-radius: var(--thumb-width, var(--thumb-height));\n    height: 1.4rem;\n    width: 1.4rem;\n\n    filter: brightness(100%);\n    clip-path: polygon(\n      100% -1px,\n      var(--clip-edges) -1px,\n      0 var(--clip-top),\n      -100vmax var(--clip-top),\n      -100vmax var(--clip-bottom),\n      0 var(--clip-bottom),\n      var(--clip-edges) 100%,\n      var(--clip-further) var(--clip-further)\n    );\n  }\n\n  input[type='range']::-webkit-slider-runnable-track {\n    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n  }\n"])), function (p) { return p.theme.primaryColor; });
var templateObject_1;
//# sourceMappingURL=styles.js.map