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

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _jssPluginAutoPrefix = _interopRequireDefault(require("@orca-fe/jss-plugin-auto-prefix"));
var _jss = require("../utils/jss");
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 = 'orca-menu-layout';
var transitionStyle = {
  transition: 'color 300ms, background-color 300ms'
};
var _default = exports.default = (0, _jss.createUseStyles)({
  root: {
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column'
  },
  /* 左侧菜单为主时，其他内容的覆写 */

  mainSideLeft: {
    '&$root': {
      flexDirection: 'row'
    },
    '& $center': {
      flexDirection: 'column'
    },
    '& $sideMenuContainer': {
      zIndex: '1'
    },
    '& $logoContainer': {
      borderBottom: '1px solid rgba(125, 125, 125, 0.3)'
    },
    '& $collapseHandle': {
      padding: '0',
      borderBottom: 'none'
    }
  },
  header: {
    extend: transitionStyle,
    position: 'relative',
    padding: '0 20px',
    width: '100%',
    flexShrink: '0',
    height: '48px',
    display: 'flex',
    alignItems: 'center',
    backgroundColor: '#262931',
    color: 'rgba(255, 255, 255, 0.85)',
    borderBottom: '1px solid rgba(125, 125, 125, 0.3)',
    '& *': {
      boxSizing: 'border-box'
    },
    '& a': {
      textDecoration: 'none'
    }
  },
  logo: {},
  leftSide: {},
  logoContainer: {
    position: 'relative',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    '&$leftSide': {
      width: '100%',
      height: '48px',
      paddingLeft: '20px',
      transition: 'padding-left 300ms'
    }
  },
  title: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    fontSize: '20px',
    fontWeight: 'bold',
    cursor: 'default',
    transition: 'opacity 300ms',
    marginLeft: '8px',
    opacity: '1'
  },
  collapsed: {
    '& $logoContainer$leftSide': {
      paddingLeft: '12px'
    },
    '& $title': {
      // position: 'absolute',
      opacity: '0'
    }
  },
  headerMenu: {
    marginLeft: '50px'
  },
  center: {
    flex: '1',
    display: 'flex',
    overflow: 'hidden'
  },
  topSplitter: {},
  sideMenuContainer: {
    transition: 'color 300ms, width 300ms, background-color 300ms',
    width: '220px',
    flexShrink: '0',
    overflow: 'auto',
    // overflowX: 'hidden',
    color: 'rgba(255, 255, 255, 0.85)',
    backgroundColor: '#272931',
    boxShadow: '0 0 5px #666666',
    display: 'flex',
    flexDirection: 'column',
    '& *': {
      boxSizing: 'border-box'
    },
    '& a': {
      textDecoration: 'none'
    },
    '&$topSplitter': {
      // borderTop: '1px solid rgba(125, 125, 125, 0.3)',
    },
    '&$collapsed': {
      width: '54px'
    }
  },
  collapseHandle: {
    extend: transitionStyle,
    flexShrink: '0',
    height: '35px',
    fontSize: '1.3em',
    display: 'flex',
    padding: '0 20px',
    alignItems: 'center',
    borderBottom: '1px solid rgba(125, 125, 125, 0.3)',
    color: 'rgba(125, 125, 125, 0.9)',
    cursor: 'pointer',
    backgroundColor: 'rgba(125, 125, 125, 0)',
    '&:hover': {
      backgroundColor: 'rgba(125, 125, 125, 0.2)'
    }
  },
  collapseHandleIcon: {
    transition: 'transform 300ms',
    transform: 'rotate(0deg)',
    '&$collapsed': {
      transform: 'rotate(-360deg)'
    }
  },
  sideMenu: {
    extend: transitionStyle,
    overflow: 'auto',
    flex: '1'
  },
  content: {
    flex: '1',
    overflow: 'auto'
  },
  /* theme light */
  '@global': _defineProperty({}, ".".concat(prefix, "-theme-light"), {
    '&$header': {
      backgroundColor: '#ffffff',
      color: 'rgba(0, 0, 0, 0.85)'
    },
    '& $collapseHandle': {
      backgroundColor: 'transparent'
    },
    '&$sideMenuContainer': {
      boxShadow: '0 0 5px rgba(0, 0, 0, 0.3)',
      color: 'rgba(0, 0, 0, 0.85)',
      backgroundColor: '#ffffff'
    }
  })
}, {
  classNamePrefix: prefix,
  plugins: [(0, _jssPluginAutoPrefix.default)({
    prefix: prefix
  })]
});