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

Vimeo Design System

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

var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 1rem;\n  position: relative;\n  width: ", "px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n\n  .react-colorful {\n    width: auto;\n    height: auto;\n  }\n\n  .react-colorful__saturation,\n  .react-colorful__hue {\n    border-radius: 5px;\n  }\n\n  .react-colorful__saturation {\n    height: ", "px;\n  }\n\n  .react-colorful__hue {\n    display: ", ";\n    margin: 1.5rem 0 0;\n    border-radius: 1rem;\n  }\n\n  .react-colorful__saturation-pointer {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n"], ["\n  padding: 1rem;\n  position: relative;\n  width: ", "px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n\n  .react-colorful {\n    width: auto;\n    height: auto;\n  }\n\n  .react-colorful__saturation,\n  .react-colorful__hue {\n    border-radius: 5px;\n  }\n\n  .react-colorful__saturation {\n    height: ", "px;\n  }\n\n  .react-colorful__hue {\n    display: ", ";\n    margin: 1.5rem 0 0;\n    border-radius: 1rem;\n  }\n\n  .react-colorful__saturation-pointer {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n"])), function (p) { return p.width; }, function (_a) {
    var height = _a.height;
    return height;
}, function (_a) {
    var showHueSlider = _a.showHueSlider;
    return showHueSlider ? 'block' : 'none';
});
var Dot = styled.div(templateObject_3 || (templateObject_3 = __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 templateObject_1, templateObject_2, templateObject_3;

export { Dot, InputWrapper, Wrapper };