ultra-design/lib/color-picker/color-picker-styles.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');

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

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject;
var colorPickerStyles = function colorPickerStyles(props) {
  var theme = props.theme;
  var radius = theme.style.radius;
  var textColor = props.theme[props.theme.mode].textColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    color: ", ";\n    width: 200px;\n    .ultra-color-picker__basic_color {\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      &-item {\n        border-radius: ", "px;\n        width: 16px;\n        height: 16px;\n        cursor: pointer;\n      }\n    }\n    .ultra-color-picker_saturation {\n      width: 100%;\n      position: relative;\n      margin-top: 15px;\n      height: 150px;\n      background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n      user-select: none;\n      &_cursor {\n        position: absolute;\n        width: 20px;\n        height: 20px;\n        border: 2px solid #ffffff;\n        border-radius: 50%;\n        box-shadow: 0 0 15px #00000026;\n        box-sizing: border-box;\n        transform: translate(-10px, -10px);\n      }\n    }\n    .ultra-color-picker_hue {\n      width: 100%;\n      position: relative;\n      margin-top: 15px;\n      height: 12px;\n      background-image: linear-gradient(\n        to right,\n        rgb(255, 0, 0),\n        rgb(255, 255, 0),\n        rgb(0, 255, 0),\n        rgb(0, 255, 255),\n        rgb(0, 0, 255),\n        rgb(255, 0, 255),\n        rgb(255, 0, 0)\n      );\n      user-select: none;\n      border-radius: ", "px;\n\n      &_cursor {\n        position: absolute;\n        width: 20px;\n        height: 20px;\n        border: 2px solid #ffffff;\n        border-radius: 50%;\n        box-shadow: #0003 0 0 0 0.5px;\n        box-sizing: border-box;\n        transform: translate(-10px, -4px);\n      }\n    }\n\n    .ultra-color-picker_opacity {\n      width: 100%;\n      margin-top: 10px;\n      position: relative;\n      height: 12px;\n      user-select: none;\n      border-radius: ", "px;\n      &_cursor {\n        position: absolute;\n        width: 20px;\n        height: 20px;\n        border: 2px solid #ffffff;\n        border-radius: 50%;\n        box-shadow: #0003 0 0 0 0.5px;\n        box-sizing: border-box;\n        transform: translate(-10px, -4px);\n      }\n    }\n    .ultra-color-picker_input {\n      .ultra-input-with_label {\n        margin-top: 10px;\n        .ultra-input {\n          padding: 2px 4px;\n        }\n      }\n    }\n  "])), textColor, radius, radius, radius);
};

exports.colorPickerStyles = colorPickerStyles;