refactor(layout): less to cssinjs (#6249)
bqy_fe
2 years ago
committed by
GitHub
parent
dc480bd4b3
commit
7a34c99935
@ -1,145 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@layout-prefix-cls: ~'@{ant-prefix}-layout';
|
||||
@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
background: @layout-body-background;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&&-has-sider {
|
||||
flex-direction: row;
|
||||
|
||||
> .@{layout-prefix-cls},
|
||||
> .@{layout-prefix-cls}-content {
|
||||
width: 0; // https://segmentfault.com/a/1190000019498300
|
||||
}
|
||||
}
|
||||
|
||||
&-header,
|
||||
&-footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&-header {
|
||||
height: @layout-header-height;
|
||||
padding: @layout-header-padding;
|
||||
color: @layout-header-color;
|
||||
line-height: @layout-header-height;
|
||||
background: @layout-header-background;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding: @layout-footer-padding;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
background: @layout-footer-background;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: auto;
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
&-sider {
|
||||
position: relative;
|
||||
|
||||
/* fix firefox can't set width smaller than content on flex item */
|
||||
min-width: 0;
|
||||
background: @layout-sider-background;
|
||||
transition: all 0.2s;
|
||||
|
||||
&-children {
|
||||
height: 100%;
|
||||
margin-top: -0.1px;
|
||||
// Hack for fixing margin collaspe bug
|
||||
// https://github.com/ant-design/ant-design/issues/7967
|
||||
// solution from https://stackoverflow.com/a/33132624/3040605
|
||||
padding-top: 0.1px;
|
||||
|
||||
.@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-has-trigger {
|
||||
padding-bottom: @layout-trigger-height;
|
||||
}
|
||||
|
||||
&-right {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
height: @layout-trigger-height;
|
||||
color: @layout-trigger-color;
|
||||
line-height: @layout-trigger-height;
|
||||
text-align: center;
|
||||
background: @layout-trigger-background;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&-zero-width {
|
||||
> * {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
position: absolute;
|
||||
top: @layout-header-height;
|
||||
right: -@layout-zero-trigger-width;
|
||||
z-index: 1;
|
||||
width: @layout-zero-trigger-width;
|
||||
height: @layout-zero-trigger-height;
|
||||
color: @layout-trigger-color;
|
||||
font-size: (@layout-zero-trigger-width / 2);
|
||||
line-height: @layout-zero-trigger-height;
|
||||
text-align: center;
|
||||
background: @layout-sider-background;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
transition: all 0.3s;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&-right {
|
||||
left: -@layout-zero-trigger-width;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './light';
|
||||
@import './rtl';
|
||||
@ -0,0 +1,225 @@
|
||||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genLayoutLightStyle from './light';
|
||||
|
||||
export interface ComponentToken {
|
||||
colorBgHeader: string;
|
||||
colorBgBody: string;
|
||||
colorBgTrigger: string;
|
||||
}
|
||||
|
||||
export interface LayoutToken extends FullToken<'Layout'> {
|
||||
// Layout
|
||||
layoutHeaderHeight: number;
|
||||
layoutHeaderPaddingInline: number;
|
||||
layoutHeaderColor: string;
|
||||
layoutFooterPadding: string;
|
||||
layoutTriggerHeight: number;
|
||||
layoutZeroTriggerSize: number;
|
||||
}
|
||||
|
||||
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
const {
|
||||
antCls, // .ant
|
||||
componentCls, // .ant-layout
|
||||
colorText,
|
||||
colorTextLightSolid,
|
||||
colorBgHeader,
|
||||
colorBgBody,
|
||||
colorBgTrigger,
|
||||
layoutHeaderHeight,
|
||||
layoutHeaderPaddingInline,
|
||||
layoutHeaderColor,
|
||||
layoutFooterPadding,
|
||||
layoutTriggerHeight,
|
||||
layoutZeroTriggerSize,
|
||||
motionDurationMid,
|
||||
motionDurationSlow,
|
||||
fontSize,
|
||||
borderRadius,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
flexDirection: 'column',
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
minHeight: 0,
|
||||
background: colorBgBody,
|
||||
|
||||
'&, *': {
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
|
||||
[`&${componentCls}-has-sider`]: {
|
||||
flexDirection: 'row',
|
||||
[`> ${componentCls}, > ${componentCls}-content`]: {
|
||||
// https://segmentfault.com/a/1190000019498300
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-header, &${componentCls}-footer`]: {
|
||||
flex: '0 0 auto',
|
||||
},
|
||||
|
||||
[`${componentCls}-header`]: {
|
||||
height: layoutHeaderHeight,
|
||||
paddingInline: layoutHeaderPaddingInline,
|
||||
color: layoutHeaderColor,
|
||||
lineHeight: `${layoutHeaderHeight}px`,
|
||||
background: colorBgHeader,
|
||||
// Other components/menu/style/index.less line:686
|
||||
// Integration with header element so menu items have the same height
|
||||
[`${antCls}-menu`]: {
|
||||
lineHeight: 'inherit',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-footer`]: {
|
||||
padding: layoutFooterPadding,
|
||||
color: colorText,
|
||||
fontSize,
|
||||
background: colorBgBody,
|
||||
},
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
flex: 'auto',
|
||||
|
||||
// fix firefox can't set height smaller than content on flex item
|
||||
minHeight: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-sider`]: {
|
||||
position: 'relative',
|
||||
|
||||
// fix firefox can't set width smaller than content on flex item
|
||||
minWidth: 0,
|
||||
background: colorBgHeader,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
|
||||
'&-children': {
|
||||
height: '100%',
|
||||
// Hack for fixing margin collapse bug
|
||||
// https://github.com/ant-design/ant-design/issues/7967
|
||||
// solution from https://stackoverflow.com/a/33132624/3040605
|
||||
marginTop: -0.1,
|
||||
paddingTop: 0.1,
|
||||
|
||||
[`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
'&-has-trigger': {
|
||||
paddingBottom: layoutTriggerHeight,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
order: 1,
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
height: layoutTriggerHeight,
|
||||
color: colorTextLightSolid,
|
||||
lineHeight: `${layoutTriggerHeight}px`,
|
||||
textAlign: 'center',
|
||||
background: colorBgTrigger,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
'&-zero-width': {
|
||||
'> *': {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
position: 'absolute',
|
||||
top: layoutHeaderHeight,
|
||||
insetInlineEnd: -layoutZeroTriggerSize,
|
||||
zIndex: 1,
|
||||
width: layoutZeroTriggerSize,
|
||||
height: layoutZeroTriggerSize,
|
||||
color: colorTextLightSolid,
|
||||
fontSize: token.fontSizeXL,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: colorBgHeader,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderEndStartRadius: 0,
|
||||
|
||||
cursor: 'pointer',
|
||||
transition: `background ${motionDurationSlow} ease`,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'transparent',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
'&:hover::after': {
|
||||
// FIXME: Hardcode, but seems no need to create a token for this
|
||||
background: `rgba(255, 255, 255, 0.2)`,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
insetInlineStart: -layoutZeroTriggerSize,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
borderEndStartRadius: borderRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// Light
|
||||
...genLayoutLightStyle(token),
|
||||
// RTL
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Layout',
|
||||
token => {
|
||||
const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token;
|
||||
const layoutHeaderPaddingInline = controlHeightLG * 1.25;
|
||||
|
||||
const layoutToken = mergeToken<LayoutToken>(token, {
|
||||
// Layout
|
||||
layoutHeaderHeight: controlHeight * 2,
|
||||
layoutHeaderPaddingInline,
|
||||
layoutHeaderColor: colorText,
|
||||
layoutFooterPadding: `${controlHeightSM}px ${layoutHeaderPaddingInline}px`,
|
||||
layoutTriggerHeight: controlHeightLG + marginXXS * 2, // = item height + margin
|
||||
layoutZeroTriggerSize: controlHeightLG,
|
||||
});
|
||||
|
||||
return [genLayoutStyle(layoutToken)];
|
||||
},
|
||||
token => {
|
||||
const { colorBgLayout } = token;
|
||||
|
||||
return {
|
||||
colorBgHeader: '#001529',
|
||||
colorBgBody: colorBgLayout,
|
||||
colorBgTrigger: '#002140',
|
||||
};
|
||||
},
|
||||
);
|
||||
@ -1,2 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
@ -1,11 +0,0 @@
|
||||
.@{layout-prefix-cls}-sider-light {
|
||||
background: @layout-sider-background-light;
|
||||
.@{layout-prefix-cls}-sider-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
.@{layout-prefix-cls}-sider-zero-width-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import type { LayoutToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
const { componentCls, colorBgContainer, colorBgBody, colorText } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-sider-light`]: {
|
||||
background: colorBgContainer,
|
||||
|
||||
[`${componentCls}-sider-trigger`]: {
|
||||
color: colorText,
|
||||
background: colorBgContainer,
|
||||
},
|
||||
|
||||
[`${componentCls}-sider-zero-width-trigger`]: {
|
||||
color: colorText,
|
||||
background: colorBgContainer,
|
||||
border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
|
||||
borderInlineStart: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genLayoutLightStyle;
|
||||
@ -1,10 +0,0 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@layout-prefix-cls: ~'@{ant-prefix}-layout';
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue