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

feat(ActionSheet): action-sheet组件样式变量化 (#2164)

Browse Source
This commit is contained in:
Lindy 2019-10-17 15:14:45 +08:00 committed by neverland
parent 0a2cf4bc41
commit aa9723e412
2 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/action-sheet/index.less
View File

@ -2,16 +2,15 @@
@import '../common/style/theme.less';
.van-action-sheet {
max-height: 90% !important;
.theme(color, '@text-color');
max-height: @action-sheet-max-height !important;
.theme(color, '@action-sheet-item-text-color');
&__item,
&__cancel {
height: 50px;
font-size: 16px;
line-height: 50px;
font-size: @action-sheet-item-font-size;
line-height: @action-sheet-item-height;
text-align: center;
.theme(background-color, '@white');
.theme(background-color, '@action-sheet-item-background');
&--hover {
.theme(background-color, '@active-color');
@ -19,34 +18,34 @@
}
&__cancel {
height: 60px;
height: @action-sheet-item-height;
&::before {
display: block;
height: 10px;
height: @action-sheet-cancel-padding-top;
content: ' ';
.theme(background-color, '@background-color');
.theme(background-color, '@action-sheet-cancel-padding-color');
}
}
&__item--disabled {
.theme(color, '@gray');
.theme(color, '@action-sheet-item-disabled-text-color');
}
&__item--disabled&__item--hover {
.theme(background-color, '@white');
.theme(background-color, '@action-sheet-item-background');
}
&__subname {
margin-left: 5px;
font-size: 12px;
.theme(color, '@gray-darker');
margin-left: @padding-base;
font-size: @action-sheet-subname-font-size;
.theme(color, '@action-sheet-subname-color');
}
&__header {
font-weight: 500;
font-size: 16px;
line-height: 44px;
font-weight: @font-weight-bold;
font-size: @action-sheet-header-font-size;
line-height: @action-sheet-header-height;
text-align: center;
}
@ -62,9 +61,9 @@
position: absolute !important;
top: 0;
right: 0;
padding: 0 15px;
font-size: 18px !important;
padding: @action-sheet-close-icon-padding;
font-size: @action-sheet-close-icon-size !important;
line-height: inherit !important;
.theme(color, '@gray-dark');
.theme(color, '@action-sheet-close-icon-color');
}
}

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

@ -32,15 +32,31 @@
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
// Animation
@animation-duration-base: .3s;
@animation-duration-fast: .2s;
//ActionSheet
@action-sheet-max-height: 90%;
@action-sheet-header-height: 44px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-darker;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px;
@action-sheet-item-height: 50px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray;
@action-sheet-subname-color: @gray-darker;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 18px;
@action-sheet-close-icon-color: @gray-dark;
@action-sheet-close-icon-padding: 0 @padding-sm;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;
// Button
@button-default-color: @text-color;