mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Refactor:Component Layout Less to cssinjs (#35102)
* refactor: add basic cssinjs strcture * refactor: add more refactor style * style: modify more style * style: keep the code style consistent
This commit is contained in:
PCCCCCCC
GitHub
parent
4607346d3c
commit
a74fdbc911
@ -83,6 +83,7 @@ export interface OverrideToken {
|
||||
Card?: {};
|
||||
Steps?: {};
|
||||
Menu?: MenuComponentToken;
|
||||
Layout?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -109,7 +109,7 @@ export default () => <SiderDemo />;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
#components-layout-demo-custom-trigger .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -172,7 +172,7 @@ export default () => (
|
||||
margin: 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.site-layout .site-layout-background {
|
||||
#components-layout-demo-fixed-sider .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -56,7 +56,7 @@ export default () => (
|
||||
margin: 16px 24px 16px 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.site-layout .site-layout-background {
|
||||
#components-layout-demo-fixed .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -69,11 +69,11 @@ export default () => (
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.site-layout-sub-header-background {
|
||||
#components-layout-demo-responsive .site-layout-sub-header-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-layout-background {
|
||||
#components-layout-demo-responsive .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -108,7 +108,7 @@ export default () => <SiderDemo />;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
#components-layout-demo-side .site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -96,7 +96,7 @@ export default () => (
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
.site-layout-background {
|
||||
#components-layout-demo-top-side-2 .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -88,7 +88,7 @@ export default () => (
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
.site-layout-background {
|
||||
#components-layout-demo-top-side .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface GeneratorProps {
|
||||
suffixCls: string;
|
||||
@ -46,6 +47,7 @@ function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
|
||||
const Basic = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
|
||||
const { prefixCls, className, children, tagName, ...others } = props;
|
||||
const classString = classNames(prefixCls, className);
|
||||
|
||||
return React.createElement(tagName, { className: classString, ...others, ref }, children);
|
||||
});
|
||||
|
||||
@ -55,6 +57,7 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
|
||||
const [siders, setSiders] = React.useState<string[]>([]);
|
||||
|
||||
const { prefixCls, className, children, hasSider, tagName: Tag, ...others } = props;
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls as string);
|
||||
const classString = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
@ -62,6 +65,7 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
|
||||
const contextValue = React.useMemo(
|
||||
@ -78,12 +82,12 @@ const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props,
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<LayoutContext.Provider value={contextValue}>
|
||||
<Tag ref={ref} className={classString} {...others}>
|
||||
{children}
|
||||
</Tag>
|
||||
</LayoutContext.Provider>
|
||||
</LayoutContext.Provider>,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1,145 +1,146 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@layout-prefix-cls: ~'@{ant-prefix}-layout';
|
||||
@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
// .ant-layout
|
||||
// @layout-prefix-cls: ~'@{ant-prefix}-layout';
|
||||
// @layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
// .@{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;
|
||||
// /* fix firefox can't set height smaller than content on flex item */
|
||||
// min-height: 0;
|
||||
// background: @layout-body-background;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// &,
|
||||
// * {
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
|
||||
&&-has-sider {
|
||||
flex-direction: row;
|
||||
// &&-has-sider {
|
||||
// flex-direction: row;
|
||||
|
||||
> .@{layout-prefix-cls},
|
||||
> .@{layout-prefix-cls}-content {
|
||||
width: 0; // https://segmentfault.com/a/1190000019498300
|
||||
}
|
||||
}
|
||||
// > .@{layout-prefix-cls},
|
||||
// > .@{layout-prefix-cls}-content {
|
||||
// width: 0; // https://segmentfault.com/a/1190000019498300
|
||||
// }
|
||||
// }
|
||||
|
||||
&-header,
|
||||
&-footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
// &-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;
|
||||
}
|
||||
// &-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;
|
||||
}
|
||||
// &-footer {
|
||||
// padding: @layout-footer-padding;
|
||||
// color: @text-color;
|
||||
// font-size: @font-size-base;
|
||||
// background: @layout-footer-background;
|
||||
// }
|
||||
|
||||
&-content {
|
||||
flex: auto;
|
||||
// &-content {
|
||||
// flex: auto;
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
}
|
||||
// /* fix firefox can't set height smaller than content on flex item */
|
||||
// min-height: 0;
|
||||
// }
|
||||
|
||||
&-sider {
|
||||
position: relative;
|
||||
// &-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;
|
||||
// /* 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;
|
||||
// &-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;
|
||||
}
|
||||
}
|
||||
// .@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
|
||||
// width: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-has-trigger {
|
||||
padding-bottom: @layout-trigger-height;
|
||||
}
|
||||
// &-has-trigger {
|
||||
// padding-bottom: @layout-trigger-height;
|
||||
// }
|
||||
|
||||
&-right {
|
||||
order: 1;
|
||||
}
|
||||
// &-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;
|
||||
}
|
||||
// &-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;
|
||||
}
|
||||
// &-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;
|
||||
// &-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: '';
|
||||
}
|
||||
// &::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);
|
||||
}
|
||||
// &: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-right {
|
||||
// left: -@layout-zero-trigger-width;
|
||||
// border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './light';
|
||||
@import './rtl';
|
||||
// @import './light';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,239 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
import genLayoutLightStyle from './light';
|
||||
|
||||
export interface LayoutToken extends FullToken<'Layout'> {
|
||||
// Layout
|
||||
layoutBodyBackground: string;
|
||||
layoutHeaderBackground: string;
|
||||
layoutHeaderHeight: number;
|
||||
layoutHeaderPadding: string;
|
||||
layoutHeaderColor: string;
|
||||
layoutFooterPadding: string;
|
||||
layoutFooterBackground: string;
|
||||
layoutSiderBackground: string;
|
||||
layoutTriggerHeight: number;
|
||||
layoutTriggerBackground: string;
|
||||
layoutTriggerColor: string;
|
||||
layoutZeroTriggerWidth: number;
|
||||
layoutZeroTriggerHeight: number;
|
||||
// Layout Light Theme
|
||||
layoutSiderBackgroundLight: string;
|
||||
layoutTriggerBackgroundLight: string;
|
||||
layoutTriggerColorLight: string;
|
||||
}
|
||||
|
||||
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
const {
|
||||
antCls, // .ant
|
||||
componentCls, // .ant-layout
|
||||
colorText,
|
||||
layoutBodyBackground,
|
||||
layoutHeaderHeight,
|
||||
layoutHeaderPadding,
|
||||
layoutHeaderColor,
|
||||
layoutHeaderBackground,
|
||||
layoutFooterPadding,
|
||||
layoutFooterBackground,
|
||||
layoutSiderBackground,
|
||||
layoutTriggerHeight,
|
||||
layoutTriggerColor,
|
||||
layoutTriggerBackground,
|
||||
layoutZeroTriggerWidth,
|
||||
layoutZeroTriggerHeight,
|
||||
motionDurationMid,
|
||||
motionDurationSlow,
|
||||
fontSizeBase,
|
||||
radiusBase,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
flexDirection: 'column',
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
minHeight: 0, // FIXME: hardcode in v4
|
||||
background: layoutBodyBackground,
|
||||
|
||||
'&, *': {
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
|
||||
[`&${componentCls}-has-sider`]: {
|
||||
flexDirection: 'row',
|
||||
[`> ${componentCls}, > ${componentCls}-content`]: {
|
||||
width: 0, // https://segmentfault.com/a/1190000019498300 // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-header, &${componentCls}-footer`]: {
|
||||
flex: '0 0 auto', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`${componentCls}-header`]: {
|
||||
height: layoutHeaderHeight,
|
||||
padding: layoutHeaderPadding,
|
||||
color: layoutHeaderColor,
|
||||
lineHeight: `${layoutHeaderHeight}px`,
|
||||
background: layoutHeaderBackground,
|
||||
// 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: fontSizeBase,
|
||||
background: layoutFooterBackground,
|
||||
},
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
flex: 'auto',
|
||||
|
||||
// fix firefox can't set height smaller than content on flex item
|
||||
minHeight: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`${componentCls}-sider`]: {
|
||||
position: 'relative',
|
||||
|
||||
// fix firefox can't set width smaller than content on flex item
|
||||
minWidth: 0, // FIXME: hardcode in v4
|
||||
background: layoutSiderBackground,
|
||||
transition: `all ${motionDurationMid}`,
|
||||
|
||||
'&-children': {
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
marginTop: -0.1, // FIXME: hardcode in v4
|
||||
// Hack for fixing margin collaspe bug
|
||||
// https://github.com/ant-design/ant-design/issues/7967
|
||||
// solution from https://stackoverflow.com/a/33132624/3040605
|
||||
paddingTop: 0.1, // FIXME: hardcode in v4
|
||||
|
||||
[`${antCls}-menu${antCls}menu-inline-collapsed`]: {
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
'&-has-trigger': {
|
||||
paddingBottom: layoutTriggerHeight,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
order: 1, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
position: 'fixed',
|
||||
bottom: 0, // FIXME: hardcode in v4
|
||||
zIndex: 1, // FIXME: hardcode in v4
|
||||
height: layoutTriggerHeight,
|
||||
color: layoutTriggerColor,
|
||||
lineHeight: `${layoutTriggerHeight}px`,
|
||||
textAlign: 'center',
|
||||
background: layoutTriggerBackground,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationMid}`,
|
||||
},
|
||||
|
||||
'&-zero-width': {
|
||||
'> *': {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
|
||||
'&-trigger': {
|
||||
position: 'absolute',
|
||||
top: layoutHeaderHeight,
|
||||
insetInlineEnd: -layoutZeroTriggerWidth,
|
||||
zIndex: 1, // FIXME: hardcode in v4
|
||||
width: layoutZeroTriggerWidth,
|
||||
height: layoutZeroTriggerHeight,
|
||||
color: layoutTriggerColor,
|
||||
fontSize: layoutZeroTriggerWidth / 2, // FIXME: hardcode in v4
|
||||
lineHeight: `${layoutZeroTriggerHeight}px`,
|
||||
textAlign: 'center',
|
||||
background: layoutSiderBackground,
|
||||
// borderRadius: `0 ${radiusBase} ${radiusBase} 0`,
|
||||
borderStartStartRadius: 0, // FIXME: hardcode in v4
|
||||
borderStartEndRadius: radiusBase,
|
||||
borderEndEndRadius: radiusBase,
|
||||
borderEndStartRadius: 0, // FIXME: hardcode in v4
|
||||
|
||||
cursor: 'pointer',
|
||||
transition: `background ${motionDurationSlow} ease`,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineEnd: 0, // FIXME: hardcode in v4
|
||||
bottom: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
background: 'transparent',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
'&:hover::after': {
|
||||
background: new TinyColor('#fff').setAlpha(0.1).toRgbString(), // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
insetInlineStart: -layoutZeroTriggerWidth,
|
||||
// borderRadius: `${radiusBase} 0 0 ${radiusBase}`,
|
||||
borderStartStartRadius: radiusBase,
|
||||
borderStartEndRadius: 0, // FIXME: hardcode in v4
|
||||
borderEndEndRadius: 0, // FIXME: hardcode in v4
|
||||
borderEndStartRadius: radiusBase,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// Light
|
||||
...genLayoutLightStyle(token),
|
||||
// RTL
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Layout', token => {
|
||||
const layoutHeaderBackground = '#001529'; // FIXME: hardcode in v4
|
||||
const layoutBodyBackground = '#f0f2f5'; // FIXME: hardcode in v4
|
||||
const { colorText } = token;
|
||||
|
||||
const layoutToken = mergeToken<LayoutToken>(token, {
|
||||
// Layout
|
||||
layoutBodyBackground,
|
||||
layoutHeaderBackground,
|
||||
layoutHeaderHeight: 64, // FIXME: hardcode in v4
|
||||
layoutHeaderPadding: '0 50px', // FIXME: hardcode in v4
|
||||
layoutHeaderColor: colorText,
|
||||
layoutFooterPadding: '24px 50px', // FIXME: hardcode in v4
|
||||
layoutFooterBackground: layoutBodyBackground,
|
||||
layoutSiderBackground: layoutHeaderBackground,
|
||||
layoutTriggerHeight: 48, // FIXME: hardcode in v4
|
||||
layoutTriggerBackground: '#002140', // FIXME: hardcode in v4
|
||||
layoutTriggerColor: '#fff', // FIXME: hardcode in v4
|
||||
layoutZeroTriggerWidth: 36, // FIXME: hardcode in v4
|
||||
layoutZeroTriggerHeight: 42, // FIXME: hardcode in v4
|
||||
// Layout Light Theme
|
||||
layoutSiderBackgroundLight: '#fff', // FIXME: hardcode in v4
|
||||
layoutTriggerBackgroundLight: '#fff', // FIXME: hardcode in v4
|
||||
layoutTriggerColorLight: colorText,
|
||||
});
|
||||
|
||||
return [genLayoutStyle(layoutToken)];
|
||||
});
|
||||
|
||||
28
components/layout/style/light.ts
Normal file
28
components/layout/style/light.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { LayoutToken } from '.';
|
||||
|
||||
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
layoutSiderBackgroundLight,
|
||||
layoutTriggerBackgroundLight,
|
||||
layoutTriggerColorLight,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-sider-light`]: {
|
||||
background: layoutSiderBackgroundLight,
|
||||
[`${componentCls}-sider-trigger`]: {
|
||||
color: layoutTriggerColorLight,
|
||||
background: layoutTriggerBackgroundLight,
|
||||
},
|
||||
[`${componentCls}-sider-zero-width-trigger`]: {
|
||||
color: layoutTriggerColorLight,
|
||||
background: layoutTriggerBackgroundLight,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genLayoutLightStyle;
|
||||
Loading…
Reference in New Issue
Block a user