ultra-design/lib/dropdown/dropdown-styles.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var slide = require('../styles/transition/slide.js');
var fade = require('../utils/fade.js');

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, _templateObject5, _templateObject6, _templateObject7;
var dropdownStyles = function dropdownStyles(props) {
  var _props$theme$style = props.theme.style,
      boxShadow = _props$theme$style.boxShadow,
      radius = _props$theme$style.radius;
  var _props$theme$props$th = props.theme[props.theme.mode],
      thirdBackgroundColor = _props$theme$props$th.thirdBackgroundColor,
      textColor = _props$theme$props$th.textColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    &.", "-layer-wrapper {\n      .", " {\n        transform-origin: top;\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n        border-radius: ", "px;\n        &__content {\n          padding: 8px 0;\n        }\n        &__arrow {\n          border-color: transparent ", " transparent transparent;\n        }\n      }\n    }\n\n    .ultra-divider:not(.ultra-divider--vetical) {\n      margin: 4px 0;\n    }\n\n    .ultra-menu {\n      padding: 0;\n      .ultra-sub-menu {\n        margin-bottom: 0;\n        min-height: 32px;\n      }\n    }\n\n    ", "\n  "])), props.name, props.name, thirdBackgroundColor, textColor, boxShadow, radius, thirdBackgroundColor, slide.transitionSlide(props.transitionClassName, props.transitionTimeout));
};
var dropdownItemStyle = function dropdownItemStyle(props) {
  var theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor;
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    min-height: 32px;\n    cursor: pointer;\n    user-select: none;\n    &.ultra-dropdown-item--disabled {\n      background-color: ", ";\n      color: ", ";\n      cursor: not-allowed;\n    }\n\n    &.ultra-dropdown-item--active {\n      ", "\n    }\n    &:hover:not(.ultra-dropdown-item--disabled, .ultra-dropdown-item--active) {\n      ", "\n    }\n  "])), disabledBgColor, disabledTextColor, theme.mode === 'dark' ? react.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n            background-color: ", ";\n            color: ", ";\n          "])), primaryColor, textColor) : react.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n            background-color: ", ";\n            color: ", ";\n          "])), fade.fade(primaryColor, 0.1), primaryColor), theme.mode === 'dark' ? react.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n            color: ", ";\n          "])), fade.fade(textColor, 1)) : react.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n            background-color: #f0f1f3;\n          "]))));
};
var dropdownTitleStyle = function dropdownTitleStyle(props) {
  var theme = props.theme;
  var textColor = theme[theme.mode].textColor;
  return react.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n    display: flex;\n    align-items: center;\n    height: 28px;\n    user-select: none;\n    font-size: 12px;\n    padding: 8px 12px 4px;\n    color: ", ";\n    transition: all 0.3s;\n  "])), fade.fade(textColor, 0.4));
};

exports.dropdownItemStyle = dropdownItemStyle;
exports.dropdownStyles = dropdownStyles;
exports.dropdownTitleStyle = dropdownTitleStyle;