@vimeo/iris/components/inputs/ColorSelect2/Slider.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var color_colors = require('../../../color/colors.js');
require('polished');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var hidden = styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__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__default["default"].input(templateObject_4 || (templateObject_4 = tslib_es6.__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"])), color_colors.white, hidden, color_colors.white, function (p) {
    return p.theme.name === 'dark'
        ? styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__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          "]))) : styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__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;

exports.SliderStyled = SliderStyled;
exports.hidden = hidden;