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

style: enlarge Carousel dots hover area (#38257)

Browse Source
This commit is contained in:
afc163 2022-10-28 11:17:01 +08:00 committed by GitHub
parent 03d716e750
commit 444a8e3c75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/carousel/style/index.less
View File

@ -2,6 +2,7 @@
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@carousel-prefix-cls: ~'@{ant-prefix}-carousel'; @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
@carousel-dot-margin: 4px;
.@{carousel-prefix-cls} { .@{carousel-prefix-cls} {
.reset-component(); .reset-component();
@ -201,9 +202,7 @@
box-sizing: content-box; box-sizing: content-box;
width: @carousel-dot-width; width: @carousel-dot-width;
height: @carousel-dot-height; height: @carousel-dot-height;
margin: 0 2px; margin: 0 @carousel-dot-margin;
margin-right: 3px;
margin-left: 3px;
padding: 0; padding: 0;
text-align: center; text-align: center;
text-indent: -999px; text-indent: -999px;
@ -211,6 +210,7 @@
transition: all 0.5s; transition: all 0.5s;
button { button {
position: relative;
display: block; display: block;
width: 100%; width: 100%;
height: @carousel-dot-height; height: @carousel-dot-height;
@ -229,6 +229,15 @@
&:focus { &:focus {
opacity: 0.75; opacity: 0.75;
} }
&::after {
position: absolute;
top: -@carousel-dot-margin;
right: -@carousel-dot-margin;
bottom: -@carousel-dot-margin;
left: -@carousel-dot-margin;
content: '';
}
} }
&.slick-active { &.slick-active {
@ -271,7 +280,7 @@
li { li {
width: @carousel-dot-height; width: @carousel-dot-height;
height: @carousel-dot-width; height: @carousel-dot-width;
margin: 4px 2px; margin: @carousel-dot-margin 0;
vertical-align: baseline; vertical-align: baseline;
button { button {