Skip to content

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

修改transfer样式，完善cascader样式

parent a575c94e
Show whitespace changes
Inline Side-by-side
Showing with 165 additions and 95 deletions
element-variables.scss
View file @ da046b26
...@@ -124,6 +124,8 @@ $--background-color-base: #F6F6F6 !default; ...@@ -124,6 +124,8 @@ $--background-color-base: #F6F6F6 !default;
$--background-color-light: #F5F6F7 !default; $--background-color-light: #F5F6F7 !default;
$--background-color-lighter: #F8F8F8 !default; $--background-color-lighter: #F8F8F8 !default;
$--background-select-checked: #D1ECFF !default; $--background-select-checked: #D1ECFF !default;
$--background-transfer-head: #F7F7F7 !default;
$--background-transfer-disabled-button: #C2E2F2 !default;
/* Link /* Link
-------------------------- */ -------------------------- */
...@@ -1054,20 +1056,20 @@ $--collapse-content-font-color: $--color-text-primary !default; ...@@ -1054,20 +1056,20 @@ $--collapse-content-font-color: $--color-text-primary !default;
/* Transfer /* Transfer
--------------------------*/ --------------------------*/
$--transfer-border-color: $--border-color-lighter !default; $--transfer-border-color: $--border-color-base !default;
$--transfer-border-radius: $--border-radius-base !default; $--transfer-border-radius: $--border-radius-base !default;
/// height||Other|4 /// height||Other|4
$--transfer-panel-width: 200px !default; $--transfer-panel-width: 200px !default;
/// height||Other|4 /// height||Other|4
$--transfer-panel-header-height: 40px !default; $--transfer-panel-header-height: 36px !default;
/// color||Color|0 /// color||Color|0
$--transfer-panel-header-background-color: $--background-color-base !default; $--transfer-panel-header-background-color: $--background-transfer-head !default;
/// height||Other|4 /// height||Other|4
$--transfer-panel-footer-height: 40px !default; $--transfer-panel-footer-height: 40px !default;
/// height||Other|4 /// height||Other|4
$--transfer-panel-body-height: 246px !default; $--transfer-panel-body-height: 246px !default;
/// height||Other|4 /// height||Other|4
$--transfer-item-height: 30px !default; $--transfer-item-height: 28px !default;
/// height||Other|4 /// height||Other|4
$--transfer-filter-height: 32px !default; $--transfer-filter-height: 32px !default;
......
node_module/element-theme-chalk/src/button.scss
View file @ da046b26
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
font-weight: $--button-font-weight; font-weight: $--button-font-weight;
@include utils-user-select(none); @include utils-user-select(none);
& + & { & + & {
margin-left: 10px; margin-left: 8px;
} }
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius); @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
......
node_module/element-theme-chalk/src/cascader-panel.scss
View file @ da046b26
...@@ -121,5 +121,12 @@ ...@@ -121,5 +121,12 @@
> .el-checkbox { > .el-checkbox {
margin-right: 8px; margin-right: 8px;
&.is-checked {
.el-cascader-node__label {
color: $--color-primary;
}
}
} }
} }
node_module/element-theme-chalk/src/transfer.scss
View file @ da046b26
...@@ -12,26 +12,30 @@ ...@@ -12,26 +12,30 @@
@include e(buttons) { @include e(buttons) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 30px; padding: 0 24px;
} }
@include e(button) { @include e(button) {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 8px;
border-radius: 50%; border-radius: 50%;
color: $--color-white; color: $--color-white;
background-color: $--color-primary; background-color: $--color-primary;
font-size: 0; font-size: 0;
margin-left: 8px;
width: 56px;
height: 32px;
line-height: 32px;
@include when(with-texts) { @include when(with-texts) {
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
} }
@include when(disabled) { @include when(disabled) {
border: $--border-base; border: $--border-base !important;
background-color: $--background-color-base; background-color: $--background-transfer-disabled-button !important;
color: $--color-text-placeholder; color: $--color-white !important;
&:hover { &:hover {
border: $--border-base; border: $--border-base;
...@@ -40,10 +44,6 @@ ...@@ -40,10 +44,6 @@
} }
} }
&:first-child {
margin-bottom: 10px;
}
&:nth-child(2) { &:nth-child(2) {
margin: 0; margin: 0;
} }
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
@include e(list) { @include e(list) {
margin: 0; margin: 0;
padding: 6px 0; padding: 4px 0;
list-style: none; list-style: none;
height: $--transfer-panel-body-height; height: $--transfer-panel-body-height;
overflow: auto; overflow: auto;
...@@ -95,20 +95,36 @@ ...@@ -95,20 +95,36 @@
@include e(item) { @include e(item) {
height: $--transfer-item-height; height: $--transfer-item-height;
line-height: $--transfer-item-height; line-height: $--transfer-item-height;
padding-left: 15px; padding-left: 8px;
display: block; display: block;
width: 100%;
text-align: left;
& + .el-transfer-panel__item { & + .el-transfer-panel__item {
text-align: left;
margin-left: 0; margin-left: 0;
display: block!important; display: block!important;
} }
&.el-checkbox { &.el-checkbox {
color: $--color-text-regular; color: $--color-text-regular;
&.is-checked {
.el-checkbox__label {
color: $--color-primary;
}
}
&.is-disabled{
.el-checkbox__label {
color: $--color-text-primary;
}
}
} }
&:hover { &:hover {
color: $--color-primary; color: $--color-primary-hover;
background: $--color-primary-background-plain-hover;
} }
&.el-checkbox .el-checkbox__label { &.el-checkbox .el-checkbox__label {
...@@ -116,13 +132,19 @@ ...@@ -116,13 +132,19 @@
@include utils-ellipsis; @include utils-ellipsis;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding-left: 24px; padding-left: 8px;
line-height: $--transfer-item-height; line-height: $--transfer-item-height;
text-align: left;
margin-left: 12px;
} }
.el-checkbox__input { .el-checkbox__input {
position: absolute; position: absolute;
top: 8px; top: 7px;
}
&.is-checked {
background: $--background-select-checked;
} }
} }
...@@ -154,21 +176,22 @@ ...@@ -154,21 +176,22 @@
} }
.el-transfer-panel__header { .el-transfer-panel__header {
text-align: left;
height: $--transfer-panel-header-height; height: $--transfer-panel-header-height;
line-height: $--transfer-panel-header-height; line-height: $--transfer-panel-header-height;
background: $--transfer-panel-header-background-color; background: $--transfer-panel-header-background-color;
margin: 0; margin: 0;
padding-left: 15px; padding-left: 8px;
border-bottom: 1px solid $--transfer-border-color; border-bottom: 1px solid $--transfer-border-color;
box-sizing: border-box; box-sizing: border-box;
color: $--color-black; color: $--color-text-primary;
.el-checkbox { .el-checkbox {
display: block; display: block;
line-height: 40px; line-height: 36px;
.el-checkbox__label { .el-checkbox__label {
font-size: 16px; font-size: 14px;
color: $--color-text-primary; color: $--color-text-primary;
font-weight: normal; font-weight: normal;
...@@ -198,7 +221,7 @@ ...@@ -198,7 +221,7 @@
.el-checkbox { .el-checkbox {
padding-left: 20px; padding-left: 20px;
color: $--color-text-regular; color: $--color-text-primary;
} }
} }
......
theme/button.css
View file @ da046b26
...@@ -414,7 +414,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -414,7 +414,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
......
theme/calendar.css
View file @ da046b26
...@@ -678,7 +678,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -678,7 +678,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
......
theme/cascader-panel.css
View file @ da046b26
...@@ -1858,3 +1858,5 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -1858,3 +1858,5 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-left: 8px; } padding-left: 8px; }
.el-cascader-node > .el-checkbox { .el-cascader-node > .el-checkbox {
margin-right: 8px; } margin-right: 8px; }
.el-cascader-node > .el-checkbox.is-checked .el-cascader-node__label {
color: #0994DC; }
theme/cascader.css
View file @ da046b26
...@@ -3487,6 +3487,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -3487,6 +3487,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-left: 8px; } padding-left: 8px; }
.el-cascader-node > .el-checkbox { .el-cascader-node > .el-checkbox {
margin-right: 8px; } margin-right: 8px; }
.el-cascader-node > .el-checkbox.is-checked .el-cascader-node__label {
color: #0994DC; }
.el-cascader { .el-cascader {
display: inline-block; display: inline-block;
......
theme/dropdown.css
View file @ da046b26
...@@ -678,7 +678,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -678,7 +678,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
......
theme/index.css
View file @ da046b26
...@@ -7536,7 +7536,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -7536,7 +7536,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -16232,7 +16232,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -16232,7 +16232,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -30586,7 +30586,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -30586,7 +30586,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -48518,6 +48518,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -48518,6 +48518,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-left: 8px; } padding-left: 8px; }
.el-cascader-node > .el-checkbox { .el-cascader-node > .el-checkbox {
margin-right: 8px; } margin-right: 8px; }
.el-cascader-node > .el-checkbox.is-checked .el-cascader-node__label {
color: #0994DC; }
.el-cascader { .el-cascader {
display: inline-block; display: inline-block;
...@@ -50458,7 +50460,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -50458,7 +50460,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -51513,27 +51515,29 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51513,27 +51515,29 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-transfer__buttons { .el-transfer__buttons {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 30px; } padding: 0 24px; }
.el-transfer__button { .el-transfer__button {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 8px;
border-radius: 50%; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
background-color: #0994DC; background-color: #0994DC;
font-size: 0; } font-size: 0;
margin-left: 8px;
width: 56px;
height: 32px;
line-height: 32px; }
.el-transfer__button.is-with-texts { .el-transfer__button.is-with-texts {
border-radius: 3px; } border-radius: 3px; }
.el-transfer__button.is-disabled { .el-transfer__button.is-disabled {
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4 !important;
background-color: #F6F6F6; background-color: #C2E2F2 !important;
color: #CCCCCC; } color: #FFFFFF !important; }
.el-transfer__button.is-disabled:hover { .el-transfer__button.is-disabled:hover {
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4;
background-color: #F6F6F6; background-color: #F6F6F6;
color: #CCCCCC; } color: #CCCCCC; }
.el-transfer__button:first-child {
margin-bottom: 10px; }
.el-transfer__button:nth-child(2) { .el-transfer__button:nth-child(2) {
margin: 0; } margin: 0; }
.el-transfer__button i, .el-transfer__button span { .el-transfer__button i, .el-transfer__button span {
...@@ -51542,7 +51546,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51542,7 +51546,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
margin-left: 0; } margin-left: 0; }
.el-transfer-panel { .el-transfer-panel {
border: 1px solid #EBEBEB; border: 1px solid #E4E4E4;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
background: #FFFFFF; background: #FFFFFF;
...@@ -51559,7 +51563,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51559,7 +51563,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-bottom: 40px; } padding-bottom: 40px; }
.el-transfer-panel__list { .el-transfer-panel__list {
margin: 0; margin: 0;
padding: 6px 0; padding: 4px 0;
list-style: none; list-style: none;
height: 246px; height: 246px;
overflow: auto; overflow: auto;
...@@ -51569,17 +51573,25 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51569,17 +51573,25 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
height: 194px; height: 194px;
padding-top: 0; } padding-top: 0; }
.el-transfer-panel__item { .el-transfer-panel__item {
height: 30px; height: 28px;
line-height: 30px; line-height: 28px;
padding-left: 15px; padding-left: 8px;
display: block; } display: block;
width: 100%;
text-align: left; }
.el-transfer-panel__item + .el-transfer-panel__item { .el-transfer-panel__item + .el-transfer-panel__item {
text-align: left;
margin-left: 0; margin-left: 0;
display: block !important; } display: block !important; }
.el-transfer-panel__item.el-checkbox { .el-transfer-panel__item.el-checkbox {
color: #666666; } color: #666666; }
.el-transfer-panel__item:hover { .el-transfer-panel__item.el-checkbox.is-checked .el-checkbox__label {
color: #0994DC; } color: #0994DC; }
.el-transfer-panel__item.el-checkbox.is-disabled .el-checkbox__label {
color: #333333; }
.el-transfer-panel__item:hover {
color: #0885C6;
background: #EDF6FC; }
.el-transfer-panel__item.el-checkbox .el-checkbox__label { .el-transfer-panel__item.el-checkbox .el-checkbox__label {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -51588,11 +51600,15 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51588,11 +51600,15 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: block; display: block;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding-left: 24px; padding-left: 8px;
line-height: 30px; } line-height: 28px;
text-align: left;
margin-left: 12px; }
.el-transfer-panel__item .el-checkbox__input { .el-transfer-panel__item .el-checkbox__input {
position: absolute; position: absolute;
top: 8px; } top: 7px; }
.el-transfer-panel__item.is-checked {
background: #D1ECFF; }
.el-transfer-panel__filter { .el-transfer-panel__filter {
text-align: center; text-align: center;
margin: 15px; margin: 15px;
...@@ -51615,20 +51631,21 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51615,20 +51631,21 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-transfer-panel__filter .el-icon-circle-close { .el-transfer-panel__filter .el-icon-circle-close {
cursor: pointer; } cursor: pointer; }
.el-transfer-panel .el-transfer-panel__header { .el-transfer-panel .el-transfer-panel__header {
height: 40px; text-align: left;
line-height: 40px; height: 36px;
background: #F6F6F6; line-height: 36px;
background: #F7F7F7;
margin: 0; margin: 0;
padding-left: 15px; padding-left: 8px;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #E4E4E4;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
color: #000000; } color: #333333; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox { .el-transfer-panel .el-transfer-panel__header .el-checkbox {
display: block; display: block;
line-height: 40px; } line-height: 36px; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
font-size: 16px; font-size: 14px;
color: #333333; color: #333333;
font-weight: normal; } font-weight: normal; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span { .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
...@@ -51642,7 +51659,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51642,7 +51659,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
background: #FFFFFF; background: #FFFFFF;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: 1px solid #EBEBEB; border-top: 1px solid #E4E4E4;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -51655,11 +51672,11 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -51655,11 +51672,11 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
vertical-align: middle; } vertical-align: middle; }
.el-transfer-panel .el-transfer-panel__footer .el-checkbox { .el-transfer-panel .el-transfer-panel__footer .el-checkbox {
padding-left: 20px; padding-left: 20px;
color: #666666; } color: #333333; }
.el-transfer-panel .el-transfer-panel__empty { .el-transfer-panel .el-transfer-panel__empty {
margin: 0; margin: 0;
height: 30px; height: 28px;
line-height: 30px; line-height: 28px;
padding: 6px 15px 0; padding: 6px 15px 0;
color: #999999; color: #999999;
text-align: center; } text-align: center; }
...@@ -55193,7 +55210,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -55193,7 +55210,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -58084,6 +58101,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -58084,6 +58101,8 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-left: 8px; } padding-left: 8px; }
.el-cascader-node > .el-checkbox { .el-cascader-node > .el-checkbox {
margin-right: 8px; } margin-right: 8px; }
.el-cascader-node > .el-checkbox.is-checked .el-cascader-node__label {
color: #0994DC; }
/* BEM support Func /* BEM support Func
-------------------------- */ -------------------------- */
theme/message-box.css
View file @ da046b26
...@@ -982,7 +982,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -982,7 +982,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
......
theme/transfer.css
View file @ da046b26
...@@ -1234,7 +1234,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -1234,7 +1234,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
font-size: 14px; font-size: 14px;
border-radius: 3px; } border-radius: 3px; }
.el-button + .el-button { .el-button + .el-button {
margin-left: 10px; } margin-left: 8px; }
.el-button.is-round { .el-button.is-round {
padding: 10px 16px; } padding: 10px 16px; }
.el-button::-moz-focus-inner { .el-button::-moz-focus-inner {
...@@ -2289,27 +2289,29 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2289,27 +2289,29 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-transfer__buttons { .el-transfer__buttons {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 30px; } padding: 0 24px; }
.el-transfer__button { .el-transfer__button {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 8px;
border-radius: 50%; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
background-color: #0994DC; background-color: #0994DC;
font-size: 0; } font-size: 0;
margin-left: 8px;
width: 56px;
height: 32px;
line-height: 32px; }
.el-transfer__button.is-with-texts { .el-transfer__button.is-with-texts {
border-radius: 3px; } border-radius: 3px; }
.el-transfer__button.is-disabled { .el-transfer__button.is-disabled {
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4 !important;
background-color: #F6F6F6; background-color: #C2E2F2 !important;
color: #CCCCCC; } color: #FFFFFF !important; }
.el-transfer__button.is-disabled:hover { .el-transfer__button.is-disabled:hover {
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4;
background-color: #F6F6F6; background-color: #F6F6F6;
color: #CCCCCC; } color: #CCCCCC; }
.el-transfer__button:first-child {
margin-bottom: 10px; }
.el-transfer__button:nth-child(2) { .el-transfer__button:nth-child(2) {
margin: 0; } margin: 0; }
.el-transfer__button i, .el-transfer__button span { .el-transfer__button i, .el-transfer__button span {
...@@ -2318,7 +2320,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2318,7 +2320,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
margin-left: 0; } margin-left: 0; }
.el-transfer-panel { .el-transfer-panel {
border: 1px solid #EBEBEB; border: 1px solid #E4E4E4;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
background: #FFFFFF; background: #FFFFFF;
...@@ -2335,7 +2337,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2335,7 +2337,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
padding-bottom: 40px; } padding-bottom: 40px; }
.el-transfer-panel__list { .el-transfer-panel__list {
margin: 0; margin: 0;
padding: 6px 0; padding: 4px 0;
list-style: none; list-style: none;
height: 246px; height: 246px;
overflow: auto; overflow: auto;
...@@ -2345,17 +2347,25 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2345,17 +2347,25 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
height: 194px; height: 194px;
padding-top: 0; } padding-top: 0; }
.el-transfer-panel__item { .el-transfer-panel__item {
height: 30px; height: 28px;
line-height: 30px; line-height: 28px;
padding-left: 15px; padding-left: 8px;
display: block; } display: block;
width: 100%;
text-align: left; }
.el-transfer-panel__item + .el-transfer-panel__item { .el-transfer-panel__item + .el-transfer-panel__item {
text-align: left;
margin-left: 0; margin-left: 0;
display: block !important; } display: block !important; }
.el-transfer-panel__item.el-checkbox { .el-transfer-panel__item.el-checkbox {
color: #666666; } color: #666666; }
.el-transfer-panel__item:hover { .el-transfer-panel__item.el-checkbox.is-checked .el-checkbox__label {
color: #0994DC; } color: #0994DC; }
.el-transfer-panel__item.el-checkbox.is-disabled .el-checkbox__label {
color: #333333; }
.el-transfer-panel__item:hover {
color: #0885C6;
background: #EDF6FC; }
.el-transfer-panel__item.el-checkbox .el-checkbox__label { .el-transfer-panel__item.el-checkbox .el-checkbox__label {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -2364,11 +2374,15 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2364,11 +2374,15 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
display: block; display: block;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding-left: 24px; padding-left: 8px;
line-height: 30px; } line-height: 28px;
text-align: left;
margin-left: 12px; }
.el-transfer-panel__item .el-checkbox__input { .el-transfer-panel__item .el-checkbox__input {
position: absolute; position: absolute;
top: 8px; } top: 7px; }
.el-transfer-panel__item.is-checked {
background: #D1ECFF; }
.el-transfer-panel__filter { .el-transfer-panel__filter {
text-align: center; text-align: center;
margin: 15px; margin: 15px;
...@@ -2391,20 +2405,21 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2391,20 +2405,21 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
.el-transfer-panel__filter .el-icon-circle-close { .el-transfer-panel__filter .el-icon-circle-close {
cursor: pointer; } cursor: pointer; }
.el-transfer-panel .el-transfer-panel__header { .el-transfer-panel .el-transfer-panel__header {
height: 40px; text-align: left;
line-height: 40px; height: 36px;
background: #F6F6F6; line-height: 36px;
background: #F7F7F7;
margin: 0; margin: 0;
padding-left: 15px; padding-left: 8px;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #E4E4E4;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
color: #000000; } color: #333333; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox { .el-transfer-panel .el-transfer-panel__header .el-checkbox {
display: block; display: block;
line-height: 40px; } line-height: 36px; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
font-size: 16px; font-size: 14px;
color: #333333; color: #333333;
font-weight: normal; } font-weight: normal; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span { .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
...@@ -2418,7 +2433,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2418,7 +2433,7 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
background: #FFFFFF; background: #FFFFFF;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: 1px solid #EBEBEB; border-top: 1px solid #E4E4E4;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -2431,11 +2446,11 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -2431,11 +2446,11 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
vertical-align: middle; } vertical-align: middle; }
.el-transfer-panel .el-transfer-panel__footer .el-checkbox { .el-transfer-panel .el-transfer-panel__footer .el-checkbox {
padding-left: 20px; padding-left: 20px;
color: #666666; } color: #333333; }
.el-transfer-panel .el-transfer-panel__empty { .el-transfer-panel .el-transfer-panel__empty {
margin: 0; margin: 0;
height: 30px; height: 28px;
line-height: 30px; line-height: 28px;
padding: 6px 15px 0; padding: 6px 15px 0;
color: #999999; color: #999999;
text-align: center; } text-align: center; }
......
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