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(Dialog): Dialog 组件样式调整 (#2228)

Browse Source
This commit is contained in:
Lindy 2019-11-01 14:56:50 +08:00 committed by neverland
parent 573c1a7120
commit 50f7540a4e
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,6 +171,23 @@
@count-down-font-size: @font-size-md; @count-down-font-size: @font-size-md;
@count-down-line-height: 20px; @count-down-line-height: 20px;
// Dialog
@dialog-width: 320px;
@dialog-small-screen-width: 90%;
@dialog-font-size: @font-size-lg;
@dialog-border-radius: 16px;
@dialog-background-color: @white;
@dialog-header-font-weight: @font-weight-bold;
@dialog-header-line-height: 24px;
@dialog-header-padding-top: @padding-lg;
@dialog-header-isolated-padding: @padding-lg 0;
@dialog-message-padding: @padding-lg;
@dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-darker;
@dialog-has-title-message-padding-top: @padding-sm;
// Field // Field
@field-input-text-color: @text-color; @field-input-text-color: @text-color;
@field-input-error-text-color: @red; @field-input-error-text-color: @red;

30
packages/dialog/index.less
View File

@ -3,43 +3,43 @@
.van-dialog { .van-dialog {
top: 45% !important; top: 45% !important;
width: 320px;
overflow: hidden; overflow: hidden;
font-size: 16px; .theme(width, '@dialog-width');
border-radius: 16px; .theme(font-size, '@dialog-font-size');
.theme(background-color, '@white'); .theme(border-radius, '@dialog-border-radius');
.theme(background-color, '@dialog-background-color');
@media (max-width: 321px) { @media (max-width: 321px) {
width: 90%; .theme(width, '@dialog-small-screen-width');
} }
&__header { &__header {
padding-top: 25px;
font-weight: 500;
line-height: 24px;
text-align: center; text-align: center;
.theme(padding-top, '@dialog-header-padding-top');
.theme(font-weight, '@dialog-header-font-weight');
.theme(line-height, '@dialog-header-line-height');
&--isolated { &--isolated {
padding: 25px 0; .theme(padding, '@dialog-header-isolated-padding');
} }
} }
&__message { &__message {
max-height: 60vh;
padding: 25px;
overflow-y: auto; overflow-y: auto;
font-size: 14px;
line-height: 20px;
text-align: center; text-align: center;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.theme(font-size, '@dialog-message-font-size');
.theme(line-height, '@dialog-message-line-height');
.theme(max-height, '@dialog-message-max-height');
.theme(padding, '@dialog-message-padding');
&-text { &-text {
word-wrap: break-word; word-wrap: break-word;
} }
&--has-title { &--has-title {
padding-top: 12px; .theme(padding-top, '@dialog-has-title-message-padding-top');
.theme(color, '@gray-darker'); .theme(color, '@dialog-has-title-message-text-color');
} }
&--left { &--left {