ant-design/components/carousel/style/index.tsx

343 lines
7.6 KiB
TypeScript
Raw Normal View History

import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
2022-04-24 17:42:36 +08:00
export interface ComponentToken {
2022-05-19 14:00:04 +08:00
dotWidth: number;
dotHeight: number;
dotWidthActive: number;
}
2022-05-19 14:00:04 +08:00
interface CarouselToken extends FullToken<'Carousel'> {
carouselArrowSize: number;
carouselDotOffset: number;
carouselDotInline: number;
}
const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
const { componentCls, antCls, carouselArrowSize, carouselDotOffset, carouselDotInline } = token;
const arrowOffset = -carouselArrowSize * 1.25;
return {
[componentCls]: {
...resetComponent(token),
'.slick-slider': {
position: 'relative',
display: 'block',
boxSizing: 'border-box',
touchAction: 'pan-y',
WebkitTouchCallout: 'none',
WebkitTapHighlightColor: 'transparent',
'.slick-track, .slick-list': {
transform: 'translate3d(0, 0, 0)',
touchAction: 'pan-y',
},
},
'.slick-list': {
position: 'relative',
display: 'block',
margin: 0,
padding: 0,
overflow: 'hidden',
'&:focus': {
outline: 'none',
},
'&.dragging': {
cursor: 'pointer',
},
'.slick-slide': {
pointerEvents: 'none',
// https://github.com/ant-design/ant-design/issues/23294
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
visibility: 'hidden',
},
'&.slick-active': {
pointerEvents: 'auto',
[`input${antCls}-radio-input, input${antCls}-checkbox-input`]: {
visibility: 'visible',
},
},
// fix Carousel content height not match parent node
// when children is empty node
// https://github.com/ant-design/ant-design/issues/25878
'> div > div': {
verticalAlign: 'bottom',
},
},
},
'.slick-track': {
position: 'relative',
top: 0,
insetInlineStart: 0,
display: 'block',
'&::before, &::after': {
display: 'table',
content: '""',
},
'&::after': {
clear: 'both',
},
},
'.slick-slide': {
display: 'none',
float: 'left',
height: '100%',
minHeight: 1,
img: {
display: 'block',
},
'&.dragging img': {
pointerEvents: 'none',
},
},
'.slick-initialized .slick-slide': {
display: 'block',
},
'.slick-vertical .slick-slide': {
display: 'block',
height: 'auto',
},
'.slick-arrow.slick-hidden': {
display: 'none',
},
// Arrows
'.slick-prev, .slick-next': {
position: 'absolute',
top: '50%',
display: 'block',
2022-05-19 14:00:04 +08:00
width: carouselArrowSize,
height: carouselArrowSize,
marginTop: -carouselArrowSize / 2,
padding: 0,
color: 'transparent',
fontSize: 0,
lineHeight: 0,
background: 'transparent',
border: 0,
outline: 'none',
cursor: 'pointer',
'&:hover, &:focus': {
color: 'transparent',
background: 'transparent',
outline: 'none',
'&::before': {
opacity: 1,
},
},
'&.slick-disabled::before': {
opacity: 0.25,
},
},
'.slick-prev': {
2022-05-19 14:00:04 +08:00
insetInlineStart: arrowOffset,
'&::before': {
content: '"←"',
},
},
'.slick-next': {
2022-05-19 14:00:04 +08:00
insetInlineEnd: arrowOffset,
'&::before': {
content: '"→"',
},
},
// Dots
'.slick-dots': {
position: 'absolute',
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
zIndex: 15,
display: 'flex !important',
justifyContent: 'center',
paddingInlineStart: 0,
listStyle: 'none',
'&-bottom': {
2022-05-19 14:00:04 +08:00
bottom: carouselDotOffset,
},
'&-top': {
2022-05-19 14:00:04 +08:00
top: carouselDotOffset,
bottom: 'auto',
},
li: {
position: 'relative',
display: 'inline-block',
flex: '0 1 auto',
boxSizing: 'content-box',
2022-05-19 14:00:04 +08:00
width: token.dotWidth,
height: token.dotHeight,
marginInline: carouselDotInline,
padding: 0,
textAlign: 'center',
2022-05-19 14:00:04 +08:00
textIndent: -999,
verticalAlign: 'top',
transition: `all ${token.motionDurationSlow}`,
button: {
display: 'block',
width: '100%',
2022-05-19 14:00:04 +08:00
height: token.dotHeight,
padding: 0,
color: 'transparent',
fontSize: 0,
background: token.colorBgContainer,
border: 0,
borderRadius: 1,
outline: 'none',
cursor: 'pointer',
opacity: 0.3,
transition: `all ${token.motionDurationSlow}`,
'&: hover, &:focus': {
opacity: 0.75,
},
},
'&.slick-active': {
2022-05-19 14:00:04 +08:00
width: token.dotWidthActive,
'& button': {
background: token.colorBgContainer,
opacity: 1,
},
'&: hover, &:focus': {
opacity: 1,
},
},
},
},
},
};
};
2022-05-19 14:00:04 +08:00
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
const { componentCls, carouselDotOffset } = token;
const reverseSizeOfDot = {
2022-05-19 14:00:04 +08:00
width: token.dotHeight,
height: token.dotWidth,
};
return {
[`${componentCls}-vertical`]: {
'.slick-dots': {
top: '50%',
bottom: 'auto',
flexDirection: 'column',
2022-05-19 14:00:04 +08:00
width: token.dotHeight,
height: 'auto',
margin: 0,
transform: 'translateY(-50%)',
'&-left': {
insetInlineEnd: 'auto',
2022-05-19 14:00:04 +08:00
insetInlineStart: carouselDotOffset,
},
'&-right': {
2022-05-19 14:00:04 +08:00
insetInlineEnd: carouselDotOffset,
insetInlineStart: 'auto',
},
li: {
// reverse width and height in vertical situation
...reverseSizeOfDot,
margin: '4px 2px',
verticalAlign: 'baseline',
button: reverseSizeOfDot,
'&.slick-active': {
...reverseSizeOfDot,
button: reverseSizeOfDot,
},
},
},
},
};
};
2022-05-19 14:00:04 +08:00
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
const { componentCls } = token;
return [
{
[`${componentCls}-rtl`]: {
direction: 'rtl',
// Dots
'.slick-dots': {
[`${componentCls}-rtl&`]: {
flexDirection: 'row-reverse',
},
},
},
},
{
[`${componentCls}-vertical`]: {
'.slick-dots': {
[`${componentCls}-rtl&`]: {
flexDirection: 'column',
},
},
},
},
];
};
// ============================== Export ==============================
2022-04-24 17:42:36 +08:00
export default genComponentStyleHook(
'Carousel',
2022-05-19 14:00:04 +08:00
token => {
const { controlHeightLG, controlHeightSM, dotHeight } = token;
const carouselToken = mergeToken<CarouselToken>(token, {
carouselArrowSize: controlHeightLG / 2,
carouselDotOffset: controlHeightSM / 2,
carouselDotInline: dotHeight,
});
return [
genCarouselStyle(carouselToken),
genCarouselVerticalStyle(carouselToken),
genCarouselRtlStyle(carouselToken),
];
},
2022-04-24 17:42:36 +08:00
{
2022-05-19 14:00:04 +08:00
dotWidth: 16,
dotHeight: 3,
dotWidthActive: 24,
2022-04-24 17:42:36 +08:00
},
);