ultra-design/lib/checkbox/checkbox-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, _templateObject2;
var checkboxStyles = function checkboxStyles(props) {
  var disabled = props.disabled,
      theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var _theme$theme$mode = theme[theme.mode],
      backgroundColor = _theme$theme$mode.backgroundColor,
      borderColor = _theme$theme$mode.borderColor,
      textColor = _theme$theme$mode.textColor,
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledBorderColor = _theme$theme$mode.disabledBorderColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    color: ", ";\n\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: ", ";\n    opacity: ", ";\n    width: auto;\n    line-height: 1.5;\n    margin-left: 8px;\n    &:hover .ultra-checkbox__icon {\n      border-color: ", ";\n    }\n    .ultra-checkbox__icon {\n      background-color: ", ";\n      line-height: 1;\n      position: relative;\n      top: 0;\n      left: 0;\n      width: 14px;\n      height: 14px;\n      border: 1px solid ", ";\n      border-radius: 2px;\n      transition: all 0.3s;\n      &:after {\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        left: 21.5%;\n        width: 4px;\n        height: 8px;\n        border: 2px solid #fff;\n        border-top: 0;\n        border-left: 0;\n        transform: rotate(45deg) scale(0) translate(-50%, -50%);\n        opacity: 0;\n        transition: all 0.1s, opacity 0.1s;\n      }\n    }\n    .ultra-checkbox__text {\n      padding: 0 8px;\n      user-select: none;\n      cursor: ", ";\n    }\n    &.ultra-checkbox--checked {\n      .ultra-checkbox__icon {\n        background-color: ", ";\n        border-color: ", ";\n        &:after {\n          border: 2px solid #fff;\n          border-top: 0;\n          border-left: 0;\n          transform: rotate(45deg) scale(1) translate(-50%, -50%);\n          opacity: 1;\n          transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n        }\n      }\n    }\n    &.ultra-checkbox--disabled {\n      .ultra-checkbox__icon {\n        background-color: ", ";\n        border-color: ", ";\n        :after {\n          border-color: ", ";\n        }\n        input {\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n      }\n      .ultra-checkbox__text {\n        color: ", ";\n      }\n    }\n    input {\n      cursor: pointer;\n      opacity: 0;\n      padding: 0;\n      margin: 0;\n      outline: none;\n      position: absolute;\n      z-index: 1;\n      font-size: 0;\n      background-color: transparent;\n    }\n  "])), textColor, disabled ? 'not-allowed' : 'pointer', disabled ? 0.75 : 1, primaryColor, backgroundColor, borderColor, disabled ? 'not-allowed' : 'pointer', primaryColor, primaryColor, disabledBgColor, disabledBorderColor, disabledBorderColor, disabledTextColor);
};
var checkboxGroupStyles = function checkboxGroupStyles(_props) {
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"]([""])));
};

exports.checkboxGroupStyles = checkboxGroupStyles;
exports.checkboxStyles = checkboxStyles;