@6thquake/react-material/MenuBar/dark.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

// const menuPrefixCls = 'rm-menu';
var styles = function styles(menu, menuPrefixCls) {
  return {
    // dark theme
    '&-dark, &-dark &-sub': (0, _defineProperty2.default)({
      color: "".concat(menu.menuDarkColor, " "),
      background: "".concat(menu.menuDarkBg, " !important")
    }, "& .".concat(menuPrefixCls, "-submenu-title .").concat(menuPrefixCls, "-submenu-arrow"), {
      // opacity: .45,
      transition: 'all .3s ',
      '&:after, &:before': {
        background: "".concat(menu.menuDarkArrowColor, " !important")
      }
    }),
    '&-dark&-submenu-popup': {
      background: 'transparent '
    },
    '&-dark &-inline&-sub': {
      background: "".concat(menu.menuDarkSubmenuBg, " "),
      boxShadow: '0 2px 8px rgba(0, 0, 0, .45) inset '
    },
    '&-dark&-horizontal': {
      borderBottomColor: "".concat(menu.menuDarkBg, " ")
    },
    '&-dark&-horizontal > &-item, &-dark&-horizontal > &-submenu': {
      borderColor: "".concat(menu.menuDarkBg, " "),
      borderBottom: 0
    },
    '&-dark &-item, &-dark &-item-group-title, &-dark &-item > a': {
      color: "".concat(menu.menuDarkColor, " ")
    },
    '&-dark&-inline, &-dark&-vertical, &-dark&-vertical-left, &-dark&-vertical-right': {
      borderRight: 0
    },
    '&-dark&-vertical &-item, &-dark&-vertical-left &-item, &-dark&-vertical-right &-item': {
      borderRight: 0,
      marginLeft: 0,
      left: 0,
      '&:after': {
        borderRight: 0
      }
    },
    '&-dark&-inline &-item': {
      borderRight: 0,
      marginLeft: 0
    },
    '&-dark&-inline &-item, &-dark&-inline &-submenu-title': {
      width: '100%'
    },
    '&-dark &-item:hover,&-dark &-item-active,&-dark &-submenu-active,&-dark &-submenu-open,&-dark &-submenu-selected,&-dark &-submenu-title:hover': (0, _defineProperty2.default)({
      backgroundColor: 'transparent',
      color: "".concat(menu.menuDarkHighlightColor, " "),
      '&> a': {
        color: "".concat(menu.menuDarkHighlightColor, " ")
      }
    }, "&> .".concat(menuPrefixCls, "-submenu-title,> .").concat(menuPrefixCls, "-submenu-title:hover"), (0, _defineProperty2.default)({}, "&> .".concat(menuPrefixCls, "-submenu-arrow"), {
      opacity: 1,
      '&:after, &:before': {
        background: "".concat(menu.menuDarkArrowColor)
      }
    })),
    '&-dark &-item:hover,&-dark &-submenu-title:hover': {
      backgroundColor: menu.menuDarkHoverBg
    },
    '&-dark &-item-selected': {
      borderRight: 0,
      color: "".concat(menu.menuDarkHighlightColor, " "),
      '&:after': {
        borderRight: 0
      },
      '&> a, > a:hover': {
        color: "".concat(menu.menuDarkHighlightColor, " ")
      }
    },
    '&&-dark &-item-selected, &-submenu-popup&-dark &-item-selected': {
      backgroundColor: "".concat(menu.menuDarkItemSelectedBg, "  ")
    },
    // Disabled state sets text to dark gray and nukes hover/tab effects
    '&-dark &-item-disabled, &-dark &-submenu-disabled': (0, _defineProperty2.default)({
      '&, > a': {
        opacity: 0.8,
        color: "".concat(menu.disabledColorDark, " ")
      }
    }, "&> .".concat(menuPrefixCls, "-submenu-title"), {
      color: "".concat(menu.disabledColorDark, " ")
    })
  };
};

var _default = styles;
exports.default = _default;