mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
chore: add linter of not selector (#40264)
* chore: add linter of not selector * chore: update tree style * fix: DatePicker * fix: compact * fix: compact vertical * perf: style * fix: vertical compact Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
164ea65250
commit
cc1870d8bd
@ -1,11 +1,16 @@
|
||||
import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
|
||||
import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
|
||||
import {
|
||||
createCache,
|
||||
legacyNotSelectorLinter,
|
||||
logicalPropertiesLinter,
|
||||
StyleProvider,
|
||||
} from '@ant-design/cssinjs';
|
||||
import { ConfigProvider, theme as antdTheme } from 'antd';
|
||||
import { createCache, StyleProvider, logicalPropertiesLinter } from '@ant-design/cssinjs';
|
||||
import type { DirectionType } from 'antd/es/config-provider';
|
||||
import ThemeSwitch from '../common/ThemeSwitch';
|
||||
import type { ThemeName } from '../common/ThemeSwitch';
|
||||
import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
|
||||
import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
|
||||
import useLocation from '../../hooks/useLocation';
|
||||
import type { ThemeName } from '../common/ThemeSwitch';
|
||||
import ThemeSwitch from '../common/ThemeSwitch';
|
||||
import type { SiteContextProps } from '../slots/SiteContext';
|
||||
import SiteContext from '../slots/SiteContext';
|
||||
|
||||
@ -102,7 +107,7 @@ const GlobalLayout: React.FC = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter]}>
|
||||
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}>
|
||||
<SiteContext.Provider value={siteContextValue}>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
|
||||
@ -29,6 +29,7 @@ export interface ComponentToken {
|
||||
}
|
||||
|
||||
export type PickerPanelToken = {
|
||||
pickerCellCls: string;
|
||||
pickerCellInnerCls: string;
|
||||
pickerTextHeight: number;
|
||||
pickerPanelCellWidth: number;
|
||||
@ -71,6 +72,7 @@ const genPikerPadding = (
|
||||
const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
pickerCellCls,
|
||||
pickerCellInnerCls,
|
||||
pickerPanelCellHeight,
|
||||
motionDurationSlow,
|
||||
@ -117,8 +119,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// >>> Hover
|
||||
[`&:hover:not(&-in-view),
|
||||
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)`]:
|
||||
[`&:hover:not(${pickerCellCls}-in-view),
|
||||
&:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]:
|
||||
{
|
||||
[pickerCellInnerCls]: {
|
||||
background: controlItemBgHover,
|
||||
@ -126,7 +128,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// >>> Today
|
||||
[`&-in-view:is(&-today) ${pickerCellInnerCls}`]: {
|
||||
[`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@ -141,7 +143,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// >>> In Range
|
||||
'&-in-view:is(&-in-range)': {
|
||||
[`&-in-view${pickerCellCls}-in-range`]: {
|
||||
position: 'relative',
|
||||
|
||||
'&::before': {
|
||||
@ -150,36 +152,36 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// >>> Selected
|
||||
[`&-in-view:is(&-selected) ${pickerCellInnerCls},
|
||||
&-in-view:is(&-range-start) ${pickerCellInnerCls},
|
||||
&-in-view:is(&-range-end) ${pickerCellInnerCls}`]: {
|
||||
[`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls},
|
||||
&-in-view${pickerCellCls}-range-start ${pickerCellInnerCls},
|
||||
&-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: {
|
||||
color: colorTextLightSolid,
|
||||
background: colorPrimary,
|
||||
},
|
||||
|
||||
[`&-in-view:is(&-range-start):not(&-range-start-single),
|
||||
&-in-view:is(&-range-end):not(&-range-end-single)`]: {
|
||||
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single),
|
||||
&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
|
||||
'&::before': {
|
||||
background: controlItemBgActive,
|
||||
},
|
||||
},
|
||||
|
||||
'&-in-view:is(&-range-start)::before': {
|
||||
[`&-in-view${pickerCellCls}-range-start::before`]: {
|
||||
insetInlineStart: '50%',
|
||||
},
|
||||
|
||||
'&-in-view:is(&-range-end)::before': {
|
||||
[`&-in-view${pickerCellCls}-range-end::before`]: {
|
||||
insetInlineEnd: '50%',
|
||||
},
|
||||
|
||||
// >>> Range Hover
|
||||
[`&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),
|
||||
&-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),
|
||||
&-in-view:is(&-range-hover-start):is(&-range-start-single),
|
||||
&-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),
|
||||
&-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),
|
||||
&-in-view:is(&-range-hover-end):is(&-range-end-single),
|
||||
&-in-view:is(&-range-hover):not(&-in-range)`]: {
|
||||
[`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
|
||||
&-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
|
||||
&-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single,
|
||||
&-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover,
|
||||
&-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover,
|
||||
&-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single,
|
||||
&-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: {
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
@ -202,22 +204,22 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// Hover with in range
|
||||
[`&-in-view:is(&-in-range):is(&-range-hover)::before,
|
||||
&-in-view:is(&-range-start):is(&-range-hover)::before,
|
||||
&-in-view:is(&-range-end):is(&-range-hover)::before,
|
||||
&-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,
|
||||
&-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,
|
||||
[`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
|
||||
&-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
|
||||
&-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
|
||||
&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,
|
||||
&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before,
|
||||
${componentCls}-panel
|
||||
> :not(${componentCls}-date-panel)
|
||||
&-in-view:is(&-in-range):is(&-range-hover-start)::before,
|
||||
&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
|
||||
${componentCls}-panel
|
||||
> :not(${componentCls}-date-panel)
|
||||
&-in-view:is(&-in-range):is(&-range-hover-end)::before`]: {
|
||||
&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
|
||||
background: pickerBasicCellHoverWithRangeColor,
|
||||
},
|
||||
|
||||
// range start border-radius
|
||||
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
|
||||
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]:
|
||||
{
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM,
|
||||
@ -226,7 +228,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// range end border-radius
|
||||
[`&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ${pickerCellInnerCls}`]:
|
||||
[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]:
|
||||
{
|
||||
borderStartStartRadius: 0,
|
||||
borderEndStartRadius: 0,
|
||||
@ -234,16 +236,16 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
borderEndEndRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&-range-hover:is(&-range-end)::after': {
|
||||
[`&-range-hover${pickerCellCls}-range-end::after`]: {
|
||||
insetInlineStart: '50%',
|
||||
},
|
||||
|
||||
// Edge start
|
||||
[`tr > &-in-view:is(&-range-hover):first-child::after,
|
||||
tr > &-in-view:is(&-range-hover-end):first-child::after,
|
||||
&-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,
|
||||
&-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,
|
||||
&-in-view:is(&-range-hover-start)::after`]: {
|
||||
[`tr > &-in-view${pickerCellCls}-range-hover:first-child::after,
|
||||
tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after,
|
||||
&-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after,
|
||||
&-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
|
||||
&-in-view${pickerCellCls}-range-hover-start::after`]: {
|
||||
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
|
||||
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartStartRadius: lineWidth,
|
||||
@ -251,11 +253,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// Edge end
|
||||
[`tr > &-in-view:is(&-range-hover):last-child::after,
|
||||
tr > &-in-view:is(&-range-hover-start):last-child::after,
|
||||
&-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,
|
||||
&-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,
|
||||
&-in-view:is(&-range-hover-end)::after`]: {
|
||||
[`tr > &-in-view${pickerCellCls}-range-hover:last-child::after,
|
||||
tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after,
|
||||
&-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after,
|
||||
&-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
|
||||
&-in-view${pickerCellCls}-range-hover-end::after`]: {
|
||||
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
|
||||
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
|
||||
borderStartEndRadius: lineWidth,
|
||||
@ -275,7 +277,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
|
||||
background: colorBgContainerDisabled,
|
||||
},
|
||||
},
|
||||
[`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: {
|
||||
[`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
|
||||
borderColor: colorTextDisabled,
|
||||
},
|
||||
};
|
||||
@ -542,7 +544,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
},
|
||||
|
||||
// Hover with range start & end
|
||||
'&-range-hover:is(&-range-start)::after': {
|
||||
[`&-range-hover${componentCls}-range-start::after`]: {
|
||||
insetInlineEnd: '50%',
|
||||
},
|
||||
|
||||
@ -602,7 +604,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
color: colorLinkActive,
|
||||
},
|
||||
|
||||
'&:is(&-disabled)': {
|
||||
[`&${componentCls}-today-btn-disabled`]: {
|
||||
color: colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
@ -1395,6 +1397,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
|
||||
const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token;
|
||||
|
||||
return {
|
||||
pickerCellCls: `${componentCls}-cell`,
|
||||
pickerCellInnerCls: `${componentCls}-cell-inner`,
|
||||
pickerTextHeight: controlHeightLG,
|
||||
pickerPanelCellWidth: controlHeightSM * 1.5,
|
||||
|
||||
@ -54,7 +54,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
...genStatusStyle(token, componentCls),
|
||||
|
||||
display: 'inline-block',
|
||||
width: controlWidth,
|
||||
@ -308,7 +308,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
return {
|
||||
[`${componentCls}-affix-wrapper`]: {
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
...genStatusStyle(token, `${componentCls}-affix-wrapper`),
|
||||
// or number handler will cover form status
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
@ -324,7 +324,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
borderRadius: borderRadiusSM,
|
||||
},
|
||||
|
||||
'&:not(&-disabled):hover': {
|
||||
[`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
|
||||
...genHoverStyle(token),
|
||||
zIndex: 1,
|
||||
},
|
||||
|
||||
@ -78,7 +78,7 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
borderRadius: token.borderRadiusSM,
|
||||
});
|
||||
|
||||
export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
colorError,
|
||||
@ -90,7 +90,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
} = token;
|
||||
|
||||
return {
|
||||
'&-status-error:not(&-disabled):not(&-borderless)&': {
|
||||
[`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
|
||||
borderColor: colorError,
|
||||
|
||||
'&:hover': {
|
||||
@ -111,7 +111,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
color: colorError,
|
||||
},
|
||||
},
|
||||
'&-status-warning:not(&-disabled):not(&-borderless)&': {
|
||||
[`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
|
||||
borderColor: colorWarning,
|
||||
|
||||
'&:hover': {
|
||||
@ -511,10 +511,10 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
||||
|
||||
return {
|
||||
[`${componentCls}`]: {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
...genStatusStyle(token, componentCls),
|
||||
|
||||
'&[type="color"]': {
|
||||
height: token.controlHeight,
|
||||
@ -594,7 +594,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
...genBasicInputStyle(token),
|
||||
display: 'inline-flex',
|
||||
|
||||
'&:not(&-disabled):hover': {
|
||||
[`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
|
||||
...genHoverStyle(token),
|
||||
zIndex: 1,
|
||||
[`${componentCls}-search-with-button &`]: {
|
||||
@ -672,7 +672,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
},
|
||||
|
||||
// status
|
||||
...genStatusStyle(token),
|
||||
...genStatusStyle(token, `${componentCls}-affix-wrapper`),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -42,7 +42,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
);
|
||||
|
||||
return {
|
||||
[`${componentCls}`]: {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
|
||||
@ -55,7 +55,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
whiteSpace: 'pre-wrap',
|
||||
verticalAlign: 'bottom',
|
||||
|
||||
...genStatusStyle(token),
|
||||
...genStatusStyle(token, componentCls),
|
||||
|
||||
'&-disabled': {
|
||||
'> textarea': {
|
||||
|
||||
@ -405,7 +405,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'&-checked:not(&-disabled)': {
|
||||
[`&-checked:not(${componentCls}-button-wrapper-disabled)`]: {
|
||||
zIndex: 1,
|
||||
color: radioCheckedColor,
|
||||
background: radioButtonCheckedBg,
|
||||
@ -438,7 +438,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-group-solid &-checked:not(&-disabled)`]: {
|
||||
[`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: {
|
||||
color: radioSolidCheckedColor,
|
||||
background: radioCheckedColor,
|
||||
borderColor: radioCheckedColor,
|
||||
|
||||
@ -133,7 +133,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
|
||||
[`&:not(&-customize-input) ${componentCls}-selector`]: {
|
||||
[`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
|
||||
...genSelectorStyle(token),
|
||||
...getSearchInputWithoutBorderStyle(token),
|
||||
},
|
||||
|
||||
@ -3,10 +3,10 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import type { DerivativeToken, FullToken } from '../theme/internal';
|
||||
import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
|
||||
|
||||
function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
|
||||
function compactItemVerticalBorder(token: DerivativeToken, parentCls: string): CSSObject {
|
||||
return {
|
||||
// border collapse
|
||||
'&-item:not(&-last-item)': {
|
||||
[`&-item:not(${parentCls}-last-item)`]: {
|
||||
marginBottom: -token.lineWidth,
|
||||
},
|
||||
|
||||
@ -22,20 +22,20 @@ function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
|
||||
};
|
||||
}
|
||||
|
||||
function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
|
||||
function compactItemBorderVerticalRadius(prefixCls: string, parentCls: string): CSSObject {
|
||||
return {
|
||||
'&-item:not(&-first-item):not(&-last-item)': {
|
||||
[`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item)`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
|
||||
'&-item&-first-item:not(&-last-item)': {
|
||||
[`&-item${parentCls}-first-item:not(${parentCls}-last-item)`]: {
|
||||
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
|
||||
borderEndEndRadius: 0,
|
||||
borderEndStartRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
'&-item&-last-item:not(&-first-item)': {
|
||||
[`&-item${parentCls}-last-item:not(${parentCls}-first-item)`]: {
|
||||
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0,
|
||||
@ -47,10 +47,12 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
|
||||
export function genCompactItemVerticalStyle<T extends OverrideComponent>(
|
||||
token: FullToken<T>,
|
||||
): CSSInterpolation {
|
||||
const compactCls = `${token.componentCls}-compact-vertical`;
|
||||
|
||||
return {
|
||||
[`${token.componentCls}-compact-vertical`]: {
|
||||
...compactItemVerticalBorder(token),
|
||||
...compactItemBorderVerticalRadius(token.componentCls),
|
||||
[compactCls]: {
|
||||
...compactItemVerticalBorder(token, compactCls),
|
||||
...compactItemBorderVerticalRadius(token.componentCls, compactCls),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -18,14 +18,19 @@ interface CompactItemOptions {
|
||||
}
|
||||
|
||||
// handle border collapse
|
||||
function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject {
|
||||
const childCombinator = options.borderElCls ? '> *' : '';
|
||||
const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active']
|
||||
function compactItemBorder(
|
||||
token: DerivativeToken,
|
||||
parentCls: string,
|
||||
options: CompactItemOptions,
|
||||
): CSSObject {
|
||||
const { focusElCls, focus, borderElCls } = options;
|
||||
const childCombinator = borderElCls ? '> *' : '';
|
||||
const hoverEffects = ['hover', focus ? 'focus' : null, 'active']
|
||||
.filter(Boolean)
|
||||
.map((n) => `&:${n} ${childCombinator}`)
|
||||
.join(',');
|
||||
return {
|
||||
'&-item:not(&-last-item)': {
|
||||
[`&-item:not(${parentCls}-last-item)`]: {
|
||||
marginInlineEnd: -token.lineWidth,
|
||||
},
|
||||
|
||||
@ -34,9 +39,9 @@ function compactItemBorder(token: DerivativeToken, options: CompactItemOptions):
|
||||
zIndex: 2,
|
||||
},
|
||||
|
||||
...(options.focusElCls
|
||||
...(focusElCls
|
||||
? {
|
||||
[`&${options.focusElCls}`]: {
|
||||
[`&${focusElCls}`]: {
|
||||
zIndex: 2,
|
||||
},
|
||||
}
|
||||
@ -50,15 +55,20 @@ function compactItemBorder(token: DerivativeToken, options: CompactItemOptions):
|
||||
}
|
||||
|
||||
// handle border-radius
|
||||
function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject {
|
||||
const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : '';
|
||||
function compactItemBorderRadius(
|
||||
prefixCls: string,
|
||||
parentCls: string,
|
||||
options: CompactItemOptions,
|
||||
): CSSObject {
|
||||
const { borderElCls } = options;
|
||||
const childCombinator = borderElCls ? `> ${borderElCls}` : '';
|
||||
|
||||
return {
|
||||
[`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: {
|
||||
[`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item) ${childCombinator}`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
|
||||
'&-item:not(&-last-item)&-first-item': {
|
||||
[`&-item:not(${parentCls}-last-item)${parentCls}-first-item`]: {
|
||||
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
|
||||
{
|
||||
borderStartEndRadius: 0,
|
||||
@ -66,7 +76,7 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions)
|
||||
},
|
||||
},
|
||||
|
||||
'&-item:not(&-first-item)&-last-item': {
|
||||
[`&-item:not(${parentCls}-first-item)${parentCls}-last-item`]: {
|
||||
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
|
||||
{
|
||||
borderStartStartRadius: 0,
|
||||
@ -80,10 +90,14 @@ export function genCompactItemStyle<T extends OverrideComponent>(
|
||||
token: FullToken<T>,
|
||||
options: CompactItemOptions = { focus: true },
|
||||
): CSSInterpolation {
|
||||
const { componentCls } = token;
|
||||
|
||||
const compactCls = `${componentCls}-compact`;
|
||||
|
||||
return {
|
||||
[`${token.componentCls}-compact`]: {
|
||||
...compactItemBorder(token, options),
|
||||
...compactItemBorderRadius(token.componentCls, options),
|
||||
[compactCls]: {
|
||||
...compactItemBorder(token, compactCls, options),
|
||||
...compactItemBorderRadius(componentCls, compactCls, options),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:not(&-checked):hover': {
|
||||
[`&:not(${token.componentCls}-checkable-checked):hover`]: {
|
||||
color: token.colorPrimary,
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
},
|
||||
|
||||
@ -226,7 +226,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
},
|
||||
},
|
||||
|
||||
'&:not(&-disabled)': {
|
||||
[`&:not(${componentCls}-list-content-item-disabled)`]: {
|
||||
'&:hover': {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
cursor: 'pointer',
|
||||
@ -237,12 +237,6 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
},
|
||||
},
|
||||
|
||||
// Do not change hover style when `oneWay` mode
|
||||
'&-show-remove &-item:not(&-item-disabled):hover': {
|
||||
background: 'transparent',
|
||||
cursor: 'default',
|
||||
},
|
||||
|
||||
'&-checked': {
|
||||
backgroundColor: controlItemBgActive,
|
||||
},
|
||||
@ -252,6 +246,13 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
|
||||
// Do not change hover style when `oneWay` mode
|
||||
[`&-show-remove ${componentCls}-list-content-item:not(${componentCls}-list-content-item-disabled):hover`]:
|
||||
{
|
||||
background: 'transparent',
|
||||
cursor: 'default',
|
||||
},
|
||||
},
|
||||
|
||||
'&-pagination': {
|
||||
|
||||
@ -88,7 +88,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
},
|
||||
},
|
||||
|
||||
'&-focused:not(:hover):not(&-active-focused)': {
|
||||
[`&-focused:not(:hover):not(${treeCls}-active-focused)`]: {
|
||||
...genFocusOutline(token),
|
||||
},
|
||||
|
||||
@ -156,7 +156,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
...genFocusOutline(token),
|
||||
},
|
||||
|
||||
[`&:not(&-disabled).filter-node ${treeCls}-title`]: {
|
||||
[`&:not(${treeNodeCls}-disabled).filter-node ${treeCls}-title`]: {
|
||||
color: 'inherit',
|
||||
fontWeight: 500,
|
||||
},
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/cssinjs": "^1.4.0",
|
||||
"@ant-design/cssinjs": "^1.5.1",
|
||||
"@ant-design/icons": "^5.0.0",
|
||||
"@ant-design/react-slick": "~1.0.0",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
/* eslint-disable react/jsx-no-constructed-context-values */
|
||||
import {
|
||||
createCache,
|
||||
legacyNotSelectorLinter,
|
||||
logicalPropertiesLinter,
|
||||
StyleProvider,
|
||||
} from '@ant-design/cssinjs';
|
||||
import glob from 'glob';
|
||||
import * as React from 'react';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
import glob from 'glob';
|
||||
import { StyleProvider, createCache, logicalPropertiesLinter } from '@ant-design/cssinjs';
|
||||
import { excludeWarning } from './excludeWarning';
|
||||
import { render } from '../utils';
|
||||
import { TriggerMockContext } from './demoTestContext';
|
||||
import { excludeWarning } from './excludeWarning';
|
||||
|
||||
require('isomorphic-fetch');
|
||||
|
||||
@ -73,7 +78,10 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
|
||||
|
||||
// Inject cssinjs cache to avoid create <style /> element
|
||||
Demo = (
|
||||
<StyleProvider cache={createCache()} linters={[logicalPropertiesLinter]}>
|
||||
<StyleProvider
|
||||
cache={createCache()}
|
||||
linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}
|
||||
>
|
||||
{Demo}
|
||||
</StyleProvider>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user