@nethesis/phone-island/dist/styles/CustomRange.styles.js

NethVoice CTI Phone Island

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,r=require("../node_modules/tslib/tslib.es6.js"),e=require("../node_modules/styled-components/dist/styled-components.browser.esm.js").default.input.attrs({type:"range"})(n||(n=r.__makeTemplateObject(["\n  font-size: 1.5rem;\n  width: 100%;\n  --thumb-height: 0.75rem;\n  --track-height: 0.125rem;\n  --track-color: #6b7280;\n  --clip-edges: 0.125rem;\n\n  position: relative;\n  background: #fff0;\n  overflow: hidden;\n  appearance: none;\n  margin: 0;\n\n  &:active {\n    cursor: grabbing;\n  }\n\n  &:disabled {\n    filter: grayscale(1);\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  /* === WebKit specific styles === */\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: var(--thumb-height);\n    --thumb-radius: calc((var(--thumb-height) * 0.5) - 0.0625rem);\n    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.0313rem);\n    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n    --clip-further: calc(100% + 0.0625rem);\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%\n      calc(var(--track-height) + 0.0625rem);\n    background-color: currentColor;\n    box-shadow: var(--box-fill);\n    border-radius: var(--thumb-width, var(--thumb-height));\n\n    clip-path: polygon(\n      100% -0.0625rem,\n      var(--clip-edges) -0.0625rem,\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  &::-webkit-slider-runnable-track {\n    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100%\n      calc(var(--track-height) + 0.0625rem);\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n  }\n\n  /* === Firefox specific styles === */\n  -moz-appearance: none;\n  transition: all ease 100ms;\n  height: var(--thumb-height);\n\n  &::-moz-range-thumb {\n    background: currentColor;\n    border: 0;\n    width: var(--thumb-width, var(--thumb-height));\n    border-radius: var(--thumb-width, var(--thumb-height));\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    background: var(--track-color);\n  }\n\n  &::-moz-range-progress {\n    appearance: none;\n    background: currentColor;\n    transition-delay: 30ms;\n  }\n\n  &::-moz-range-track,\n  &::-moz-range-progress {\n    height: calc(var(--track-height) + 0.0625rem);\n    border-radius: var(--track-height);\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n  }\n"],["\n  font-size: 1.5rem;\n  width: 100%;\n  --thumb-height: 0.75rem;\n  --track-height: 0.125rem;\n  --track-color: #6b7280;\n  --clip-edges: 0.125rem;\n\n  position: relative;\n  background: #fff0;\n  overflow: hidden;\n  appearance: none;\n  margin: 0;\n\n  &:active {\n    cursor: grabbing;\n  }\n\n  &:disabled {\n    filter: grayscale(1);\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  /* === WebKit specific styles === */\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: var(--thumb-height);\n    --thumb-radius: calc((var(--thumb-height) * 0.5) - 0.0625rem);\n    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.0313rem);\n    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n    --clip-further: calc(100% + 0.0625rem);\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%\n      calc(var(--track-height) + 0.0625rem);\n    background-color: currentColor;\n    box-shadow: var(--box-fill);\n    border-radius: var(--thumb-width, var(--thumb-height));\n\n    clip-path: polygon(\n      100% -0.0625rem,\n      var(--clip-edges) -0.0625rem,\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  &::-webkit-slider-runnable-track {\n    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100%\n      calc(var(--track-height) + 0.0625rem);\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n  }\n\n  /* === Firefox specific styles === */\n  -moz-appearance: none;\n  transition: all ease 100ms;\n  height: var(--thumb-height);\n\n  &::-moz-range-thumb {\n    background: currentColor;\n    border: 0;\n    width: var(--thumb-width, var(--thumb-height));\n    border-radius: var(--thumb-width, var(--thumb-height));\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    background: var(--track-color);\n  }\n\n  &::-moz-range-progress {\n    appearance: none;\n    background: currentColor;\n    transition-delay: 30ms;\n  }\n\n  &::-moz-range-track,\n  &::-moz-range-progress {\n    height: calc(var(--track-height) + 0.0625rem);\n    border-radius: var(--track-height);\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n  }\n"])));exports.StyledCustomRange=e;
//# sourceMappingURL=CustomRange.styles.js.map