mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-06 00:44:17 +08:00
refactor: move Carousel to css in js (#34634)
* refactor: move to css in js * move some styles * fix styles * add more styles * add variables * add rtl styles * use rootPrefixCls * fix rtl style * improve code style * use context * fix some issues * refactor: argument usage * refactor: argument usage * remove unused css code
This commit is contained in:
afc163
GitHub
parent
72bb437548
commit
0e7e4fbef5
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||
import SlickCarousel, { Settings } from '@ant-design/react-slick';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
|
||||
export type CarouselEffect = 'scrollx' | 'fade';
|
||||
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||
@ -78,12 +79,18 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
|
||||
typeof dots === 'boolean' ? false : dots?.className,
|
||||
);
|
||||
|
||||
const className = classNames(prefixCls, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-vertical`]: newProps.vertical,
|
||||
});
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, getPrefixCls());
|
||||
|
||||
return (
|
||||
const className = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-vertical`]: newProps.vertical,
|
||||
},
|
||||
hashId,
|
||||
);
|
||||
|
||||
return wrapSSR(
|
||||
<div className={className}>
|
||||
<SlickCarousel
|
||||
ref={slickRef}
|
||||
@ -93,7 +100,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>(
|
||||
arrows={arrows}
|
||||
draggable={draggable}
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,294 +1,294 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
// @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
|
||||
.@{carousel-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{carousel-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
touch-action: pan-y;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
// .slick-slider {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// box-sizing: border-box;
|
||||
// touch-action: pan-y;
|
||||
// -webkit-touch-callout: none;
|
||||
// -webkit-tap-highlight-color: transparent;
|
||||
// }
|
||||
|
||||
.slick-list {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
// .slick-list {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
// &:focus {
|
||||
// outline: none;
|
||||
// }
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
}
|
||||
// &.dragging {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
.slick-slide {
|
||||
pointer-events: none;
|
||||
// .slick-slide {
|
||||
// pointer-events: none;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/23294
|
||||
input.@{ant-prefix}-radio-input,
|
||||
input.@{ant-prefix}-checkbox-input {
|
||||
visibility: hidden;
|
||||
}
|
||||
// // https://github.com/ant-design/ant-design/issues/23294
|
||||
// input.@{ant-prefix}-radio-input,
|
||||
// input.@{ant-prefix}-checkbox-input {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
|
||||
&.slick-active {
|
||||
pointer-events: auto;
|
||||
// &.slick-active {
|
||||
// pointer-events: auto;
|
||||
|
||||
input.@{ant-prefix}-radio-input,
|
||||
input.@{ant-prefix}-checkbox-input {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
// input.@{ant-prefix}-radio-input,
|
||||
// input.@{ant-prefix}-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 {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // fix Carousel content height not match parent node
|
||||
// // when children is empty node
|
||||
// // https://github.com/ant-design/ant-design/issues/25878
|
||||
// > div > div {
|
||||
// vertical-align: bottom;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
transform: translate3d(0, 0, 0);
|
||||
touch-action: pan-y;
|
||||
}
|
||||
// .slick-slider .slick-track,
|
||||
// .slick-slider .slick-list {
|
||||
// transform: translate3d(0, 0, 0);
|
||||
// touch-action: pan-y;
|
||||
// }
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
// .slick-track {
|
||||
// position: relative;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// display: block;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
// &::before,
|
||||
// &::after {
|
||||
// display: table;
|
||||
// content: '';
|
||||
// }
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
// &::after {
|
||||
// clear: both;
|
||||
// }
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
// .slick-loading & {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-slide {
|
||||
display: none;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
// .slick-slide {
|
||||
// display: none;
|
||||
// float: left;
|
||||
// height: 100%;
|
||||
// min-height: 1px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
// img {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
// &.slick-loading img {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
// &.dragging img {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-initialized .slick-slide {
|
||||
display: block;
|
||||
}
|
||||
// .slick-initialized .slick-slide {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.slick-loading .slick-slide {
|
||||
visibility: hidden;
|
||||
}
|
||||
// .slick-loading .slick-slide {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
|
||||
.slick-vertical .slick-slide {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
// .slick-vertical .slick-slide {
|
||||
// display: block;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
// .slick-arrow.slick-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// Arrows
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
// // Arrows
|
||||
// .slick-prev,
|
||||
// .slick-next {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// display: block;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// margin-top: -10px;
|
||||
// padding: 0;
|
||||
// color: transparent;
|
||||
// font-size: 0;
|
||||
// line-height: 0;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: transparent;
|
||||
// background: transparent;
|
||||
// outline: none;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
&.slick-disabled::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
// &.slick-disabled::before {
|
||||
// opacity: 0.25;
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
// .slick-prev {
|
||||
// left: -25px;
|
||||
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// content: '←';
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
// .slick-next {
|
||||
// right: -25px;
|
||||
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// content: '→';
|
||||
// }
|
||||
// }
|
||||
|
||||
// Dots
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
margin-right: 15%;
|
||||
margin-left: 15%;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
// // Dots
|
||||
// .slick-dots {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// z-index: 15;
|
||||
// display: flex !important;
|
||||
// justify-content: center;
|
||||
// margin-right: 15%;
|
||||
// margin-left: 15%;
|
||||
// padding-left: 0;
|
||||
// list-style: none;
|
||||
|
||||
&-bottom {
|
||||
bottom: 12px;
|
||||
}
|
||||
// &-bottom {
|
||||
// bottom: 12px;
|
||||
// }
|
||||
|
||||
&-top {
|
||||
top: 12px;
|
||||
bottom: auto;
|
||||
}
|
||||
// &-top {
|
||||
// top: 12px;
|
||||
// bottom: auto;
|
||||
// }
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex: 0 1 auto;
|
||||
box-sizing: content-box;
|
||||
width: @carousel-dot-width;
|
||||
height: @carousel-dot-height;
|
||||
margin: 0 2px;
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-indent: -999px;
|
||||
vertical-align: top;
|
||||
transition: all 0.5s;
|
||||
// li {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// flex: 0 1 auto;
|
||||
// box-sizing: content-box;
|
||||
// width: @carousel-dot-width;
|
||||
// height: @carousel-dot-height;
|
||||
// margin: 0 2px;
|
||||
// margin-right: 3px;
|
||||
// margin-left: 3px;
|
||||
// padding: 0;
|
||||
// text-align: center;
|
||||
// text-indent: -999px;
|
||||
// vertical-align: top;
|
||||
// transition: all 0.5s;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @carousel-dot-height;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
font-size: 0;
|
||||
background: @component-background;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.3;
|
||||
transition: all 0.5s;
|
||||
// button {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: @carousel-dot-height;
|
||||
// padding: 0;
|
||||
// color: transparent;
|
||||
// font-size: 0;
|
||||
// background: @component-background;
|
||||
// border: 0;
|
||||
// border-radius: 1px;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
// opacity: 0.3;
|
||||
// transition: all 0.5s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// opacity: 0.75;
|
||||
// }
|
||||
// }
|
||||
|
||||
&.slick-active {
|
||||
width: @carousel-dot-active-width;
|
||||
// &.slick-active {
|
||||
// width: @carousel-dot-active-width;
|
||||
|
||||
& button {
|
||||
background: @component-background;
|
||||
opacity: 1;
|
||||
}
|
||||
// & button {
|
||||
// background: @component-background;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{ant-prefix}-carousel-vertical {
|
||||
.slick-dots {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
flex-direction: column;
|
||||
width: @carousel-dot-height;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
// .@{ant-prefix}-carousel-vertical {
|
||||
// .slick-dots {
|
||||
// top: 50%;
|
||||
// bottom: auto;
|
||||
// flex-direction: column;
|
||||
// width: @carousel-dot-height;
|
||||
// height: auto;
|
||||
// margin: 0;
|
||||
// transform: translateY(-50%);
|
||||
|
||||
&-left {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
// &-left {
|
||||
// right: auto;
|
||||
// left: 12px;
|
||||
// }
|
||||
|
||||
&-right {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
}
|
||||
// &-right {
|
||||
// right: 12px;
|
||||
// left: auto;
|
||||
// }
|
||||
|
||||
li {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-width;
|
||||
margin: 4px 2px;
|
||||
vertical-align: baseline;
|
||||
// li {
|
||||
// width: @carousel-dot-height;
|
||||
// height: @carousel-dot-width;
|
||||
// margin: 4px 2px;
|
||||
// vertical-align: baseline;
|
||||
|
||||
button {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-width;
|
||||
}
|
||||
// button {
|
||||
// width: @carousel-dot-height;
|
||||
// height: @carousel-dot-width;
|
||||
// }
|
||||
|
||||
&.slick-active {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-active-width;
|
||||
// &.slick-active {
|
||||
// width: @carousel-dot-height;
|
||||
// height: @carousel-dot-active-width;
|
||||
|
||||
button {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-active-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// button {
|
||||
// width: @carousel-dot-height;
|
||||
// height: @carousel-dot-active-width;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,2 +1,355 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
DerivativeToken,
|
||||
resetComponent,
|
||||
UseComponentStyleResult,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
GenerateStyle,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface CarouselToken extends DerivativeToken {
|
||||
antPrefixCls: string;
|
||||
carouselPrefixCls: string;
|
||||
carouselDotWidth: CSSObject['width'];
|
||||
carouselDotHeight: CSSObject['height'];
|
||||
carouselDotActiveWidth: CSSObject['width'];
|
||||
}
|
||||
|
||||
const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
|
||||
const { carouselPrefixCls, antPrefixCls } = token;
|
||||
|
||||
return {
|
||||
[`.${carouselPrefixCls}`]: {
|
||||
...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.${antPrefixCls}-radio-input, input.${antPrefixCls}-checkbox-input`]: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
|
||||
'&.slick-active': {
|
||||
pointerEvents: 'auto',
|
||||
|
||||
[`input.${antPrefixCls}-radio-input, input.${antPrefixCls}-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',
|
||||
// FIXME hardcode in v4
|
||||
width: 20,
|
||||
height: 20,
|
||||
marginTop: '-10px',
|
||||
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': {
|
||||
// FIXME hardcode in v4
|
||||
insetInlineStart: -25,
|
||||
|
||||
'&::before': {
|
||||
content: '←',
|
||||
},
|
||||
},
|
||||
|
||||
'.slick-next': {
|
||||
// FIXME hardcode in v4
|
||||
insetInlineEnd: -25,
|
||||
|
||||
'&::before': {
|
||||
content: '→',
|
||||
},
|
||||
},
|
||||
|
||||
// Dots
|
||||
'.slick-dots': {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 15,
|
||||
display: 'flex !important',
|
||||
justifyContent: 'center',
|
||||
marginInlineEnd: '15%',
|
||||
marginInlineStart: '15%',
|
||||
paddingInlineStart: 0,
|
||||
listStyle: 'none',
|
||||
|
||||
'&-bottom': {
|
||||
// FIXME hardcode in v4
|
||||
bottom: '12px',
|
||||
},
|
||||
|
||||
'&-top': {
|
||||
// FIXME hardcode in v4
|
||||
top: '12px',
|
||||
bottom: 'auto',
|
||||
},
|
||||
|
||||
li: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: '0 1 auto',
|
||||
boxSizing: 'content-box',
|
||||
width: token.carouselDotWidth,
|
||||
height: token.carouselDotHeight,
|
||||
margin: '0 2px',
|
||||
// FIXME hardcode in v4
|
||||
marginInlineEnd: 3,
|
||||
marginInlineStart: 3,
|
||||
padding: 0,
|
||||
textAlign: 'center',
|
||||
textIndent: '-999px',
|
||||
verticalAlign: 'top',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
button: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: token.carouselDotHeight,
|
||||
padding: 0,
|
||||
color: 'transparent',
|
||||
fontSize: 0,
|
||||
background: token.colorBgComponent,
|
||||
border: 0,
|
||||
borderRadius: 1,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
opacity: 0.3,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 0.75,
|
||||
},
|
||||
},
|
||||
|
||||
'&.slick-active': {
|
||||
width: token.carouselDotActiveWidth,
|
||||
|
||||
'& button': {
|
||||
background: token.colorBgComponent,
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&: hover, &:focus': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genCarouselVerticalStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
|
||||
const { carouselPrefixCls } = token;
|
||||
|
||||
const reverseSizeOfDot = {
|
||||
width: token.carouselDotHeight,
|
||||
height: token.carouselDotWidth,
|
||||
};
|
||||
|
||||
return {
|
||||
[`.${carouselPrefixCls}-vertical`]: {
|
||||
'.slick-dots': {
|
||||
top: '50%',
|
||||
bottom: 'auto',
|
||||
flexDirection: 'column',
|
||||
width: token.carouselDotHeight,
|
||||
height: 'auto',
|
||||
margin: 0,
|
||||
transform: 'translateY(-50%)',
|
||||
|
||||
'&-left': {
|
||||
insetInlineEnd: 'auto',
|
||||
insetInlineStart: '12px',
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
insetInlineEnd: '12px',
|
||||
insetInlineStart: 'auto',
|
||||
},
|
||||
|
||||
li: {
|
||||
// reverse width and height in vertical situation
|
||||
...reverseSizeOfDot,
|
||||
margin: '4px 2px',
|
||||
verticalAlign: 'baseline',
|
||||
|
||||
button: reverseSizeOfDot,
|
||||
|
||||
'&.slick-active': {
|
||||
...reverseSizeOfDot,
|
||||
|
||||
button: reverseSizeOfDot,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
|
||||
const { carouselPrefixCls } = token;
|
||||
|
||||
return [
|
||||
{
|
||||
[`.${carouselPrefixCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
|
||||
// Dots
|
||||
'.slick-dots': {
|
||||
[`.${carouselPrefixCls}-rtl&`]: {
|
||||
flexDirection: 'row-reverse',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
[`.${carouselPrefixCls}-vertical`]: {
|
||||
'.slick-dots': {
|
||||
[`.${carouselPrefixCls}-rtl&`]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(prefixCls: string, antPrefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const carouselToken: CarouselToken = {
|
||||
...token,
|
||||
carouselPrefixCls: prefixCls,
|
||||
antPrefixCls,
|
||||
|
||||
// FIXME
|
||||
carouselDotWidth: 16,
|
||||
carouselDotHeight: 3,
|
||||
carouselDotActiveWidth: 24,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genCarouselStyle(carouselToken),
|
||||
genCarouselVerticalStyle(carouselToken),
|
||||
genCarouselRtlStyle(carouselToken),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
// @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
|
||||
.@{carousel-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{carousel-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
.slick-track {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
// .slick-track {
|
||||
// .@{carousel-prefix-cls}-rtl & {
|
||||
// right: 0;
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-prev {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: -25px;
|
||||
left: auto;
|
||||
// .slick-prev {
|
||||
// .@{carousel-prefix-cls}-rtl & {
|
||||
// right: -25px;
|
||||
// left: auto;
|
||||
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// content: '→';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.slick-next {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: -25px;
|
||||
// .slick-next {
|
||||
// .@{carousel-prefix-cls}-rtl & {
|
||||
// right: auto;
|
||||
// left: -25px;
|
||||
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
}
|
||||
}
|
||||
// &::before {
|
||||
// content: '←';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// Dots
|
||||
.slick-dots {
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // Dots
|
||||
// .slick-dots {
|
||||
// .@{carousel-prefix-cls}-rtl& {
|
||||
// flex-direction: row-reverse;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{ant-prefix}-carousel-vertical {
|
||||
.slick-dots {
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{ant-prefix}-carousel-vertical {
|
||||
// .slick-dots {
|
||||
// .@{carousel-prefix-cls}-rtl& {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user