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

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

@ -32,15 +32,31 @@
@font-size-sm: 12px; @font-size-sm: 12px;
@font-size-md: 14px; @font-size-md: 14px;
@font-size-lg: 16px; @font-size-lg: 16px;
@font-weight-bold: 500;
// Animation // Animation
@animation-duration-base: .3s; @animation-duration-base: .3s;
@animation-duration-fast: .2s; @animation-duration-fast: .2s;
// ActionSheet //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-color: @gray-darker;
@action-sheet-description-font-size: @font-size-md; @action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px; @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
@button-default-color: @text-color; @button-default-color: @text-color;