feat(style): add component css variables
This commit is contained in:
+19
-8
@@ -1,11 +1,22 @@
|
||||
@import './var.less';
|
||||
|
||||
:root {
|
||||
--van-nav-bar-height: @nav-bar-height;
|
||||
--van-nav-bar-background-color: @nav-bar-background-color;
|
||||
--van-nav-bar-arrow-size: @nav-bar-arrow-size;
|
||||
--van-nav-bar-icon-color: @nav-bar-icon-color;
|
||||
--van-nav-bar-text-color: @nav-bar-text-color;
|
||||
--van-nav-bar-title-font-size: @nav-bar-title-font-size;
|
||||
--van-nav-bar-title-text-color: @nav-bar-title-text-color;
|
||||
--van-nav-bar-z-index: @nav-bar-z-index;
|
||||
}
|
||||
|
||||
.van-nav-bar {
|
||||
position: relative;
|
||||
z-index: @nav-bar-z-index;
|
||||
z-index: var(--van-nav-bar-z-index);
|
||||
line-height: @line-height-lg;
|
||||
text-align: center;
|
||||
background-color: @nav-bar-background-color;
|
||||
background-color: var(--van-nav-bar-background-color);
|
||||
user-select: none;
|
||||
|
||||
&--fixed {
|
||||
@@ -21,27 +32,27 @@
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
color: @nav-bar-icon-color;
|
||||
color: var(--van-nav-bar-icon-color);
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @nav-bar-height;
|
||||
height: var(--van-nav-bar-height);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin-right: @padding-base;
|
||||
font-size: @nav-bar-arrow-size;
|
||||
font-size: var(--van-nav-bar-arrow-size);
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 60%;
|
||||
margin: 0 auto;
|
||||
color: @nav-bar-title-text-color;
|
||||
color: var(--van-nav-bar-title-text-color);
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @nav-bar-title-font-size;
|
||||
font-size: var(--van-nav-bar-title-font-size);
|
||||
}
|
||||
|
||||
&__left,
|
||||
@@ -69,6 +80,6 @@
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: @nav-bar-text-color;
|
||||
color: var(--van-nav-bar-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user