@ant-design/pro-layout
Version:
49 lines • 2.16 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
var genSiderMenuStyle = function genSiderMenuStyle(token) {
var _token$layout, _token$layout2, _token$layout3;
return _defineProperty({}, token.componentCls, {
position: 'absolute',
insetBlockStart: '18px',
zIndex: '101',
width: '24px',
height: '24px',
fontSize: ['14px', '16px'],
textAlign: 'center',
borderRadius: '40px',
insetInlineEnd: '-13px',
transition: 'transform 0.3s',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextCollapsedButton,
backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgCollapsedButton,
boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
'&:hover': {
color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextCollapsedButtonHover,
boxShadow: '0 4px 16px -4px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(25,15,15,0.07), 0 1px 2px 0 rgba(0,0,0,0.08)'
},
'.anticon': {
fontSize: '14px'
},
'& > svg': {
transition: 'transform 0.3s',
transform: 'rotate(90deg)'
},
'&-collapsed': {
'& > svg': {
transform: 'rotate(-90deg)'
}
}
});
};
export function useStyle(prefixCls) {
return useAntdStyle('SiderMenuCollapsedIcon', function (token) {
var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
componentCls: ".".concat(prefixCls)
});
return [genSiderMenuStyle(siderMenuToken)];
});
}