blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-04 07:09:44 +08:00
Code Issues Projects Releases Wiki Activity

feat(NavBar): NavBar 组件样式调整 (#2233)

Browse Source
This commit is contained in:
Lindy 2019-11-04 19:28:11 +08:00 committed by neverland
parent 9773e86c2d
commit 8435e1b345
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/common/style/var.less
View File

@ -235,6 +235,11 @@
// NavBar // NavBar
@nav-bar-height: 44px; @nav-bar-height: 44px;
@nav-bar-background-color: @white;
@nav-bar-text-color: @blue;
@nav-bar-arrow-size: 16px;
@nav-bar-title-font-size: @font-size-lg;
@nav-bar-title-text-color: @text-color;
// NoticeBar // NoticeBar
@notice-bar-height: 40px; @notice-bar-height: 40px;

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

@ -7,14 +7,14 @@
user-select: none; user-select: none;
.theme(height, '@nav-bar-height'); .theme(height, '@nav-bar-height');
.theme(line-height, '@nav-bar-height'); .theme(line-height, '@nav-bar-height');
.theme(background-color, '@white'); .theme(background-color, '@nav-bar-background-color');
&__text { &__text {
display: inline-block; display: inline-block;
margin: 0 -15px;
padding: 0 15px;
vertical-align: middle; vertical-align: middle;
.theme(color, '@blue'); .theme(margin, '0 -@padding-md');
.theme(padding, '0 -@padding-md');
.theme(color, '@nav-bar-text-color');
&--hover { &--hover {
.theme(background-color, '@active-color'); .theme(background-color, '@active-color');
@ -23,7 +23,8 @@
&__arrow { &__arrow {
vertical-align: middle; vertical-align: middle;
.theme(color, '@blue'); .theme(font-size, '@nav-bar-arrow-size');
.theme(color, '@nav-bar-text-color');
+ .van-nav-bar__text { + .van-nav-bar__text {
margin-left: -20px; margin-left: -20px;
@ -41,22 +42,23 @@
&__title { &__title {
max-width: 60%; max-width: 60%;
margin: 0 auto; margin: 0 auto;
font-weight: 500; .theme(color, '@nav-bar-title-text-color');
font-size: 16px; .theme(font-weight, '@font-weight-bold');
.theme(font-size, '@nav-bar-title-font-size');
} }
&__left, &__left,
&__right { &__right {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
font-size: 14px; .theme(font-size, '@font-size-md');
} }
&__left { &__left {
left: 15px; .theme(left, '@padding-md');
} }
&__right { &__right {
right: 15px; .theme(right, '@padding-md');
} }
} }