blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] NavBar: support custom theme (#2570)

Browse Source
This commit is contained in:
neverland 2019-01-20 13:44:14 +08:00 committed by GitHub
parent 8bc8e99f74
commit 6e9a097ded
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/nav-bar/index.less
View File

@ -1,21 +1,21 @@
@import '../style/var'; @import '../style/var';
.van-nav-bar { .van-nav-bar {
height: 46px;
position: relative; position: relative;
user-select: none; user-select: none;
text-align: center; text-align: center;
line-height: 46px; height: @nav-bar-height;
background-color: @white; line-height: @nav-bar-height;
background-color: @nav-bar-background-color;
.van-icon { .van-icon {
color: @blue; color: @nav-bar-icon-color;
vertical-align: middle; vertical-align: middle;
} }
&__arrow { &__arrow {
min-width: 1em; min-width: 1em;
font-size: 16px; font-size: @nav-bar-arrow-size;
+ .van-nav-bar__text { + .van-nav-bar__text {
margin-left: -20px; margin-left: -20px;
@ -33,7 +33,8 @@
&__title { &__title {
margin: 0 auto; margin: 0 auto;
max-width: 60%; max-width: 60%;
font-size: 16px; color: @nav-bar-title-text-color;
font-size: @nav-bar-title-font-size;
font-weight: 500; font-weight: 500;
} }
@ -53,7 +54,7 @@
} }
&__text { &__text {
color: @blue; color: @nav-bar-text-color;
margin: 0 -15px; margin: 0 -15px;
padding: 0 15px; padding: 0 15px;
display: inline-block; display: inline-block;

9
packages/style/var.less
View File

@ -74,6 +74,15 @@
@list-text-font-size: 13px; @list-text-font-size: 13px;
@list-text-line-height: 50px; @list-text-line-height: 50px;
// NavBar
@nav-bar-height: 46px;
@nav-bar-background-color: @white;
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @blue;
@nav-bar-text-color: @blue;
@nav-bar-title-font-size: 16px;
@nav-bar-title-text-color: @text-color;
// Notify // Notify
@notify-padding: 6px 15px; @notify-padding: 6px 15px;
@notify-font-size: 14px; @notify-font-size: 14px;