feat(style): add component css variables

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
+24 -12
View File
@@ -1,8 +1,20 @@
@import './var.less';
:root {
--van-pagination-height: @pagination-height;
--van-pagination-font-size: @pagination-font-size;
--van-pagination-item-width: @pagination-item-width;
--van-pagination-item-default-color: @pagination-item-default-color;
--van-pagination-item-disabled-color: @pagination-item-disabled-color;
--van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
--van-pagination-background-color: @pagination-background-color;
--van-pagination-desc-color: @pagination-desc-color;
--van-pagination-disabled-opacity: @pagination-disabled-opacity;
}
.van-pagination {
display: flex;
font-size: @pagination-font-size;
font-size: var(--van-pagination-font-size);
&__item,
&__page-desc {
@@ -14,16 +26,16 @@
&__item {
flex: 1;
box-sizing: border-box;
min-width: @pagination-item-width;
height: @pagination-height;
color: @pagination-item-default-color;
background-color: @pagination-background-color;
min-width: var(--van-pagination-item-width);
height: var(--van-pagination-height);
color: var(--van-pagination-item-default-color);
background-color: var(--van-pagination-background-color);
cursor: pointer;
user-select: none;
&:active {
color: @white;
background-color: @pagination-item-default-color;
background-color: var(--van-pagination-item-default-color);
}
&::after {
@@ -36,7 +48,7 @@
&--active {
color: @white;
background-color: @pagination-item-default-color;
background-color: var(--van-pagination-item-default-color);
}
}
@@ -49,10 +61,10 @@
&__item--disabled {
&,
&:active {
color: @pagination-item-disabled-color;
background-color: @pagination-item-disabled-background-color;
color: var(--van-pagination-item-disabled-color);
background-color: var(--van-pagination-item-disabled-background-color);
cursor: not-allowed;
opacity: @pagination-disabled-opacity;
opacity: var(--van-pagination-disabled-opacity);
}
}
@@ -62,8 +74,8 @@
&__page-desc {
flex: 1;
height: @pagination-height;
color: @pagination-desc-color;
height: var(--van-pagination-height);
color: var(--van-pagination-desc-color);
}
&--simple {