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

Vimeo Design System

import { a as __makeTemplateObject } from '../../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rgba, rem } from 'polished';

var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
var Dot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  margin: 0 1rem;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: -0.375rem;\n  z-index: 10;\n  border: 0.5px solid ", ";\n"], ["\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  margin: 0 1rem;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: -0.375rem;\n  z-index: 10;\n  border: 0.5px solid ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return rgba(theme.content.color, 0.1);
});
var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0;\n  position: relative;\n  width: ", "px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n"], ["\n  padding: 0;\n  position: relative;\n  width: ", "px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n"])), function (p) { return p.width; });
var SpectrumWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  width: calc(100% + 8rem);\n\n  ", ";\n"], ["\n  position: relative;\n  width: calc(100% + 8rem);\n\n  ", ";\n"])), function (p) {
    return p.dragging
        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          padding: 4rem 8rem;\n          top: -4rem;\n          left: -8rem;\n        "], ["\n          padding: 4rem 8rem;\n          top: -4rem;\n          left: -8rem;\n        "]))) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          padding: 0 0;\n          top: 0;\n          left: 0;\n        "], ["\n          padding: 0 0;\n          top: 0;\n          left: 0;\n        "])));
});
var Cursor = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 1.25rem;\n  pointer-events: none;\n  border: 0.125rem solid white;\n  border-radius: 50%;\n  position: absolute;\n  left: -0.625rem;\n  top: -0.625rem;\n  z-index: 4001;\n"], ["\n  width: 1.25rem;\n  height: 1.25rem;\n  pointer-events: none;\n  border: 0.125rem solid white;\n  border-radius: 50%;\n  position: absolute;\n  left: -0.625rem;\n  top: -0.625rem;\n  z-index: 4001;\n"])));
var lightRay = function (color, dir, el) { return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", " {\n    content: '';\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    border-radius: 0.25rem 0.25rem 0 0;\n    background: linear-gradient(to ", ", ", ", transparent);\n  }\n"], ["\n  ", " {\n    content: '';\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    border-radius: 0.25rem 0.25rem 0 0;\n    background: linear-gradient(to ", ", ", ", transparent);\n  }\n"])), el, dir, color); };
var HueSpectrum = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  position: relative;\n  border-radius: 0.25rem 0.25rem 0 0;\n  cursor: pointer;\n\n  ", ";\n  ", ";\n\n  &:active {\n    cursor: none;\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  position: relative;\n  border-radius: 0.25rem 0.25rem 0 0;\n  cursor: pointer;\n\n  ", ";\n  ", ";\n\n  &:active {\n    cursor: none;\n  }\n"])), function (props) { return rem(props.width); }, function (props) { return rem(props.height + 1); }, lightRay('#FFF', 'right', '&::before'), lightRay('#000', 'top', '&::after'));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

export { Cursor, Dot, HueSpectrum, InputWrapper, SpectrumWrapper, Wrapper, lightRay };