@vimeo/iris/components/inputs/ColorSelect/Slider.style.esm.js

Vimeo Design System

import { a as __makeTemplateObject } from '../../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { white } from '../../../color/colors.esm.js';
import 'polished';

var hidden = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  box-shadow: none;\n  border-radius: 0px;\n  background: transparent;\n"], ["\n  border: none;\n  box-shadow: none;\n  border-radius: 0px;\n  background: transparent;\n"])));
var SliderStyled = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 1rem;\n  width: 100%;\n  margin: 0;\n  position: absolute;\n  top: 1px;\n  background: rgba(0, 0, 0, 0);\n  left: 0;\n  appearance: none;\n\n  &:focus {\n    outline: none;\n\n    &::-webkit-slider-thumb {\n      border: 0.24rem solid ", ";\n      transform: scale(1.2) translateY(0.75px);\n    }\n  }\n\n  &::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 0px;\n    cursor: pointer;\n    ", ";\n  }\n\n  &::-webkit-slider-thumb {\n    border: 0.25rem solid ", ";\n    height: 36px;\n    width: 36px;\n    border-radius: 20px;\n    background: transparent;\n    cursor: pointer;\n    appearance: none;\n    margin-top: -12.5px;\n    transition: 80ms ease-in-out;\n\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    background: #050505;\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    height: 1px;\n    cursor: pointer;\n    box-shadow: none;\n    ", ";\n  }\n\n  &::-moz-range-thumb {\n    ", ";\n    height: 26px;\n    width: 26px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    width: 100%;\n    height: 1px;\n    cursor: pointer;\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n  }\n\n  &::-ms-fill-lower {\n    ", ";\n  }\n\n  &::-ms-fill-upper {\n    ", ";\n  }\n\n  &::-ms-thumb {\n    ", ";\n    height: 26px;\n    width: 26px;\n    cursor: pointer;\n  }\n\n  &:focus::-ms-fill-lower {\n    background: #000000;\n  }\n\n  &:focus::-ms-fill-upper {\n    background: #050505;\n  }\n"], ["\n  height: 1rem;\n  width: 100%;\n  margin: 0;\n  position: absolute;\n  top: 1px;\n  background: rgba(0, 0, 0, 0);\n  left: 0;\n  appearance: none;\n\n  &:focus {\n    outline: none;\n\n    &::-webkit-slider-thumb {\n      border: 0.24rem solid ", ";\n      transform: scale(1.2) translateY(0.75px);\n    }\n  }\n\n  &::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 0px;\n    cursor: pointer;\n    ", ";\n  }\n\n  &::-webkit-slider-thumb {\n    border: 0.25rem solid ", ";\n    height: 36px;\n    width: 36px;\n    border-radius: 20px;\n    background: transparent;\n    cursor: pointer;\n    appearance: none;\n    margin-top: -12.5px;\n    transition: 80ms ease-in-out;\n\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    background: #050505;\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    height: 1px;\n    cursor: pointer;\n    box-shadow: none;\n    ", ";\n  }\n\n  &::-moz-range-thumb {\n    ", ";\n    height: 26px;\n    width: 26px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    width: 100%;\n    height: 1px;\n    cursor: pointer;\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n  }\n\n  &::-ms-fill-lower {\n    ", ";\n  }\n\n  &::-ms-fill-upper {\n    ", ";\n  }\n\n  &::-ms-thumb {\n    ", ";\n    height: 26px;\n    width: 26px;\n    cursor: pointer;\n  }\n\n  &:focus::-ms-fill-lower {\n    background: #000000;\n  }\n\n  &:focus::-ms-fill-upper {\n    background: #050505;\n  }\n"])), white, hidden, white, function (p) {
    return p.theme.name === 'dark'
        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2),\n              inset 0 0 2px 2px rgba(0, 0, 0, 0.15);\n          "], ["\n            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2),\n              inset 0 0 2px 2px rgba(0, 0, 0, 0.15);\n          "]))) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.275),\n              inset 0 0 2px 2px rgba(0, 0, 0, 0.2334);\n          "], ["\n            box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.275),\n              inset 0 0 2px 2px rgba(0, 0, 0, 0.2334);\n          "])));
}, hidden, hidden, hidden, hidden, hidden);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

export { SliderStyled, hidden };