test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: remove Slider outline (#38489)

Browse Source 
* chore: remove `Slider` outline

the `::before` pseudo-element here seems to make no sense and gives an incorrect border when setting the `:focus-visible` style.

* chore: optimize focus style

* chore: update hover style

* chore: accept suggested

Co-authored-by: MadCcc <1075746765@qq.com>

* chore: remove noused

Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
Wuxh 2022-11-14 15:01:07 +08:00 committed by GitHub
parent 989dcae1a0
commit f458858559
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,15 +29,8 @@ interface SliderToken extends FullToken<'Slider'> {
// =============================== Base =============================== // =============================== Base ===============================
const genBaseStyle: GenerateStyle<SliderToken> = token => { const genBaseStyle: GenerateStyle<SliderToken> = token => {
const { const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } =
componentCls, token;
controlSize,
dotSize,
marginFull,
marginPart,
colorFillContentHover,
antCls,
} = token;
return { return {
[componentCls]: { [componentCls]: {
@ -68,10 +61,33 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
transition: `background-color ${token.motionDurationFast}`, transition: `background-color ${token.motionDurationFast}`,
}, },
'&:hover': {
[`${componentCls}-rail`]: {
backgroundColor: token.colorFillSecondary,
},
[`${componentCls}-track`]: {
backgroundColor: token.colorPrimaryBorderHover,
},
[`${componentCls}-dot`]: {
borderColor: colorFillContentHover,
},
[`${componentCls}-handle::after`]: {
boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorderHover}`,
},
[`${componentCls}-dot-active`]: {
borderColor: token.colorPrimary,
},
},
[`${componentCls}-handle`]: { [`${componentCls}-handle`]: {
position: 'absolute', position: 'absolute',
width: token.handleSize, width: token.handleSize,
height: token.handleSize, height: token.handleSize,
outline: 'none',
[`${componentCls}-dragging`]: { [`${componentCls}-dragging`]: {
zIndex: 1, zIndex: 1,
@ -81,8 +97,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
'&::before': { '&::before': {
content: '""', content: '""',
position: 'absolute', position: 'absolute',
insetInlineStart: 0, insetInlineStart: -token.handleLineWidth,
insetBlockStart: 0, insetBlockStart: -token.handleLineWidth,
width: token.handleSize + token.handleLineWidth * 2, width: token.handleSize + token.handleLineWidth * 2,
height: token.handleSize + token.handleLineWidth * 2, height: token.handleSize + token.handleLineWidth * 2,
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -108,10 +124,16 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
`, `,
}, },
'&:hover, &:active, &:focus-visible': { '&:hover, &:active, &:focus': {
'&::before': { '&::before': {
insetInlineStart: (token.handleSize - token.handleSizeHover) / 2, insetInlineStart: -(
insetBlockStart: (token.handleSize - token.handleSizeHover) / 2, (token.handleSizeHover - token.handleSize) / 2 +
token.handleLineWidthHover
),
insetBlockStart: -(
(token.handleSizeHover - token.handleSize) / 2 +
token.handleLineWidthHover
),
width: token.handleSizeHover + token.handleLineWidthHover * 2, width: token.handleSizeHover + token.handleLineWidthHover * 2,
height: token.handleSizeHover + token.handleLineWidthHover * 2, height: token.handleSizeHover + token.handleLineWidthHover * 2,
}, },
@ -126,32 +148,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
}, },
}, },
'&:hover': {
[`${componentCls}-rail`]: {
backgroundColor: token.colorFillSecondary,
},
[`${componentCls}-track`]: {
backgroundColor: token.colorPrimaryBorderHover,
},
[`${componentCls}-dot`]: {
borderColor: colorFillContentHover,
},
[`${componentCls}-handle${antCls}-tooltip-open::after`]: {
boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
},
[`${componentCls}-handle::after`]: {
boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
},
[`${componentCls}-dot-active`]: {
borderColor: token.colorPrimary,
},
},
[`${componentCls}-mark`]: { [`${componentCls}-mark`]: {
position: 'absolute', position: 'absolute',
fontSize: token.fontSize, fontSize: token.fontSize,