@6thquake/react-material
Version:
React components that implement Google's Material Design.
424 lines (413 loc) • 16.9 kB
JavaScript
;
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"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _dark = _interopRequireDefault(require("./dark"));
var _colorManipulator = require("../styles/colorManipulator");
var menuPrefixCls = 'rm-menu';
var styles = function styles(theme) {
var _verticalSubV, _verticalVertic, _submenu, _horizontal, _inline, _verticalVertic2, _$concat$concat$, _tooltip, _inlineCollapsed, _subInline;
var menu = (0, _extends2.default)({
menuCollapsedWidth: '72',
fontSizeBase: '14px',
textColor: (0, _colorManipulator.fade)('#000', 0.65),
lineHeightBase: 1.5,
boxShadowBase: '0 2px 8px rgba(0, 0, 0, .15)',
borderColorSplit: 'border-color-split',
menuItemColor: (0, _colorManipulator.fade)('#000', 0.65),
menuBg: '#fff',
menuItemGroupTitleColor: (0, _colorManipulator.fade)('#000', 0.45),
menuItemActiveBg: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.1),
menuHoverBg: (0, _colorManipulator.fade)('#000', 0.08),
// menuHoverBg: fade(theme.palette.primary.main, .05),
menuHighlightColor: theme.palette.primary.main,
disabledColor: (0, _colorManipulator.fade)('#000', 0.25),
textColorDark: (0, _colorManipulator.fade)('#fff', 0.85),
menuDarkColor: '#fff',
menuDarkBg: (0, _colorManipulator.fade)('#000', 0.87),
menuDarkArrowColor: '#fff',
menuDarkSubmenuBg: (0, _colorManipulator.fade)('#000', 0.87),
menuDarkHoverBg: (0, _colorManipulator.fade)('#9e9e9e', 0.3),
menuDarkHighlightColor: '#fff',
menuDarkItemSelectedBg: theme.palette.primary.main,
disabledColorDark: (0, _colorManipulator.fade)('#fff', 0.35),
easeInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
border: {
width: '1px',
style: 'solid',
color: '#e8e8e8',
radius: '4px',
colorSplit: '#e8e8e8' // todo @border-color-split;
},
menuItem: {
height: '40px',
lineHeight: '40px',
fontSize: '14px'
},
iconStyle: {
fontSize: 'inherit',
marginRight: '8px',
verticalAlign: 'text-bottom'
}
}, theme.menu);
var border = menu.border;
var menuItem = menu.menuItem;
var iconStyle = menu.iconStyle;
var iconfontCssPrefix = 'material-icons';
return {
'@global': (0, _defineProperty2.default)({}, ".".concat(menuPrefixCls), (0, _extends2.default)({}, theme.typography.body1, {
boxShadow: menu.boxShadowBase,
color: menu.menuItemColor,
background: menu.menuBg,
outline: 'none',
margin: 0,
padding: 0,
paddingLeft: 0,
listStyle: 'none',
lineHeight: 0,
transition: 'background .3s, width .2s',
zoom: 1,
'@global .material-icons, svg': (0, _extends2.default)({}, iconStyle),
'& *': {
boxSizing: 'border-box'
},
'&:before, &:after': {
content: "' '",
display: 'table'
},
'&:after': {
clear: 'both',
visibility: 'hidden',
fontSize: 0,
height: 0
},
'& ul,& ol': {
listStyle: 'none',
margin: 0,
padding: 0
},
'&-hidden': {
display: 'none'
},
'&-item-group-title': {
color: menu.menuItemGroupTitleColor,
fontSize: menu.fontSizeBase,
lineHeight: menu.lineHeightBase,
padding: '8px 16px',
transition: 'all .3s'
},
'&-submenu, &-submenu-inline': {
transition: "border-color .3s ".concat(menu.easeInOut, ", background .3s ").concat(menu.easeInOut, ", padding .15s ").concat(menu.easeInOut)
},
'&-item:active, &-submenu-title:active': {
background: menu.menuItemActiveBg
},
'&-submenu &-sub': {
cursor: 'initial',
transition: "background .3s ".concat(menu.easeInOut, ", padding .3s ").concat(menu.easeInOut)
},
'&-item > a': {
display: 'block',
color: menu.menuItemColor,
'&:hover': {
color: menu.menuHighlightColor
},
'&:focus': {
textDecoration: 'none'
},
'&:before': {
position: 'absolute',
backgroundColor: 'transparent',
top: 0,
left: 0,
bottom: 0,
right: 0,
content: "' '"
}
},
'&-item-divider': {
height: 1,
overflow: 'hidden',
backgroundColor: '#e8e8e8',
// theme.palette.divider,
lineHeight: 0
},
'&-item:hover, &-item-active, &:not(&-inline) &-submenu-open, &-submenu-active': {
color: menu.menuHighlightColor,
background: menu.menuHoverBg
},
'&-submenu-title:hover': {
color: menu.menuHighlightColor
},
'&-horizontal &-item, &-horizontal &-submenu': {
marginTop: -1
},
'&-horizontal > &-item:hover, &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover': {
backgroundColor: 'transparent'
},
'&-item-selected': {
color: menu.menuHighlightColor,
'&> a, > a:hover': {
color: menu.menuHighlightColor
}
},
'&:not(&-horizontal) &-item-selected': {
backgroundColor: menu.menuItemActiveBg
},
'&-inline, &-vertical, &-vertical-left': {
borderRight: "".concat(border.width, " ").concat(border.style, " ").concat(border.color)
},
'&-vertical-right': {
borderLeft: "".concat(border.width, " ").concat(border.style, " ").concat(border.color)
},
'&-vertical&-sub, &-vertical-left&-sub, &-vertical-right&-sub': (_verticalSubV = {
borderRight: 0,
padding: 0,
transformOrigin: '0 0'
}, (0, _defineProperty2.default)(_verticalSubV, "& .".concat(menuPrefixCls, "-item"), {
borderRight: 0,
marginLeft: 0,
left: 0,
'&:after': {
borderRight: 0
}
}), (0, _defineProperty2.default)(_verticalSubV, "&> .".concat(menuPrefixCls, "-item,&> .").concat(menuPrefixCls, "-submenu"), {
transformOrigin: '0 0'
}), _verticalSubV),
'&-horizontal&-sub, &-vertical&-sub, &-vertical-left&-sub, &-vertical-right&-sub': {
minWidth: 160
},
'&-item, &-submenu-title': (0, _defineProperty2.default)({
cursor: 'pointer',
margin: 0,
padding: '0 20px',
position: 'relative',
display: 'block',
whiteSpace: 'nowrap',
transition: "color .3s ".concat(menu.easeInOut, ", border-color .3s ").concat(menu.easeInOut, ", background .3s ").concat(menu.easeInOut, ", padding .15s ").concat(menu.easeInOut)
}, "& .".concat(iconfontCssPrefix), {
minWidth: 14,
marginRight: 10,
transition: "font-size .15s ".concat(menu.easeInOut, ", margin .3s ").concat(menu.easeInOut),
'&+ span': {
transition: "opacity .3s ".concat(menu.easeInOut, ", width .3s ").concat(menu.easeInOut),
opacity: 1
}
}),
'& > &-item-divider': {
height: 1,
margin: '1px 0',
overflow: 'hidden',
padding: 0,
lineHeight: 0,
backgroundColor: border.colorSplit
},
'&-submenu': (_submenu = {
'&-popup': {
position: 'absolute',
borderRadius: border.radius,
zIndex: theme.zIndex.drawer
}
}, (0, _defineProperty2.default)(_submenu, "& > .".concat(menuPrefixCls), {
backgroundColor: menu.menuBg,
borderRadius: border.radius,
'&-submenu-title:after': {
transition: "transform .3s ".concat(menu.easeInOut)
}
}), (0, _defineProperty2.default)(_submenu, "&-inline > .".concat(menuPrefixCls, "-submenu-title .").concat(menuPrefixCls, "-submenu-arrow"), {
'&:before': {
transform: 'rotate(-45deg) translateX(2px)'
},
'&:after': {
transform: 'rotate(45deg) translateX(-2px)'
}
}), (0, _defineProperty2.default)(_submenu, '&-open', (0, _defineProperty2.default)({}, "&.".concat(menuPrefixCls, "-submenu-inline > .").concat(menuPrefixCls, "-submenu-title .").concat(menuPrefixCls, "-submenu-arrow"), {
transform: 'translateY(-2px)',
'&:after': {
transform: 'rotate(-45deg) translateX(-2px)'
},
'&:before': {
transform: 'rotate(45deg) translateX(2px)'
}
})), (0, _defineProperty2.default)(_submenu, '&-vertical, &-vertical-left, &-vertical-right, &-inline', (_verticalVertic = {}, (0, _defineProperty2.default)(_verticalVertic, "&> .".concat(menuPrefixCls, "-submenu-title .").concat(menuPrefixCls, "-submenu-arrow"), {
transition: "transform .3s ".concat(menu.easeInOut),
position: 'absolute',
top: '50%',
right: 16,
width: 10,
'&:before, &:after': {
content: "' '",
position: 'absolute',
verticalAlign: 'baseline',
background: menu.menuItemColor,
backgroundImage: "linear-gradient(to right, ".concat(menu.menuItemColor, ", ").concat(menu.menuItemColor, ")"),
width: 6,
height: 1.5,
borderRadius: 2,
transition: "background .3s ".concat(menu.easeInOut, ", transform .3s ").concat(menu.easeInOut, ", top .3s ").concat(menu.easeInOut)
},
'&:before': {
transform: 'rotate(45deg) translateY(-2px)'
},
'&:after': {
transform: 'rotate(-45deg) translateY(2px)'
}
}), (0, _defineProperty2.default)(_verticalVertic, "&> .".concat(menuPrefixCls, "-submenu-title:hover .").concat(menuPrefixCls, "-submenu-arrow"), {
'&:after, &:before': {
background: "".concat(menu.menuHighlightColor)
}
}), _verticalVertic)), _submenu),
'&-vertical &-submenu-selected, &-vertical-left &-submenu-selected, &-vertical-right &-submenu-selected': {
color: menu.menuHighlightColor,
'&> a': {
color: menu.menuHighlightColor
}
},
'&-horizontal': (_horizontal = {
border: 0,
borderBottom: "".concat(border.width, " ").concat(border.style, " ").concat(border.color),
boxShadow: 'none',
lineHeight: '46px'
}, (0, _defineProperty2.default)(_horizontal, "&> .".concat(menuPrefixCls, "-item,& > .").concat(menuPrefixCls, "-submenu"), {
position: 'relative',
top: 1,
float: 'left',
borderBottom: '2px solid transparent',
'&:hover,&-active,&-open,&-selected': {
borderBottom: "2px solid ".concat(menu.menuHighlightColor),
color: menu.menuHighlightColor
},
'& > a': {
display: 'block',
color: menu.menuItemColor,
'&:hover': {
color: menu.menuHighlightColor
},
'&:before': {
bottom: -2
}
}
}), (0, _defineProperty2.default)(_horizontal, '&:after', {
content: "'\\20'",
display: 'block',
height: 0,
clear: 'both'
}), _horizontal),
'&-inline': (_inline = {
width: '100%'
}, (0, _defineProperty2.default)(_inline, "& .".concat(menuPrefixCls, "-selected,& .").concat(menuPrefixCls, "-item-selected"), {
'&:after': {
transition: "transform .15s ".concat(menu.easeInOut, ", opacity .15s ").concat(menu.easeInOut),
opacity: 1,
transform: 'scaleY(1)'
}
}), (0, _defineProperty2.default)(_inline, "& .".concat(menuPrefixCls, "-item,& .").concat(menuPrefixCls, "-submenu-title"), {
width: 'calc(100% + 1px)'
}), (0, _defineProperty2.default)(_inline, "& .".concat(menuPrefixCls, "-submenu-title"), {
paddingRight: 34
}), _inline),
'&-vertical, &-vertical-left, &-vertical-right, &-inline': (_verticalVertic2 = {}, (0, _defineProperty2.default)(_verticalVertic2, "& .".concat(menuPrefixCls, "-item"), {
position: 'relative',
'&:after': {
content: "''",
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
borderRight: "3px solid ".concat(menu.menuHighlightColor),
transform: 'scaleY(.0001)',
opacity: 0,
transition: "transform .15s ".concat(menu.easeInOut, ", opacity .15s ").concat(menu.easeInOut)
}
}), (0, _defineProperty2.default)(_verticalVertic2, "& .".concat(menuPrefixCls, "-item,& .").concat(menuPrefixCls, "-submenu-title"), {
padding: '0 16px',
fontSize: menu.fontSizeBase,
lineHeight: menuItem.height,
height: menuItem.height,
marginTop: 4,
marginBottom: 4,
overflow: 'hidden',
textOverflow: 'ellipsis'
}), (0, _defineProperty2.default)(_verticalVertic2, "& .".concat(menuPrefixCls, "-submenu"), {
paddingBottom: 0.01
}), (0, _defineProperty2.default)(_verticalVertic2, "& .".concat(menuPrefixCls, "-item:not(:last-child)"), {
marginBottom: theme.spacing(1)
}), (0, _defineProperty2.default)(_verticalVertic2, "&> .".concat(menuPrefixCls, "-item,\n > .").concat(menuPrefixCls, "-submenu > .").concat(menuPrefixCls, "-submenu-title"), {
lineHeight: menuItem.lineHeight,
height: menuItem.height
}), _verticalVertic2),
'&-inline-collapsed': (_inlineCollapsed = {
width: "".concat(menu.menuCollapsedWidth, "px")
}, (0, _defineProperty2.default)(_inlineCollapsed, "& > .".concat(menuPrefixCls, "-item,\n &> .").concat(menuPrefixCls, "-item-group > .").concat(menuPrefixCls, "-item-group-list > .").concat(menuPrefixCls, "-item,\n &> .").concat(menuPrefixCls, "-submenu > .").concat(menuPrefixCls, "-submenu-title"), (_$concat$concat$ = {
left: 0,
textOverflow: 'clip',
padding: "0 ".concat((menu.menuCollapsedWidth - 24) / 2, "px !important")
}, (0, _defineProperty2.default)(_$concat$concat$, "& .".concat(menuPrefixCls, "-submenu-arrow"), {
display: 'none'
}), (0, _defineProperty2.default)(_$concat$concat$, "& .".concat(iconfontCssPrefix, ",svg"), {
fontSize: 24,
lineHeight: menuItem.lineHeight,
margin: 0,
'&+ span': {
maxWidth: 0,
display: 'inline-block',
opacity: 0
}
}), _$concat$concat$)), (0, _defineProperty2.default)(_inlineCollapsed, '&-tooltip', (_tooltip = {
pointerEvents: 'none'
}, (0, _defineProperty2.default)(_tooltip, "& .".concat(iconfontCssPrefix), {
display: 'none'
}), (0, _defineProperty2.default)(_tooltip, '& a', {
color: menu.textColorDark
}), _tooltip)), (0, _defineProperty2.default)(_inlineCollapsed, "& .".concat(menuPrefixCls, "-item-group-title"), {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
paddingLeft: 4,
paddingRight: 4
}), _inlineCollapsed),
'&-item-group-list': (0, _defineProperty2.default)({
margin: 0,
padding: 0
}, "& .".concat(menuPrefixCls, "-item,\n & .").concat(menuPrefixCls, "-submenu-title"), {
padding: '0 16px 0 28px'
}),
'&-root&-vertical, &-root&-vertical-left, &-root&-vertical-right, &-root&-inline': {
boxShadow: 'none'
},
'&-sub&-inline': (_subInline = {
padding: 0,
border: 0,
boxShadow: 'none',
borderRadius: 0
}, (0, _defineProperty2.default)(_subInline, "& > .".concat(menuPrefixCls, "-item,\n & > .").concat(menuPrefixCls, "-submenu > .").concat(menuPrefixCls, "-submenu-title"), {
lineHeight: menuItem.lineHeight,
height: menuItem.height,
listStyleType: 'disc',
listStylePosition: 'inside'
}), (0, _defineProperty2.default)(_subInline, "& .".concat(menuPrefixCls, "-item-group-title"), {
paddingLeft: 32
}), _subInline),
// Disabled state sets text to gray and nukes hover/tab effects
'&-item-disabled, &-submenu-disabled': (0, _defineProperty2.default)({
color: "".concat(menu.disabledColorDark, " !important"),
cursor: 'not-allowed',
background: 'none',
borderColor: 'transparent !important',
'&> a': {
color: "".concat(menu.disabledColor, " !important"),
pointerEvents: 'none'
}
}, "&> .".concat(menuPrefixCls, "-submenu-title"), {
color: "".concat(menu.disabledColor, " !important"),
cursor: 'not-allowed'
})
}, (0, _dark.default)(menu, menuPrefixCls)))
};
};
var _default = styles;
exports.default = _default;