Skip to content

Commit

Permalink
fix(card): fix card hover error style
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenshuai2144
chenshuai2144 committed Oct 18, 2022
1 parent 3c8406e commit 7ab8e7e
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 85 deletions.
21 changes: 6 additions & 15 deletions packages/card/src/components/Card/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-utils';
import { resetComponent, useStyle as useAntdStyle } from '@ant-design/pro-utils';

type NewType = ProAliasToken;

interface ProCardToken extends NewType {
interface ProCardToken extends ProAliasToken {
componentCls: string;
cardHoverableHoverBorder: string;
proCardDefaultBorder: string;
cardShadow: string;
}

const genActiveStyle = (token: ProCardToken) => ({
Expand Down Expand Up @@ -36,24 +31,24 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
fontFamily: token.fontFamily,
},
'&-box-shadow': {
boxShadow: token.boxShadowCard,
borderColor: token.cardHoverableHoverBorder,
boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
borderColor: 'transparent',
},
'&-col': {
width: '100%',
},

'&-border': {
border: token.proCardDefaultBorder,
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
},

'&-hoverable': {
cursor: 'pointer',
transition: 'box-shadow 0.3s, border-color 0.3s',

'&:hover': {
borderColor: token.cardHoverableHoverBorder,
boxShadow: token.cardShadow,
borderColor: 'transparent',
boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
},

[`&${componentCls}-checked:hover`]: {
Expand Down Expand Up @@ -303,10 +298,6 @@ export default function useStyle(prefixCls: string) {
const proCardToken: ProCardToken = {
...token,
componentCls: `.${prefixCls}`,
cardHoverableHoverBorder: 'transparent',
proCardDefaultBorder: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
cardShadow:
'0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36)',
};

return [genProCardStyle(proCardToken), genGridStyle(proCardToken)];
Expand Down
1 change: 1 addition & 0 deletions packages/utils/src/useStyle/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export function useStyle(
* @example .ant-pro
*/
const proComponentsCls = `.${getPrefixCls()}-pro`;

return {
wrapSSR: useStyleRegister(
{
Expand Down
147 changes: 77 additions & 70 deletions packages/utils/src/useStyle/token.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from 'react';

export const defaultTheme = {
blue: '#1890FF',
blue: '#1677ff',
purple: '#722ED1',
cyan: '#13C2C2',
green: '#52C41A',
Expand All @@ -18,12 +18,12 @@ export const defaultTheme = {
colorSuccess: '#52c41a',
colorWarning: '#faad14',
colorError: '#ff4d4f',
colorInfo: '#1677FF',
colorInfo: '#1677ff',
colorTextBase: '#000',
colorTextLightSolid: '#fff',
colorBgBase: '#fff',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\\n'Noto Color Emoji'",
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'",
fontSizeBase: 14,
gridUnit: 4,
gridBaseStep: 2,
Expand All @@ -38,24 +38,25 @@ export const defaultTheme = {
motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
motionEaseInQuint: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
radiusBase: 4,
radiusBase: 6,
sizeUnit: 4,
sizeBaseStep: 4,
sizePopupArrow: 11.313708498984761,
sizePopupArrow: 16,
controlHeight: 32,
zIndexBase: 0,
zIndexPopupBase: 1000,
opacityImage: 1,
'blue-1': '#e6f7ff',
'blue-2': '#bae7ff',
'blue-3': '#91d5ff',
'blue-4': '#69c0ff',
'blue-5': '#40a9ff',
'blue-6': '#1890ff',
'blue-7': '#096dd9',
'blue-8': '#0050b3',
'blue-9': '#003a8c',
'blue-10': '#002766',
wireframe: false,
'blue-1': '#e6f4ff',
'blue-2': '#bae0ff',
'blue-3': '#91caff',
'blue-4': '#69b1ff',
'blue-5': '#4096ff',
'blue-6': '#1677ff',
'blue-7': '#0958d9',
'blue-8': '#003eb3',
'blue-9': '#002c8c',
'blue-10': '#001d66',
'purple-1': '#f9f0ff',
'purple-2': '#efdbff',
'purple-3': '#d3adf7',
Expand Down Expand Up @@ -176,20 +177,20 @@ export const defaultTheme = {
'lime-8': '#5b8c00',
'lime-9': '#3f6600',
'lime-10': '#254000',
colorFill: 'rgba(0, 0, 0, 0.06)',
colorFillSecondary: 'rgba(0, 0, 0, 0.04)',
colorFillTertiary: 'rgba(0, 0, 0, 0.03)',
colorText: 'rgba(0, 0, 0, 0.88)',
colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',
colorFill: 'rgba(0, 0, 0, 0.15)',
colorFillSecondary: 'rgba(0, 0, 0, 0.06)',
colorFillTertiary: 'rgba(0, 0, 0, 0.04)',
colorFillQuaternary: 'rgba(0, 0, 0, 0.02)',
bgLayout: '#f5f5f5',
colorBgLayout: '#f5f5f5',
colorBgContainer: '#ffffff',
colorBgElevated: '#ffffff',
colorBgSpotlight: 'rgba(0, 0, 0, 0.85)',
colorBorder: '#d9d9d9',
colorBorderSecondary: '#f0f0f0',
colorSplit: 'rgba(0, 0, 0, 0.06)',
colorText: 'rgba(0, 0, 0, 0.85)',
colorTextSecondary: 'rgba(0, 0, 0, 0.45)',
colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',
colorPrimaryBg: '#e6f4ff',
colorPrimaryBgHover: '#bae0ff',
colorPrimaryBorder: '#91caff',
Expand All @@ -203,40 +204,39 @@ export const defaultTheme = {
colorSuccessBgHover: '#d9f7be',
colorSuccessBorder: '#b7eb8f',
colorSuccessBorderHover: '#95de64',
colorSuccessHover: '#73d13d',
colorSuccessHover: '#95de64',
colorSuccessActive: '#389e0d',
colorSuccessTextHover: '#73d13d',
colorSuccessText: '#52c41a',
colorSuccessTextActive: '#389e0d',
colorErrorBg: '#fff2f0',
colorErrorBgHover: '#fff1f0',
colorErrorBorder: '#ffccc7',
colorErrorBorderHover: '#ffa39e',
colorErrorBg: '#fff1f0',
colorErrorBgHover: '#ffccc7',
colorErrorBorder: '#ffa39e',
colorErrorBorderHover: '#ff7875',
colorErrorHover: '#ff7875',
colorErrorActive: '#d9363e',
colorErrorTextHover: '#ff7875',
colorErrorText: '#ff4d4f',
colorErrorTextActive: '#d9363e',
colorErrorActive: '#cf1322',
colorErrorTextHover: '#ff4d4f',
colorErrorText: '#f5222d',
colorErrorTextActive: '#cf1322',
colorWarningBg: '#fffbe6',
colorWarningBgHover: '#fff1b8',
colorWarningBorder: '#ffe58f',
colorWarningBorderHover: '#ffd666',
colorWarningHover: '#ffc53d',
colorWarningHover: '#ffd666',
colorWarningActive: '#d48806',
colorWarningTextHover: '#ffc53d',
colorWarningText: '#faad14',
colorWarningTextActive: '#d48806',
colorInfoBg: '#e6f7ff',
colorInfoBgHover: '#bae7ff',
colorInfoBorder: '#91d5ff',
colorInfoBorderHover: '#69c0ff',
colorInfoHover: '#40a9ff',
colorInfoActive: '#096dd9',
colorInfoTextHover: '#40a9ff',
colorInfoText: '#1890ff',
colorInfoTextActive: '#096dd9',
colorInfoBg: '#e6f4ff',
colorInfoBgHover: '#bae0ff',
colorInfoBorder: '#91caff',
colorInfoBorderHover: '#69b1ff',
colorInfoHover: '#69b1ff',
colorInfoActive: '#0958d9',
colorInfoTextHover: '#4096ff',
colorInfoText: '#1677ff',
colorInfoTextActive: '#0958d9',
colorBgMask: 'rgba(0, 0, 0, 0.45)',
colorBgSpotlight: 'rgba(0, 0, 0, 0.85)',
motionDurationFast: '0.1s',
motionDurationMid: '0.2s',
motionDurationSlow: '0.3s',
Expand All @@ -255,31 +255,34 @@ export const defaultTheme = {
gridSpaceXL: 16,
gridSpaceXXL: 28,
lineWidthBold: 2,
radiusSM: 2,
radiusXS: 2,
radiusSM: 4,
radiusLG: 8,
radiusXL: 16,
radiusOuter: 4,
controlHeightSM: 24,
controlHeightXS: 16,
controlHeightLG: 40,
Layout: { colorBgHeader: 'transparent', colorBgBody: 'transparent' },
colorLink: '#1677ff',
colorLinkHover: '#4096ff',
colorLinkHover: '#69b1ff',
colorLinkActive: '#0958d9',
colorFillContent: 'rgba(0, 0, 0, 0.04)',
colorFillContentHover: 'rgba(0, 0, 0, 0.06)',
colorFillContent: 'rgba(0, 0, 0, 0.06)',
colorFillContentHover: 'rgba(0, 0, 0, 0.15)',
colorFillAlter: 'rgba(0, 0, 0, 0.02)',
colorBgContainerDisabled: 'rgba(0, 0, 0, 0.03)',
colorBgContainerDisabled: 'rgba(0, 0, 0, 0.04)',
colorBorderBg: '#ffffff',
colorSplit: 'rgba(5, 5, 5, 0.06)',
colorTextPlaceholder: 'rgba(0, 0, 0, 0.25)',
colorTextDisabled: 'rgba(0, 0, 0, 0.25)',
colorTextHeading: 'rgba(0, 0, 0, 0.85)',
colorTextHeading: 'rgba(0, 0, 0, 0.88)',
colorTextLabel: 'rgba(0, 0, 0, 0.65)',
colorTextDescription: 'rgba(0, 0, 0, 0.65)',
colorTextDescription: 'rgba(0, 0, 0, 0.45)',
colorHighlight: '#ff4d4f',
colorBgTextHover: 'rgba(0, 0, 0, 0.06)',
colorBgTextActive: 'rgba(0, 0, 0, 0.15)',
colorIcon: 'rgba(0, 0, 0, 0.45)',
colorIconHover: 'rgba(0, 0, 0, 0.85)',
colorErrorOutline: '#fff2f0',
colorWarningOutline: '#fffbe6',
colorIconHover: 'rgba(0, 0, 0, 0.88)',
colorErrorOutline: 'rgba(255, 22, 5, 0.06)',
colorWarningOutline: 'rgba(255, 215, 5, 0.1)',
fontSizeSM: 12,
fontSize: 14,
fontSizeLG: 16,
Expand All @@ -301,14 +304,17 @@ export const defaultTheme = {
controlLineWidth: 1,
controlOutlineWidth: 2,
controlInteractiveSize: 16,
controlItemBgHover: 'rgba(0, 0, 0, 0.03)',
controlItemBgHover: 'rgba(0, 0, 0, 0.04)',
controlItemBgActive: '#e6f4ff',
controlItemBgActiveHover: '#bae0ff',
controlItemBgActiveDisabled: 'rgba(0, 0, 0, 0.25)',
controlItemBgActiveDisabled: 'rgba(0, 0, 0, 0.15)',
controlTmpOutline: 'rgba(0, 0, 0, 0.02)',
controlOutline: '#e6f4ff',
controlOutline: 'rgba(5, 145, 255, 0.1)',
controlLineType: 'solid',
controlRadius: 4,
controlRadius: 6,
controlRadiusXS: 2,
controlRadiusSM: 4,
controlRadiusLG: 8,
fontWeightStrong: 600,
opacityLoading: 0.65,
linkDecoration: 'none',
Expand All @@ -323,14 +329,18 @@ export const defaultTheme = {
paddingSM: 12,
paddingLG: 24,
paddingXL: 32,
paddingTmp: 20,
marginXXS: 4,
marginXS: 8,
marginSM: 12,
marginLG: 24,
marginXL: 32,
marginXXL: 48,
marginTmp: 20,
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)',
'\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ',
boxShadowSecondary:
'\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ',
screenXS: 480,
screenXSMin: 480,
screenXSMax: 479,
Expand All @@ -350,24 +360,21 @@ export const defaultTheme = {
screenXXLMin: 1600,
screenXXLMax: 1599,
boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
boxShadowPopoverArrowBottom: '2px 2px 5px rgba(0, 0, 0, 0.1)',
boxShadowSegmentedSelectedItem:
'0 2px 8px -2px rgba(0, 0, 0, 0.05),0 1px 4px -1px rgba(0, 0, 0, 0.07),0 0 1px 0 rgba(0, 0, 0, 0.08)',
boxShadowCard:
'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)',
'\n 0 1px 2px -2px rgba(0, 0, 0, 0.16),\n 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n 0 5px 12px 4px rgba(0, 0, 0, 0.09)\n ',
boxShadowDrawerRight:
'6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),12px 0 48px 16px rgba(0, 0, 0, 0.03)',
'\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ',
boxShadowDrawerLeft:
'-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
'\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ',
boxShadowDrawerUp:
'0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),0 -12px 48px 16px rgba(0, 0, 0, 0.12)',
'\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ',
boxShadowDrawerDown:
'0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12)',
'\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ',
boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
_tokenKey: '15a20jx',
_tokenKey: 'x82dli',
_hashId: '',
};

Expand Down

0 comments on commit 7ab8e7e

Please sign in to comment.