feat(style): add component css variables
This commit is contained in:
+24
-12
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user