mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

style: v5 style optimization (#37634)

Browse Source 
* style: ui update

* style: v5 style optimization

* chore: code clean

* style: modal close btn style

* style: notification close button style

* chore: code clean
This commit is contained in:
MadCcc 2022-09-20 21:50:36 +08:00 committed by GitHub
parent 415c22bc8c
commit c60fc82ab3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 241 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/button/style/index.tsx
View File

@ -158,7 +158,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover,
borderColor: token.colorErrorHover,
borderColor: token.colorErrorBorder,
},
{
color: token.colorErrorActive,
@ -288,10 +288,12 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genPureDisabledButtonStyle(token),
...genHoverActiveButtonStyle(
{
color: token.colorError,
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg,
},
{
color: token.colorError,
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg,
},
),
},

1
components/checkbox/style/index.tsx
View File

@ -200,6 +200,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
height: '100%',
borderRadius: token.controlRadiusSM,
visibility: 'hidden',
border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
animationName: antCheckboxEffect,
animationDuration: token.motionDurationSlow,
animationTimingFunction: 'ease-in-out',

10
components/date-picker/style/index.tsx
View File

@ -614,6 +614,16 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&-row': {
td: {
transition: `background ${token.motionDurationFast}`,
'&:first-child': {
borderStartStartRadius: token.radiusSM,
borderEndStartRadius: token.radiusSM,
},
'&:last-child': {
borderStartEndRadius: token.radiusSM,
borderEndEndRadius: token.radiusSM,
},
},
'&:hover td': {

30
components/input/style/index.tsx
View File

@ -70,12 +70,22 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
});
export const genStatusStyle = (token: InputToken): CSSObject => {
const { prefixCls, colorError, colorWarning, colorErrorOutline, colorWarningOutline } = token;
const {
prefixCls,
colorError,
colorWarning,
colorErrorOutline,
colorWarningOutline,
colorErrorBorderHover,
colorWarningBorderHover,
} = token;
return {
'&-status-error:not(&-disabled):not(&-borderless)&': {
'&, &:hover': {
borderColor: colorError,
borderColor: colorError,
'&:hover': {
borderColor: colorErrorBorderHover,
},
'&:focus, &-focused': {
@ -93,8 +103,10 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
},
},
'&-status-warning:not(&-disabled):not(&-borderless)&': {
'&, &:hover': {
borderColor: colorWarning,
borderColor: colorWarning,
'&:hover': {
borderColor: colorWarningBorderHover,
},
'&:focus, &-focused': {
@ -752,6 +764,14 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
[`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
color: token.colorTextDescription,
'&:hover': {
color: token.colorPrimaryHover,
},
'&:active': {
color: token.colorPrimaryActive,
},
[`&${antCls}-btn-loading::before`]: {
insetInlineStart: 0,
insetInlineEnd: 0,

31
components/modal/style/index.tsx
View File

@ -3,7 +3,7 @@ import { initFadeMotion, initZoomMotion } from '../../style/motion';
import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
import { clearFix, resetComponent } from '../../style';
import { clearFix, genFocusStyle, resetComponent } from '../../style';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
@ -24,6 +24,7 @@ export interface ModalToken extends FullToken<'Modal'> {
modalContentBg: string;
modalHeadingColor: string;
modalCloseColor: string;
modalCloseBtnSize: number;
modalFooterBg: string;
modalFooterBorderColorSplit: string;
modalFooterBorderStyle: string;
@ -169,8 +170,8 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
[`${componentCls}-close`]: {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
top: (token.modalHeaderCloseSize - token.modalCloseBtnSize) / 2,
insetInlineEnd: (token.modalHeaderCloseSize - token.modalCloseBtnSize) / 2,
zIndex: token.zIndexPopupBase + 10,
padding: 0,
color: token.modalCloseColor,
@ -178,27 +179,35 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
lineHeight: 1,
textDecoration: 'none',
background: 'transparent',
borderRadius: token.radiusSM,
width: token.modalConfirmIconSize,
height: token.modalConfirmIconSize,
border: 0,
outline: 0,
cursor: 'pointer',
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}, background-color ${token.motionDurationFast}`,
'&-x': {
display: 'block',
width: token.modalHeaderCloseSize,
height: token.modalHeaderCloseSize,
fontSize: token.fontSizeLG,
fontStyle: 'normal',
lineHeight: `${token.modalHeaderCloseSize}px`,
lineHeight: `${token.modalCloseBtnSize}px`,
textAlign: 'center',
textTransform: 'none',
textRendering: 'auto',
},
'&:focus, &:hover': {
'&:hover': {
color: token.modalIconHoverColor,
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
textDecoration: 'none',
},
'&:active': {
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContentHover,
},
...genFocusStyle(token),
},
[`${componentCls}-header`]: {
@ -271,12 +280,15 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
fontWeight: token.fontWeightStrong,
fontSize: token.modalHeaderTitleFontSize,
lineHeight: token.modalHeaderTitleLineHeight,
[`+ ${confirmComponentCls}-content`]: {
marginBlockStart: token.marginXS,
},
},
[`${confirmComponentCls}-content`]: {
color: token.colorText,
fontSize: token.fontSizeBase,
marginBlockStart: token.marginXS,
},
[`> ${token.iconCls}`]: {
@ -417,6 +429,7 @@ export default genComponentStyleHook('Modal', token => {
modalConfirmTitleFontSize: token.fontSizeLG,
modalIconHoverColor: token.colorIconHover,
modalConfirmIconSize: token.fontSize * token.lineHeight,
modalCloseBtnSize: token.controlHeightLG * 0.55,
});
return [
genModalStyle(modalToken),

10
components/notification/style/index.tsx
View File

@ -19,6 +19,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
notificationMarginEdge: number;
animationMaxHeight: number;
notificationIconSize: number;
notificationCloseButtonSize: number;
}
const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
@ -226,9 +227,17 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
insetInlineEnd: token.notificationPaddingHorizontal,
color: token.colorIcon,
outline: 'none',
width: token.notificationCloseButtonSize,
height: token.notificationCloseButtonSize,
borderRadius: token.radiusSM,
transition: `background-color ${token.motionDurationFast}, color ${token.motionDurationFast}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
color: token.colorIconHover,
backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
},
},
@ -266,6 +275,7 @@ export default genComponentStyleHook(
notificationMarginEdge: token.marginLG,
animationMaxHeight: 150,
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
notificationCloseButtonSize: token.controlHeightLG * 0.55,
});
return [genNotificationStyle(notificationToken)];

99
components/pagination/style/index.tsx
View File

@ -61,16 +61,24 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
[`${componentCls}-item`]: {
cursor: 'not-allowed',
'&:hover, &:active': {
backgroundColor: 'transparent',
},
a: {
color: token.colorTextDisabled,
background: 'transparent',
backgroundColor: 'transparent',
border: 'none',
cursor: 'not-allowed',
},
'&-active': {
borderColor: token.colorBorder,
background: token.paginationItemDisabledBgActive,
backgroundColor: token.paginationItemDisabledBgActive,
'&:hover, &:active': {
backgroundColor: token.paginationItemDisabledBgActive,
},
a: {
color: token.paginationItemDisabledColorActive,
@ -82,8 +90,12 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:hover, &:active': {
backgroundColor: 'transparent',
},
[`${componentCls}-simple&`]: {
background: 'transparent',
backgroundColor: 'transparent',
},
},
@ -119,7 +131,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
},
[`&&-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
background: 'transparent',
backgroundColor: 'transparent',
borderColor: 'transparent',
},
@ -134,7 +146,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
&&-mini ${componentCls}-prev ${componentCls}-item-link,
&&-mini ${componentCls}-next ${componentCls}-item-link
`]: {
background: 'transparent',
backgroundColor: 'transparent',
borderColor: 'transparent',
'&::after': {
@ -222,7 +234,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
'&[disabled]': {
color: token.colorTextDisabled,
background: token.colorBgContainerDisabled,
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed',
},
@ -351,7 +363,17 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
},
[`&:hover ${componentCls}-item-link`]: {
color: token.colorPrimary,
backgroundColor: token.colorBgTextHover,
},
[`&:active ${componentCls}-item-link`]: {
backgroundColor: token.colorBgTextActive,
},
[`&${componentCls}-disabled:hover`]: {
[`${componentCls}-item-link`]: {
backgroundColor: 'transparent',
},
},
},
@ -423,11 +445,14 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
},
},
'&:hover': {
transition: `all ${token.motionDurationFast}`,
[`&:not(${componentCls}-item-active)`]: {
'&:hover': {
transition: `all ${token.motionDurationFast}`,
backgroundColor: token.colorBgTextHover,
},
a: {
color: token.colorPrimary,
'&:active': {
backgroundColor: token.colorBgTextActive,
},
},
@ -437,7 +462,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
'&-active': {
fontWeight: token.paginationFontWeightActive,
background: token.paginationItemBgActive,
backgroundColor: token.paginationItemBgActive,
borderColor: token.colorPrimary,
a: {
@ -528,7 +553,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
const { componentCls } = token;
return {
[`${componentCls}-disabled`]: {
[`${componentCls}${componentCls}-disabled`]: {
'&, &:hover': {
[`${componentCls}-item-link`]: {
borderColor: token.colorBorder,
@ -541,14 +566,35 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
},
},
[`${componentCls}-item`]: {
background: token.colorBgContainerDisabled,
[`${componentCls}-item, ${componentCls}-item-link`]: {
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
[`&:hover:not(${componentCls}-item-active)`]: {
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
a: {
color: token.colorTextDisabled,
},
},
[`&${componentCls}-item-active`]: {
backgroundColor: token.paginationItemDisabledBgActive,
},
},
[`${componentCls}-item-link`]: {
background: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
[`${componentCls}-prev, ${componentCls}-next`]: {
'&:hover button': {
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
color: token.colorTextDisabled,
},
[`${componentCls}-item-link`]: {
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
},
},
},
@ -556,6 +602,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
[`${componentCls}-prev, ${componentCls}-next`]: {
'&:hover button': {
borderColor: token.colorPrimaryHover,
backgroundColor: token.paginationItemBg,
},
[`${componentCls}-item-link`]: {
@ -565,6 +612,15 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
[`&:hover ${componentCls}-item-link`]: {
borderColor: token.colorPrimary,
backgroundColor: token.paginationItemBg,
color: token.colorPrimary,
},
[`&${componentCls}-disabled`]: {
[`${componentCls}-item-link`]: {
borderColor: token.colorBorder,
color: token.colorTextDisabled,
},
},
},
@ -572,8 +628,13 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
backgroundColor: token.paginationItemBg,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
'&:hover': {
[`&:hover:not(${componentCls}-item-active)`]: {
borderColor: token.colorPrimary,
backgroundColor: token.paginationItemBg,
a: {
color: token.colorPrimary,
},
},
'&-active': {

25
components/segmented/style/index.tsx
View File

@ -84,7 +84,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
position: 'relative',
textAlign: 'center',
cursor: 'pointer',
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}, background-color ${token.motionDurationFast} ${token.motionEaseInOut}`,
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}`,
borderRadius: token.controlRadiusSM,
'&-selected': {
@ -92,17 +92,21 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
color: token.labelColorHover,
},
'&::after': {
content: '""',
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
insetInlineStart: 0,
borderRadius: token.controlRadiusSM,
transition: `background-color ${token.motionDurationFast}`,
},
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
color: token.labelColorHover,
'&::after': {
content: '""',
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
insetInlineStart: 0,
borderRadius: token.controlRadiusSM,
backgroundColor: token.bgColorHover,
},
},
@ -171,6 +175,11 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
height: '100%',
padding: `${token.paddingXXS}px 0`,
borderRadius: token.controlRadiusSM,
[`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]:
{
backgroundColor: 'transparent',
},
},
// transition effect when `appear-active`

99
components/slider/style/index.tsx
View File

@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type * as React from 'react';
import { TinyColor } from '@ctrl/tinycolor';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
@ -15,6 +15,7 @@ export interface ComponentToken {
controlSize: number;
railSize: number;
handleSize: number;
handleSizeHover: number;
handleLineWidth: number;
handleLineWidthHover: number;
dotSize: number;
@ -24,7 +25,6 @@ interface SliderToken extends FullToken<'Slider'> {
marginFull: number;
marginPart: number;
marginPartWithMark: number;
handleFocusShadow: string;
}
// =============================== Base ===============================
@ -72,25 +72,58 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
position: 'absolute',
width: token.handleSize,
height: token.handleSize,
backgroundColor: token.colorBgContainer,
border: `${token.handleLineWidth}px solid ${token.colorPrimaryBorder}`,
outline: `0 solid ${token.colorPrimaryBorder}`,
borderRadius: '50%',
cursor: 'pointer',
transition: `
border ${token.motionDurationFast},
outline ${token.motionDurationFast}
`,
[`${componentCls}-dragging`]: {
zIndex: 1,
},
// 扩大选区
'&::before': {
content: '""',
position: 'absolute',
insetInlineStart: 0,
insetBlockStart: 0,
width: token.handleSize + token.handleLineWidth * 2,
height: token.handleSize + token.handleLineWidth * 2,
backgroundColor: 'transparent',
},
'&::after': {
content: '""',
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
width: token.handleSize,
height: token.handleSize,
backgroundColor: token.colorBgContainer,
outline: `${token.handleLineWidth}px solid ${token.colorPrimaryBorder}`,
borderRadius: '50%',
cursor: 'pointer',
transition: `
inset-inline-start ${token.motionDurationFast},
inset-block-start ${token.motionDurationFast},
width ${token.motionDurationFast},
height ${token.motionDurationFast},
outline ${token.motionDurationFast}
`,
},
'&:hover, &:active, &:focus-visible': {
boxShadow: `none`,
outlineWidth: token.handleLineWidthHover,
outlineColor: token.colorPrimary,
borderWidth: 0,
'&::before': {
insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
insetBlockStart: (token.handleSize - token.handleSizeHover) / 2,
width: token.handleSizeHover + token.handleLineWidthHover * 2,
height: token.handleSizeHover + token.handleLineWidthHover * 2,
},
'&::after': {
outlineWidth: token.handleLineWidthHover,
outlineColor: token.colorPrimary,
width: token.handleSizeHover,
height: token.handleSizeHover,
insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
insetBlockStart: (token.handleSize - token.handleSizeHover) / 2,
},
},
},
@ -107,18 +140,12 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
borderColor: colorFillContentHover,
},
[`${componentCls}-handle${antCls}-tooltip-open`]: {
borderColor: token.colorPrimary,
[`${componentCls}-handle${antCls}-tooltip-open::after`]: {
outlineColor: token.colorPrimary,
},
// We use below style instead
// ${sliderCls}-handle:not(.@{ant-prefix}-tooltip-open) {
// border-color: @slider-handle-color-hover;
// }
[`
${componentCls}-handle,
${componentCls}-handle::after,
${componentCls}-dot-active
`]: {
borderColor: token.colorPrimary,
@ -166,7 +193,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
},
},
'&-disabled': {
'&&-disabled': {
cursor: 'not-allowed',
[`${componentCls}-rail`]: {
@ -178,15 +205,26 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
},
[`
${componentCls}-handle,
${componentCls}-handle::after,
${componentCls}-dot
`]: {
backgroundColor: token.colorBgContainer,
borderColor: `${token.colorTextDisabled} !important`,
borderColor: token.colorTextDisabled,
outlineColor: new TinyColor(token.colorTextDisabled)
.onBackground(token.colorBgContainer)
.toHexString(),
boxShadow: 'none',
cursor: 'not-allowed',
},
[`${componentCls}-handle::after`]: {
width: token.handleSize,
height: token.handleSize,
outlineWidth: token.handleLineWidth,
insetInlineStart: 0,
insetBlockStart: 0,
},
[`
${componentCls}-mark-text,
${componentCls}-dot
@ -283,9 +321,6 @@ export default genComponentStyleHook(
marginPart: (token.controlHeight - token.controlSize) / 2,
marginFull: token.controlSize / 2,
marginPartWithMark: token.controlHeightLG - token.controlSize,
handleFocusShadow: `0 0 0 5px ${new TinyColor(token.colorPrimary)
.setAlpha(0.12)
.toRgbString()}`,
});
return [
genBaseStyle(sliderToken),
@ -296,13 +331,15 @@ export default genComponentStyleHook(
token => {
// Handle line width is always width-er 1px
const increaseHandleWidth = 1;
const controlSize = token.controlHeightSM / 2;
const controlSize = token.controlHeightLG / 4;
const controlSizeHover = token.controlHeightSM / 2;
const handleLineWidth = token.lineWidth + increaseHandleWidth;
const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
return {
controlSize,
railSize: controlSize / 3,
handleSize: controlSize + handleLineWidth,
handleSize: controlSize,
handleSizeHover: controlSizeHover,
dotSize: (controlSize / 3) * 2,
handleLineWidth,
handleLineWidthHover,

4
components/switch/style/index.tsx
View File

@ -159,7 +159,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
transition: `all ${token.motionDurationFast}`,
userSelect: 'none',
'&:hover': {
[`&:hover:not(${componentCls}-disabled)`]: {
background: token.colorTextTertiary,
},
@ -168,7 +168,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
[`&${token.componentCls}-checked`]: {
background: token.switchColor,
'&:hover': {
[`&:hover:not(${componentCls}-disabled)`]: {
background: token.colorPrimaryHover,
},
},

2
components/theme/util/alias.ts
View File

@ -99,7 +99,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
controlItemBgHover: mergedToken.colorFillTertiary,
controlItemBgActive: mergedToken.colorPrimaryBg,
controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
controlItemBgActiveDisabled: mergedToken.colorTextQuaternary,
controlItemBgActiveDisabled: mergedToken.colorFill,
controlTmpOutline: mergedToken.colorFillQuaternary,
controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),