ultra-design/lib/menu/menu-style.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
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;
var menuStyles = function menuStyles(props) {
  var theme = props.theme;
  var _theme$theme$mode = theme[theme.mode],
      backgroundColor = _theme$theme$mode.backgroundColor,
      textColor = _theme$theme$mode.textColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    margin: 0;\n    list-style: none;\n    position: relative;\n    padding: 12px;\n    color: ", ";\n    font-size: 14px;\n    background-color: ", ";\n    background-image: none;\n    transition: all 0.3s;\n    .ultra-sub-menu {\n      margin-bottom: 4px;\n      &:nth-last-of-type() {\n        margin-bottom: 0;\n      }\n    }\n\n    &.ultra-menu--horizontal {\n      display: flex;\n      min-height: 48px;\n      padding: 0;\n      .ultra-sub-menu {\n        height: 100%;\n        padding: 0 20px;\n        margin-bottom: 0;\n        &--active {\n          background-color: inherit;\n          position: relative;\n          &::before {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            width: calc(100% - 20px);\n            height: 2px;\n            left: 50%;\n            transform: translateX(-50%);\n            background-color: ", ";\n          }\n        }\n      }\n    }\n  "])), fade.fade(textColor, 0.8), backgroundColor, theme.style.primaryColor);
};
var subMenuStyle = function subMenuStyle(props) {
  var theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var _theme$theme$mode2 = theme[theme.mode],
      textColor = _theme$theme$mode2.textColor,
      disabledBgColor = _theme$theme$mode2.disabledBgColor,
      disabledTextColor = _theme$theme$mode2.disabledTextColor;
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    min-height: 40px;\n    cursor: pointer;\n    user-select: none;\n    &.ultra-sub-menu--disabled {\n      background-color: ", ";\n      color: ", ";\n      cursor: not-allowed;\n    }\n\n    &.ultra-sub-menu--active {\n      ", "\n    }\n    &:hover:not(.ultra-sub-menu--disabled, .ultra-sub-menu--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          "]))));
};

exports.menuStyles = menuStyles;
exports.subMenuStyle = subMenuStyle;