Skip to content

S
style_tool
Commit d011c378 authored by 刘安琪's avatar 刘安琪
Browse files
Options

修改dialog、form样式

parent 5ac81906
Show whitespace changes
Inline Side-by-side
Showing with 96 additions and 65 deletions
element-variables.scss
View file @ d011c378
...@@ -126,6 +126,7 @@ $--background-color-lighter: #F8F8F8 !default; ...@@ -126,6 +126,7 @@ $--background-color-lighter: #F8F8F8 !default;
$--background-select-checked: #D1ECFF !default; $--background-select-checked: #D1ECFF !default;
$--background-transfer-head: #F7F7F7 !default; $--background-transfer-head: #F7F7F7 !default;
$--background-transfer-disabled-button: #C2E2F2 !default; $--background-transfer-disabled-button: #C2E2F2 !default;
$--background-dialog-header: #EFEFEF !default;
/* Link /* Link
-------------------------- */ -------------------------- */
...@@ -803,13 +804,14 @@ $--switch-button-size: 16px !default; ...@@ -803,13 +804,14 @@ $--switch-button-size: 16px !default;
$--dialog-background-color: $--color-white !default; $--dialog-background-color: $--color-white !default;
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--dialog-title-font-size: $--font-size-large !default; $--dialog-title-font-size: $--font-size-base !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--dialog-content-font-size: 14px !default; $--dialog-content-font-size: 14px !default;
/// fontLineHeight||LineHeight|2 /// fontLineHeight||LineHeight|2
$--dialog-font-line-height: $--font-line-height-primary !default; $--dialog-font-line-height: $--font-line-height-primary !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--dialog-padding-primary: 24px !default; $--dialog-padding-primary: 20px !default;
$--dialog-padding-footer: 40px !default;
$--dialog-header-padding-primary: 16px !default; $--dialog-header-padding-primary: 16px !default;
/* Table /* Table
-------------------------- */ -------------------------- */
......
node_module/element-theme-chalk/src/dialog.scss
View file @ d011c378
...@@ -34,6 +34,9 @@ ...@@ -34,6 +34,9 @@
padding: $--dialog-header-padding-primary; padding: $--dialog-header-padding-primary;
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 8px; padding-top: 8px;
height: 32px;
line-height: 32px;
background: $--background-dialog-header;
} }
@include e(headerbtn) { @include e(headerbtn) {
...@@ -41,6 +44,7 @@ ...@@ -41,6 +44,7 @@
top: $--dialog-header-padding-primary; top: $--dialog-header-padding-primary;
right: 12px; right: 12px;
padding: 0; padding: 0;
top: 8px;
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
...@@ -58,39 +62,48 @@ ...@@ -58,39 +62,48 @@
} }
} }
@include e(title) { @include e(title) {
line-height: 36px; line-height: 10px;
height: 36px; height: 32px;
font-size: $--dialog-title-font-size; font-size: $--dialog-title-font-size;
font-weight: bold;
color: $--color-text-primary; color: $--color-text-primary;
position: absolute;
margin-top: 3px;
}
@include e(tip) {
font-size: $--dialog-title-font-size;
height: 40px;
line-height: 40px;
padding: 0 32px;
border-bottom: 1px solid $--background-dialog-header;
margin: -20px -20px 18px -20px;
@include e(infotip){
color: $--color-info;
}
@include e(successtip){
color: $--color-success;
} }
}
@include e(body) { @include e(body) {
padding: 8px $--dialog-padding-primary; padding: $--dialog-padding-primary;
color: $--color-text-regular; color: $--color-text-regular;
font-size: $--dialog-content-font-size; font-size: $--dialog-content-font-size;
word-break: break-all; word-break: break-all;
} }
@include e(footer) { @include e(footer) {
padding: $--dialog-padding-primary; padding: 0 0 $--dialog-padding-footer 0;
padding-top: 24px;
padding-right: 16px;
text-align: right; text-align: right;
box-sizing: border-box; box-sizing: border-box;
& button:nth-child(1) {
color: $--color-text-secondary;
background-color: $--color-white;
border-color: $--color-text-placeholder;
&:focus, &:hover {
color:$--color-primary-text-plain-hover;
background-color: $--color-primary-background-plain-hover;
border-color:$--color-primary-border-plain-hover;
}
}
& button:nth-child(2) { & button:nth-child(2) {
margin-left: 8px; margin-left: 20px;
} }
} }
......
node_module/element-theme-chalk/src/form.scss
View file @ d011c378
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
} }
} }
@include b(form-item) { @include b(form-item) {
margin-bottom: 18px; margin-bottom: 16px;
@include utils-clearfix; @include utils-clearfix;
& .el-form-item { & .el-form-item {
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
@include e(error) { @include e(error) {
color: $--color-danger; color: $--color-danger;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 15px;
height: 16px; height: 16px;
white-space:nowrap; white-space:nowrap;
margin-bottom: -20px; margin-bottom: -20px;
......
theme/dialog.css
View file @ d011c378
...@@ -593,12 +593,16 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -593,12 +593,16 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-dialog__header { .el-dialog__header {
padding: 16px; padding: 16px;
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 8px; } padding-top: 8px;
height: 32px;
line-height: 32px;
background: #EFEFEF; }
.el-dialog__headerbtn { .el-dialog__headerbtn {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 12px; right: 12px;
padding: 0; padding: 0;
top: 8px;
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
...@@ -609,37 +613,41 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -609,37 +613,41 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
color: #0994DC; } color: #0994DC; }
.el-dialog__title { .el-dialog__title {
line-height: 36px; line-height: 10px;
height: 36px; height: 32px;
font-size: 18px; font-size: 14px;
color: #333333; } font-weight: bold;
color: #333333;
position: absolute;
margin-top: 3px; }
.el-dialog__tip {
font-size: 14px;
height: 40px;
line-height: 40px;
padding: 0 32px;
border-bottom: 1px solid #EFEFEF;
margin: -20px -20px 18px -20px; }
.el-dialog__infotip {
color: #00BBF2; }
.el-dialog__successtip {
color: #4EC87C; }
.el-dialog__body { .el-dialog__body {
padding: 8px 24px; padding: 20px;
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
word-break: break-all; } word-break: break-all; }
.el-dialog__footer { .el-dialog__footer {
padding: 24px; padding: 0 0 40px 0;
padding-top: 24px;
padding-right: 16px;
text-align: right; text-align: right;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.el-dialog__footer button:nth-child(1) {
color: #999999;
background-color: #FFFFFF;
border-color: #CCCCCC; }
.el-dialog__footer button:nth-child(1):focus, .el-dialog__footer button:nth-child(1):hover {
color: #0885C6;
background-color: #EDF6FC;
border-color: #0885C6; }
.el-dialog__footer button:nth-child(2) { .el-dialog__footer button:nth-child(2) {
margin-left: 8px; } margin-left: 20px; }
.el-dialog--center { .el-dialog--center {
text-align: center; } text-align: center; }
.el-dialog--center .el-dialog__body { .el-dialog--center .el-dialog__body {
text-align: initial; text-align: initial;
padding: 25px 29px 30px; } padding: 25px 25px 30px; }
.el-dialog--center .el-dialog__footer { .el-dialog--center .el-dialog__footer {
text-align: inherit; } text-align: inherit; }
......
theme/drawer.css
View file @ d011c378
...@@ -457,7 +457,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -457,7 +457,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
margin-bottom: 32px; margin-bottom: 32px;
padding: 24px; padding: 20px;
padding-bottom: 0; } padding-bottom: 0; }
.el-drawer__header > :first-child { .el-drawer__header > :first-child {
-webkit-box-flex: 1; -webkit-box-flex: 1;
......
theme/form.css
View file @ d011c378
...@@ -288,7 +288,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -288,7 +288,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: block; } display: block; }
.el-form-item { .el-form-item {
margin-bottom: 18px; } margin-bottom: 16px; }
.el-form-item::before, .el-form-item::before,
.el-form-item::after { .el-form-item::after {
display: table; display: table;
...@@ -350,7 +350,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -350,7 +350,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-form-item__error { .el-form-item__error {
color: #FF3D33; color: #FF3D33;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 15px;
height: 16px; height: 16px;
white-space: nowrap; white-space: nowrap;
margin-bottom: -20px; } margin-bottom: -20px; }
......
theme/index.css
View file @ d011c378
...@@ -5271,12 +5271,16 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -5271,12 +5271,16 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-dialog__header { .el-dialog__header {
padding: 16px; padding: 16px;
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 8px; } padding-top: 8px;
height: 32px;
line-height: 32px;
background: #EFEFEF; }
.el-dialog__headerbtn { .el-dialog__headerbtn {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 12px; right: 12px;
padding: 0; padding: 0;
top: 8px;
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
...@@ -5287,37 +5291,41 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -5287,37 +5291,41 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
color: #0994DC; } color: #0994DC; }
.el-dialog__title { .el-dialog__title {
line-height: 36px; line-height: 10px;
height: 36px; height: 32px;
font-size: 18px; font-size: 14px;
color: #333333; } font-weight: bold;
color: #333333;
position: absolute;
margin-top: 3px; }
.el-dialog__tip {
font-size: 14px;
height: 40px;
line-height: 40px;
padding: 0 32px;
border-bottom: 1px solid #EFEFEF;
margin: -20px -20px 18px -20px; }
.el-dialog__infotip {
color: #00BBF2; }
.el-dialog__successtip {
color: #4EC87C; }
.el-dialog__body { .el-dialog__body {
padding: 8px 24px; padding: 20px;
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
word-break: break-all; } word-break: break-all; }
.el-dialog__footer { .el-dialog__footer {
padding: 24px; padding: 0 0 40px 0;
padding-top: 24px;
padding-right: 16px;
text-align: right; text-align: right;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.el-dialog__footer button:nth-child(1) {
color: #999999;
background-color: #FFFFFF;
border-color: #CCCCCC; }
.el-dialog__footer button:nth-child(1):focus, .el-dialog__footer button:nth-child(1):hover {
color: #0885C6;
background-color: #EDF6FC;
border-color: #0885C6; }
.el-dialog__footer button:nth-child(2) { .el-dialog__footer button:nth-child(2) {
margin-left: 8px; } margin-left: 20px; }
.el-dialog--center { .el-dialog--center {
text-align: center; } text-align: center; }
.el-dialog--center .el-dialog__body { .el-dialog--center .el-dialog__body {
text-align: initial; text-align: initial;
padding: 25px 29px 30px; } padding: 25px 25px 30px; }
.el-dialog--center .el-dialog__footer { .el-dialog--center .el-dialog__footer {
text-align: inherit; } text-align: inherit; }
...@@ -32359,7 +32367,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -32359,7 +32367,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: block; } display: block; }
.el-form-item { .el-form-item {
margin-bottom: 18px; } margin-bottom: 16px; }
.el-form-item::before, .el-form-item::before,
.el-form-item::after { .el-form-item::after {
display: table; display: table;
...@@ -32421,7 +32429,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -32421,7 +32429,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-form-item__error { .el-form-item__error {
color: #FF3D33; color: #FF3D33;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 15px;
height: 16px; height: 16px;
white-space: nowrap; white-space: nowrap;
margin-bottom: -20px; } margin-bottom: -20px; }
...@@ -58949,7 +58957,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -58949,7 +58957,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
margin-bottom: 32px; margin-bottom: 32px;
padding: 24px; padding: 20px;
padding-bottom: 0; } padding-bottom: 0; }
.el-drawer__header > :first-child { .el-drawer__header > :first-child {
-webkit-box-flex: 1; -webkit-box-flex: 1;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment