alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan
2021-06-12 15:52:22 +08:00
committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1702 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/swipe/index.less
+19 -10
View File
@@ -1,5 +1,14 @@
@import './var.less';
:root {
--van-swipe-indicator-size: @swipe-indicator-size;
--van-swipe-indicator-margin: @swipe-indicator-margin;
--van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity;
--van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity;
--van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color;
--van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color;
}
.van-swipe {
position: relative;
overflow: hidden;
@@ -17,7 +26,7 @@
&__indicators {
position: absolute;
bottom: @swipe-indicator-margin;
bottom: var(--van-swipe-indicator-margin);
left: 50%;
display: flex;
transform: translateX(-50%);
@@ -25,32 +34,32 @@
&--vertical {
top: 50%;
bottom: auto;
left: @swipe-indicator-margin;
left: var(--van-swipe-indicator-margin);
flex-direction: column;
transform: translateY(-50%);
.van-swipe__indicator:not(:last-child) {
margin-bottom: @swipe-indicator-size;
margin-bottom: var(--van-swipe-indicator-size);
}
}
}
&__indicator {
width: @swipe-indicator-size;
height: @swipe-indicator-size;
background-color: @swipe-indicator-inactive-background-color;
width: var(--van-swipe-indicator-size);
height: var(--van-swipe-indicator-size);
background-color: var(--van-swipe-indicator-inactive-background-color);
border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity;
opacity: var(--van-swipe-indicator-inactive-opacity);
transition: opacity @animation-duration-fast,
background-color @animation-duration-fast;
&:not(:last-child) {
margin-right: @swipe-indicator-size;
margin-right: var(--van-swipe-indicator-size);
}
&--active {
background-color: @swipe-indicator-active-background-color;
opacity: @swipe-indicator-active-opacity;
background-color: var(--van-swipe-indicator-active-background-color);
opacity: var(--van-swipe-indicator-active-opacity);
}
}
}