Skip to content

Commit

Permalink
feat: Update code
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuintun
nuintun committed May 10, 2024
1 parent d0a1ba0 commit b071189
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 118 deletions.
15 changes: 8 additions & 7 deletions app/js/components/FlexLayout/style/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default createStyles(
const lineType = layout?.lineType ?? token.lineType;
const lineWidth = layout?.lineWidth ?? token.lineWidth;
const colorSplit = layout?.colorSplit ?? token.colorSplit;
const motionDurationMid = layout?.motionDurationMid ?? token.motionDurationMid;

return {
[`.${prefixCls}`]: {
Expand All @@ -26,16 +27,16 @@ export default createStyles(
display: 'flex',
overflow: 'hidden',
placeItems: 'center',
fontSize: token.fontSizeXL,
transition: `all ${token.motionDurationMid}`,
transition: `all ${motionDurationMid}`,
color: layout?.headerColor ?? token.colorText,
fontSize: layout?.fontSizeXL ?? token.fontSizeXL,
borderBlockEnd: `${unit(lineWidth)} ${lineType} ${colorSplit}`,

[`.${prefixCls}-trigger`]: {
flex: 0,

'&:hover': {
color: token.colorPrimary
color: layout?.colorPrimary ?? token.colorPrimary
}
},

Expand All @@ -51,22 +52,22 @@ export default createStyles(
[`.${prefixCls}-actions-header`]: {
flex: 1,
display: 'flex',
gap: token.margin,
placeItems: 'center',
padding: `0 ${unit(token.paddingXS)}`
gap: layout?.margin ?? token.margin,
padding: `0 ${unit(layout?.paddingXS ?? token.paddingXS)}`
}
},

[`.${prefixCls}-content`]: {
height: '100%',
overflow: 'auto',
position: 'relative',
color: token.colorText,
msScrollChaining: 'none',
scrollBehavior: 'smooth',
OverscrollBehavior: 'contain',
WebkitOverflowScrolling: 'touch',
transition: `all ${token.motionDurationMid}`
transition: `all ${motionDurationMid}`,
color: layout?.colorText ?? token.colorText
},

[`&.${prefixCls}-dark`]: {
Expand Down
4 changes: 2 additions & 2 deletions app/js/components/FlexMenu/style/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ export default createStyles(
whiteSpace: 'nowrap',
wordBreak: 'keep-all',
height: unit(headerHeight),
transition: `all ${token.motionDurationMid}`,
color: layout?.headerColor ?? token.colorText,
borderBlockEnd: `${unit(lineWidth)} ${lineType} ${colorSplit}`
borderBlockEnd: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
transition: `all ${layout?.motionDurationMid ?? token.motionDurationMid}`
},

[`.${prefixCls}-body`]: {
Expand Down
44 changes: 25 additions & 19 deletions app/js/components/Layout/style/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,32 @@ import createStyles from '/js/hooks/createStyles';

export const prefixCls = 'ui-header-actions';

export default createStyles(['components', 'Layout', 'ActionsHeader', prefixCls], token => {
return {
[`.${prefixCls}`]: {
flex: 1,
display: 'flex',
gap: token.margin,
overflow: 'hidden',
placeItems: 'center',
justifyContent: 'flex-end',
export default createStyles(
['components', 'Layout', 'ActionsHeader', prefixCls],
token => {
const layout = token.Layout;

'> *:hover': {
color: token.colorPrimary
},

[`.${prefixCls}-profile`]: {
return {
[`.${prefixCls}`]: {
flex: 1,
display: 'flex',
cursor: 'default',
overflow: 'hidden',
placeItems: 'center',
gap: token.marginXXS
justifyContent: 'flex-end',
gap: layout?.margin ?? token.margin,

'> *:hover': {
color: layout?.colorPrimary ?? token.colorPrimary
},

[`.${prefixCls}-profile`]: {
display: 'flex',
cursor: 'default',
placeItems: 'center',
gap: layout?.marginXXS ?? token.marginXXS
}
}
}
};
});
};
},
['Layout']
);
2 changes: 1 addition & 1 deletion app/js/components/Layout/style/logo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default createStyles(
color: layout?.headerColor ?? token.colorText,

'&:hover': {
color: token.colorPrimary
color: layout?.colorPrimary ?? token.colorPrimary
}
}
}
Expand Down
1 change: 0 additions & 1 deletion app/js/components/Paper/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/

import React, { memo } from 'react';

import classNames from 'classnames';
import useStyles, { prefixCls } from './style';

Expand Down
98 changes: 52 additions & 46 deletions app/js/components/RouteBreadcrumb/style/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,61 @@ import createStyles from '/js/hooks/createStyles';

export const prefixCls = 'ui-route-breadcrumb';

export default createStyles(['components', 'RouteBreadcrumb', prefixCls], (token, { unit }) => {
const { colorPrimary, fontSizeHeading2 } = token;

return {
[`.${prefixCls}`]: {
overflowY: 'hidden',
whiteSpace: 'nowrap',
color: token.colorText,
scrollbarWidth: 'none',
msOverflowStyle: 'none',
fontSize: token.fontSize,
height: fontSizeHeading2,
msScrollChaining: 'none',
OverscrollBehavior: 'contain',
WebkitOverflowScrolling: 'touch',
padding: `0 ${unit(token.paddingXS)}`,
backgroundColor: token.colorBgContainer,
lineHeight: `${unit(fontSizeHeading2)}`,

'&::-webkit-scrollbar': {
display: 'none'
},

[`.${prefixCls}-link, .${prefixCls}-item`]: {
display: 'flex',
cursor: 'default',
alignItems: 'center',

[`.${prefixCls}-icon`]: {
marginInlineEnd: token.marginXXS,

'> img': {
width: 'auto',
height: fontSizeHeading2
}
export default createStyles(
['components', 'RouteBreadcrumb', prefixCls],
(token, { unit }) => {
const breadcrumb = token.Breadcrumb;
const colorPrimary = breadcrumb?.colorPrimary ?? token.colorPrimary;
const fontSizeHeading2 = breadcrumb?.fontSizeHeading2 ?? token.fontSizeHeading2;

return {
[`.${prefixCls}`]: {
overflowY: 'hidden',
whiteSpace: 'nowrap',
color: token.colorText,
scrollbarWidth: 'none',
msOverflowStyle: 'none',
height: fontSizeHeading2,
msScrollChaining: 'none',
OverscrollBehavior: 'contain',
WebkitOverflowScrolling: 'touch',
backgroundColor: token.colorBgContainer,
lineHeight: `${unit(fontSizeHeading2)}`,
fontSize: breadcrumb?.fontSize ?? token.fontSize,
padding: `0 ${unit(breadcrumb?.paddingXS ?? token.paddingXS)}`,

'&::-webkit-scrollbar': {
display: 'none'
},

'&.active': {
color: colorPrimary
}
},
[`.${prefixCls}-link, .${prefixCls}-item`]: {
display: 'flex',
cursor: 'default',
alignItems: 'center',

[`.${prefixCls}-icon`]: {
marginInlineEnd: breadcrumb?.marginXXS ?? token.marginXXS,

[`.${prefixCls}-link`]: {
cursor: 'pointer',
'> img': {
width: 'auto',
height: fontSizeHeading2
}
},

'&:hover': {
color: colorPrimary
'&.active': {
color: colorPrimary
}
},

[`.${prefixCls}-link`]: {
cursor: 'pointer',

'&:hover': {
color: colorPrimary
}
}
}
}
};
});
};
},
['Breadcrumb']
);
6 changes: 4 additions & 2 deletions app/js/components/RouteMenu/style/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ export const prefixCls = 'ui-route-menu';
export default createStyles(
['components', 'RouteMenu', prefixCls],
(token, { calc, unit }) => {
const { marginXXS, fontSizeLG } = token;
const marginInline = token.Menu?.itemMarginInline ?? marginXXS;
const menu = token.Menu;
const marginXXS = menu?.marginXXS ?? token.marginXXS;
const fontSizeLG = menu?.fontSizeLG ?? token.fontSizeLG;
const marginInline = menu?.itemMarginInline ?? marginXXS;

return {
[`.${prefixCls}`]: {
Expand Down
88 changes: 48 additions & 40 deletions app/js/components/RouteTabs/style/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,60 @@ import createStyles from '/js/hooks/createStyles';

export const prefixCls = 'ui-route-tabs';

export default createStyles(['components', 'RouteTabs', prefixCls], (token, { unit }) => {
const { fontSizeLG } = token;

return {
[`.${prefixCls}`]: {
marginBlockStart: -1,
borderBlockStart: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,

'> [role=tablist]': {
margin: 0,
paddingBlock: 0,
paddingInline: token.padding,
backgroundColor: token.colorBgContainer,

'&::before': {
display: 'none'
}
},
export default createStyles(
['components', 'RouteTabs', prefixCls],
(token, { unit }) => {
const tabs = token.Tabs;
const lineType = tabs?.lineType ?? token.lineType;
const lineWidth = tabs?.lineWidth ?? token.lineWidth;
const colorSplit = tabs?.colorSplit ?? token.colorSplit;
const fontSizeLG = token.Tabs?.fontSizeLG ?? token.fontSizeLG;

return {
[`.${prefixCls}`]: {
marginBlockStart: -1,
borderBlockStart: `${unit(lineWidth)} ${lineType} ${colorSplit}`,

[`.${prefixCls}-nav`]: {
color: 'inherit',
fontSize: fontSizeLG,
lineHeight: unit(fontSizeLG),
'> [role=tablist]': {
margin: 0,
paddingBlock: 0,
paddingInline: tabs?.padding ?? token.padding,
backgroundColor: tabs?.colorBgContainer ?? token.colorBgContainer,

[`&:hover, &.${prefixCls}-active`]: {
color: 'inherit'
'&::before': {
display: 'none'
}
},

[`.${prefixCls}-icon`]: {
margin: 'unset',
marginInlineEnd: token.marginXXS,
[`.${prefixCls}-nav`]: {
color: 'inherit',
fontSize: fontSizeLG,
lineHeight: unit(fontSizeLG),

[`&:hover, &.${prefixCls}-active`]: {
color: 'inherit'
},

'> img': {
width: 'auto',
height: fontSizeLG
[`.${prefixCls}-icon`]: {
margin: 'unset',
marginInlineEnd: tabs?.marginXXS ?? token.marginXXS,

'> img': {
width: 'auto',
height: fontSizeLG
}
}
}
}
},
},

[`.${prefixCls}-vertical`]: {
'> [role=tablist]': {
paddingInline: 0,
borderBlockStart: 'none',
paddingBlock: token.paddingXS
[`.${prefixCls}-vertical`]: {
'> [role=tablist]': {
paddingInline: 0,
borderBlockStart: 'none',
paddingBlock: tabs?.paddingXS ?? token.paddingXS
}
}
}
};
});
};
},
['Tabs']
);

0 comments on commit b071189

Please sign in to comment.