[improvement] Dialog: add less vars (#3123)

This commit is contained in:
neverland 2019-04-10 15:50:28 +08:00 committed by GitHub
parent f5abc9e46d
commit f08de77c73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 15 deletions

View File

@ -4,30 +4,30 @@
position: fixed;
top: 50%;
left: 50%;
width: 85%;
font-size: 16px;
overflow: hidden;
transition: .3s;
border-radius: 4px;
background-color: @white;
width: @dialog-width;
font-size: @dialog-font-size;
transition: @dialog-transition;
border-radius: @dialog-border-radius;
background-color: @dialog-background-color;
transform: translate3d(-50%, -50%, 0);
backface-visibility: hidden; // avoid blurry text after scale animation
&__header {
font-weight: 500;
padding-top: 25px;
text-align: center;
font-weight: @dialog-header-font-weight;
padding-top: @dialog-header-padding-top;
&--isolated {
padding: 25px 0;
padding: @dialog-header-isolated-padding;
}
}
&__message {
padding: 25px;
font-size: 14px;
line-height: 1.5;
max-height: 60vh;
padding: @dialog-message-padding;
font-size: @dialog-message-font-size;
line-height: @dialog-message-line-height;
max-height: @dialog-message-max-height;
overflow-y: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
@ -36,8 +36,8 @@
white-space: pre-wrap;
&--has-title {
padding-top: 12px;
color: @gray-darker;
color: @dialog-has-title-message-text-color;
padding-top: @dialog-has-title-message-padding-top;
}
&--left {
@ -69,7 +69,7 @@
&__confirm {
&,
&:active {
color: @blue;
color: @dialog-confirm-button-text-color;
}
}

View File

@ -120,6 +120,23 @@
@collapse-item-content-background-color: @white;
@collapse-item-title-disabled-color: @gray;
// Dialog
@dialog-width: 85%;
@dialog-font-size: 16px;
@dialog-transition: .3s;
@dialog-border-radius: 4px;
@dialog-background-color: @white;
@dialog-header-font-weight: 500;
@dialog-header-padding-top: 25px;
@dialog-header-isolated-padding: 25px 0;
@dialog-message-padding: 25px;
@dialog-message-font-size: 14px;
@dialog-message-line-height: 1.5;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-darker;
@dialog-has-title-message-padding-top: 12px;
@dialog-confirm-button-text-color: @blue;
// Info
@info-size: 16px;
@info-color: @white;