ultra-design/lib/button/button-style.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, _templateObject3, _templateObject4;
var buttonSizeStyleMap = {
  mini: {
    height: 24,
    padding: '0px 6px'
  },
  small: {
    height: 28,
    padding: '2px 10px'
  },
  middle: {
    height: 32,
    padding: '4px 15px'
  },
  large: {
    height: 36,
    padding: '6px 20px'
  },
  larger: {
    height: 40,
    padding: '6px 25px'
  }
};

var buttonTypeStyleMap = function buttonTypeStyleMap(props) {
  var theme = props.theme,
      type = props.type,
      status = props.status;
  var _props$theme = props.theme,
      mode = _props$theme.mode,
      style = _props$theme.style;
  var _theme$mode = theme[mode],
      backgroundColor = _theme$mode.backgroundColor,
      textColor = _theme$mode.textColor,
      borderColor = _theme$mode.borderColor;
  var primaryColor = status ? style[status + 'Color'] : theme.style.primaryColor;
  var bgColor = status ? primaryColor : type === 'primary' ? primaryColor : backgroundColor;
  var txtColor = status ? '#fff' : type === 'primary' ? '#fff' : textColor;
  var bdColor = ['text', 'primary'].includes(type) ? 'transparent' : borderColor;
  var baseStyle = "\n    background-color: ".concat(bgColor, ";\n    color: ").concat(txtColor, ";\n    border-color: ").concat(bdColor, ";\n  ");

  if (type === 'text') {
    baseStyle += "\n      border: none;\n      color: ".concat(primaryColor, ";\n      background-color: unset;\n    ");
  } else if (type === 'dashed') {
    baseStyle += "border: 1px dashed #ccc;";
  } else if (type === 'primary') {
    baseStyle += "border-color: transparent;";
  } else if (type === 'pure') {
    baseStyle += "border: none;";
  }

  return baseStyle;
};

var loadingLayer = function loadingLayer() {
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &::before {\n    position: absolute;\n    inset: -1px;\n    z-index: 2;\n    display: block;\n    background: #fff;\n    border-radius: inherit;\n    opacity: 0.35;\n    transition: opacity 0.2s;\n    content: '';\n    pointer-events: none;\n  }\n"])));
};

var disabledStyles = function disabledStyles(props) {
  var theme = props.theme,
      type = props.type;
  var _theme$theme$mode = theme[theme.mode],
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor,
      disabledBorderColor = _theme$theme$mode.disabledBorderColor;
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    border-color: ", ";\n    background-color: ", ";\n    color: ", ";\n  "])), disabledBorderColor, type !== 'text' && disabledBgColor, disabledTextColor);
};

var buttonStyles = function buttonStyles(props) {
  var loading = props.loading,
      disabled = props.disabled,
      type = props.type;
  var primaryColor = props.theme.style.primaryColor;
  var activeStyle = type !== 'pure' && !loading && !disabled ? true : false;
  return react.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n    height: ", "px;\n    padding: ", ";\n    display: inline-flex;\n    align-items: center;\n    border-radius: ", "px;\n    font-weight: 400;\n    font-size: 14px;\n    user-select: none;\n    outline: none;\n    text-transform: capitalize;\n    justify-content: center;\n    text-align: center;\n    white-space: nowrap;\n    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n    position: relative;\n    border: 1px solid transparent;\n    cursor: ", ";\n    box-shadow: 0 2px #00000004;\n    ", ";\n    ", ";\n    ", ";\n    &.ultra-button--active {\n      color: ", ";\n    }\n    ", ";\n    &:not(.ultra-button--text, .ultra-button--pure, .ultra-button--disabled):hover {\n      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    }\n    .ultra-button__text {\n      z-index: 1;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n  "])), buttonSizeStyleMap[props.size].height, type === 'pure' ? 0 : buttonSizeStyleMap[props.size].padding, props.theme.style.radius, loading ? 'default' : disabled ? 'not-allowed' : 'pointer', buttonTypeStyleMap(props), loading && loadingLayer(), disabled && disabledStyles(props), primaryColor, activeStyle && react.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n      &:active {\n        transform: translateY(2px);\n        transition: transform 200ms cubic-bezier(0.3, 0.7, 0.4, 1.5);\n      }\n    "]))));
};

exports.buttonStyles = buttonStyles;