@orca-fe/pocket/lib/menu-layout/Menu/MenuItem/MenuItem.style.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.prefix = exports.default = void 0;
var _jssPluginAutoPrefix = _interopRequireDefault(require("@orca-fe/jss-plugin-auto-prefix"));
var _jss = require("../../../utils/jss");
var _global;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var prefix = exports.prefix = 'orca-menu-item';
var colorTransitionStyle = {
  transition: 'color 300ms, background-color 300ms',
  color: '#cccccc',
  '&:hover': {
    color: '#ffffff'
  }
};
var _default = exports.default = (0, _jss.createUseStyles)({
  '@global': (_global = {
    '.orca-menu-sub-menu': {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      boxShadow: 'inset 0 3px 3px rgba(10, 10, 10, 0.5)'
    },
    'div.orca-menu-item-link': {
      cursor: 'default'
    }
  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_global, ".".concat(prefix, "-text-anim-appear, .").concat(prefix, "-text-anim-enter"), {
    opacity: 0
  }), ".".concat(prefix, "-text-anim-appear-active, .").concat(prefix, "-text-anim-enter-active"), {
    opacity: 1
  }), ".".concat(prefix, "-text-anim-leave"), {
    display: 'block',
    opacity: 1
  }), ".".concat(prefix, "-text-anim-leave-active"), {
    opacity: 0
  }), ".".concat(prefix, "-popup-anim-appear, .").concat(prefix, "-popup-anim-enter"), {
    opacity: '0',
    animationPlayState: 'paused',
    // animation-timing-function: 'cubic-bezier(0.2, 0.89, 0.32, 1.28)',
    animationDuration: '200ms',
    animationFillMode: 'both'
  }), ".".concat(prefix, "-popup-anim-appear-active, .").concat(prefix, "-popup-anim-enter-active"), {
    animationName: 'orca-menu-trigger-zoom-in',
    animationPlayState: 'running'
  }), ".".concat(prefix, "-popup-anim-leave"), {
    animationPlayState: 'paused',
    // animation-timing-function: 'cubic-bezier(0.2, 0.89, 0.32, 1.28)',
    animationDuration: '200ms',
    animationFillMode: 'both'
  }), ".".concat(prefix, "-popup-anim-leave-active"), {
    animationName: 'orca-menu-trigger-zoom-out',
    animationPlayState: 'running'
  }), ".".concat(prefix, "-popup-hidden"), {
    display: 'none'
  }), '@keyframes orca-menu-trigger-zoom-in', {
    '0%': {
      transform: 'scale(0.9)',
      opacity: '0'
    },
    '100%': {
      transform: 'scale(1, 1)',
      opacity: '1'
    }
  }), _defineProperty(_global, '@keyframes orca-menu-trigger-zoom-out', {
    '0%': {
      transform: 'scale(1, 1)',
      opacity: '1'
    },
    '100%': {
      transform: 'scale(0.9)',
      opacity: '0'
    }
  })),
  checked: {},
  root: _defineProperty({
    extend: [colorTransitionStyle],
    position: 'relative',
    alignItems: 'center',
    height: '100%',
    '&$checked': {
      '& > $link': {
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        '&:after': {
          position: 'absolute',
          content: '\'\'',
          left: '0',
          bottom: '0',
          width: '100%',
          height: '3px',
          backgroundColor: '#1199ff',
          pointerEvents: 'none'
        }
      }
    },
    orcaMenuSubMenu: {}
  }, "&.".concat(prefix, "-theme-light"), {
    '& $link': {
      color: 'rgba(0, 0, 0, 0.65)',
      '&:hover': {
        color: '#33aaff'
      }
    },
    '&$root$checked': {
      '& > $link': {
        color: '#1199ff',
        backgroundColor: 'transparent'
      }
    },
    '&$vertical': {
      '&$root$checked': {
        '& > $link': {
          color: '#1199ff',
          backgroundColor: 'rgba(17, 153, 255, 0.12)'
        }
      },
      '& $link': {
        // color: 'rgba(0, 0, 0, 0.65)',

        '&:hover': {
          backgroundColor: 'transparent'
        }
      },
      // 路径上的 menu-link 颜色设为蓝色
      '&$childChecked': {
        '& > $link': {
          color: '#1199ff',
          // 浅色主题下，路径节点右侧的蓝色边去除
          '&:after': {
            display: 'none'
          }
        }
      }
    },
    /* popup */

    '&$popup': {
      backgroundColor: '#ffffff',
      boxShadow: '2px 2px 4px rgba(10, 10, 10, 0.2)',
      border: '1px solid #dddddd',
      '& > $orcaMenuSubMenu': {
        boxShadow: 'none',
        backgroundColor: '#ffffff'
      }
    },
    orcaMenuSubMenu: {
      backgroundColor: 'rgba(0, 0, 0, 0.01)',
      boxShadow: 'inset 0 3px 3px rgba(10, 10, 10, 0.1)'
    }
  }),
  link: {
    extend: [colorTransitionStyle],
    boxSizing: 'border-box',
    position: 'relative',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    padding: '0 20px',
    height: '100%'
  },
  collapsed: {},
  icon: {
    width: '1em',
    height: '1em',
    lineHeight: '1em',
    marginRight: '10px',
    transition: 'transform 300ms',
    '&$collapsed': {
      transform: 'scale(1.4)'
    }
  },
  textAnimContainer: {
    flex: '1',
    overflow: 'hidden'
  },
  text: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    textDecoration: 'none',
    whiteSpace: 'nowrap',
    transition: 'opacity 300ms',
    fontSize: 14,
    cursor: 'inherit'
  },
  textHidden: {
    display: 'none'
  },
  childChecked: {},
  /* 垂直布局 */
  arrow: {
    width: '40px',
    height: '100%',
    cursor: 'pointer',
    flexShrink: '0',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  vertical: {
    '& $link': {
      padding: '0',
      width: '100%',
      height: '40px',
      '&:hover': {
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
      }
    },
    width: '100%',
    height: 'auto',
    '&$childChecked': {
      '& > $link': {
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        '&:after': {
          position: 'absolute',
          content: '\'\'',
          top: '0',
          left: 'auto',
          right: '0',
          width: '3px',
          height: '100%',
          backgroundColor: '#1199ff'
        }
      }
    },
    '&$checked': {
      '& > $link': {
        backgroundColor: '#1287e0',
        color: '#eeeeee',
        '&:hover': {
          backgroundColor: '#1199ff',
          color: '#ffffff'
        },
        '&:after': {
          position: 'absolute',
          content: '\'\'',
          top: '0',
          left: 'auto',
          right: '0',
          width: '3px',
          height: '100%'
        }
      }
    }
  },
  popup: {
    position: 'absolute !important',
    minWidth: '180px',
    backgroundColor: '#262931',
    transformOrigin: 'top left'
  }
}, {
  classNamePrefix: prefix,
  plugins: [(0, _jssPluginAutoPrefix.default)({
    prefix: prefix
  })]
});