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

feat(NoticeBar): NoticeBar组件样式调整 (#2234)

Browse Source
This commit is contained in:
Lindy 2019-11-04 19:26:32 +08:00 committed by neverland
parent 7cb78a3fef
commit ef01e34c17
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -227,6 +227,17 @@
// NavBar // NavBar
@nav-bar-height: 44px; @nav-bar-height: 44px;
// NoticeBar
@notice-bar-height: 40px;
@notice-bar-padding: 0 @padding-md;
@notice-bar-wrapable-padding: @padding-xs @padding-md;
@notice-bar-font-size: @font-size-md;
@notice-bar-text-color: @orange-dark;
@notice-bar-line-height: 24px;
@notice-bar-background-color: @orange-light;
@notice-bar-icon-size: 16px;
@notice-bar-icon-min-width: 22px;
// Notify // Notify
@notify-padding: 6px 15px; @notify-padding: 6px 15px;
@notify-font-size: 14px; @notify-font-size: 14px;

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

@ -1,10 +1,15 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-notice-bar { .van-notice-bar {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; .theme(height, '@notice-bar-height');
padding: 0 15px; .theme(padding, '@notice-bar-padding');
font-size: 14px; .theme(font-size, '@notice-bar-font-size');
line-height: 24px; .theme(color, '@notice-bar-text-color');
.theme(line-height, '@notice-bar-line-height');
.theme(background-color, '@notice-bar-background-color');
&--withicon { &--withicon {
position: relative; position: relative;
@ -13,7 +18,7 @@
&--wrapable { &--wrapable {
height: auto; height: auto;
padding: 8px 15px; .theme(padding, '@notice-bar-wrapable-padding');
.van-notice-bar { .van-notice-bar {
&__wrap { &__wrap {
@ -32,20 +37,23 @@
align-items: center; align-items: center;
margin-right: 4px; margin-right: 4px;
vertical-align: middle; vertical-align: middle;
.theme(font-size, '@notice-bar-icon-size');
.theme(min-width, '@notice-bar-icon-min-width');
} }
&__right-icon { &__right-icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 15px; right: 15px;
font-size: 16px; .theme(font-size, '@notice-bar-icon-size');
.theme(min-width, '@notice-bar-icon-min-width');
} }
&__wrap { &__wrap {
position: relative; position: relative;
flex: 1; flex: 1;
height: 24px;
overflow: hidden; overflow: hidden;
.theme(height, '@notice-bar-line-height');
} }
&__content { &__content {