mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [el-transfer] improve styles (#5139)

Browse Source
This commit is contained in:
msidolphin 2022-01-08 19:53:52 +08:00 committed by GitHub
parent d61cf39cf3
commit b5ae3e80bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/transfer/basic.vue
View File

@ -102,7 +102,7 @@ const handleChange = (
<style>
.transfer-footer {
margin-left: 20px;
margin-left: 15px;
padding: 6px 5px;
}
</style>

28
packages/components/transfer/src/transfer-panel.vue
View File

@ -18,16 +18,13 @@
v-if="filterable"
v-model="query"
class="el-transfer-panel__filter"
size="small"
size="default"
:placeholder="placeholder"
:prefix-icon="SearchIcon"
clearable
@mouseenter="inputHover = true"
@mouseleave="inputHover = false"
>
<template #prefix>
<el-icon v-if="inputIcon" class="el-input__icon" @click="clearQuery">
<component :is="inputIcon" />
</el-icon>
</template>
</el-input>
<el-checkbox-group
v-show="!hasNoMatch && data.length > 0"
@ -62,9 +59,8 @@
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useLocale } from '@element-plus/hooks'
import { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'
import ElIcon from '@element-plus/components/icon'
import ElInput from '@element-plus/components/input'
import { CircleClose, Search } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'
export default defineComponent({
@ -74,7 +70,6 @@ export default defineComponent({
ElCheckboxGroup,
ElCheckbox,
ElInput,
ElIcon,
OptionContent: ({ option }) => option,
},
@ -107,20 +102,8 @@ export default defineComponent({
return panelState.query.length > 0 && filteredData.value.length === 0
})
const inputIcon = computed(() => {
return panelState.query.length > 0 && panelState.inputHover
? CircleClose
: Search
})
const hasFooter = computed(() => !!slots.default()[0].children.length)
const clearQuery = () => {
if (inputIcon.value === CircleClose) {
panelState.query = ''
}
}
const { checked, allChecked, query, inputHover, checkChangeByUser } =
toRefs(panelState)
@ -140,9 +123,8 @@ export default defineComponent({
checkChangeByUser,
hasNoMatch,
inputIcon,
SearchIcon: Search,
hasFooter,
clearQuery,
t,
}

2
packages/theme-chalk/src/common/var.scss
View File

@ -1044,7 +1044,7 @@ $transfer: map.merge(
'panel-header-height': 40px,
'panel-header-bg-color': var(--el-bg-color),
'panel-footer-height': 40px,
'panel-body-height': 246px,
'panel-body-height': 278px,
'item-height': 30px,
'filter-height': 32px,
),

58
packages/theme-chalk/src/transfer.scss
View File

@ -20,9 +20,7 @@
}
@include e(button) {
&:first-child {
margin-bottom: 10px;
}
vertical-align: top;
&:nth-child(2) {
margin: 0 0 0 10px;
@ -40,8 +38,6 @@
}
@include b(transfer-panel) {
border: 1px solid var(--el-transfer-border-color);
border-radius: var(--el-transfer-border-radius);
overflow: hidden;
background: var(--el-color-white);
display: inline-block;
@ -54,9 +50,16 @@
@include e(body) {
height: var(--el-transfer-panel-body-height);
@include when(with-footer) {
padding-bottom: var(--el-transfer-panel-footer-height);
border-left: 1px solid var(--el-transfer-border-color);
border-right: 1px solid var(--el-transfer-border-color);
border-bottom: 1px solid var(--el-transfer-border-color);
border-bottom-left-radius: var(--el-transfer-border-radius);
border-bottom-right-radius: var(--el-transfer-border-radius);
overflow: hidden;
@include when('with-footer') {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
@ -67,12 +70,8 @@
height: var(--el-transfer-panel-body-height);
overflow: auto;
box-sizing: border-box;
@include when(filterable) {
height: calc(
var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) -
20px
);
height: calc(100% - var(--el-transfer-filter-height) - 30px);
padding-top: 0;
}
}
@ -100,7 +99,7 @@
@include utils-ellipsis;
display: block;
box-sizing: border-box;
padding-left: 24px;
padding-left: 22px;
line-height: var(--el-transfer-item-height);
}
@ -114,7 +113,6 @@
text-align: center;
margin: 15px;
box-sizing: border-box;
display: block;
width: auto;
.#{$namespace}-input__inner {
@ -124,12 +122,6 @@
display: inline-block;
box-sizing: border-box;
border-radius: calc(var(--el-transfer-filter-height) / 2);
padding-right: 10px;
padding-left: 30px;
}
.#{$namespace}-input__icon {
margin-left: 5px;
}
.#{$namespace}-icon-circle-close {
@ -138,18 +130,23 @@
}
.#{$namespace}-transfer-panel__header {
display: flex;
align-items: center;
height: var(--el-transfer-panel-header-height);
line-height: var(--el-transfer-panel-header-height);
background: var(--el-transfer-panel-header-bg-color);
margin: 0;
padding-left: 15px;
border-bottom: 1px solid var(--el-transfer-border-color);
border: 1px solid var(--el-transfer-border-color);
border-top-left-radius: var(--el-transfer-border-radius);
border-top-right-radius: var(--el-transfer-border-radius);
box-sizing: border-box;
color: var(--el-color-black);
.#{$namespace}-checkbox {
display: block;
line-height: 40px;
position: relative;
display: flex;
width: 100%;
align-items: center;
.#{$namespace}-checkbox__label {
font-size: 16px;
@ -159,6 +156,8 @@
span {
position: absolute;
right: 15px;
top: 50%;
transform: translate3d(0, -50%, 0);
color: var(--el-text-color-secondary);
font-size: 12px;
font-weight: normal;
@ -172,12 +171,9 @@
background: var(--el-color-white);
margin: 0;
padding: 0;
border-top: 1px solid var(--el-transfer-border-color);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: var(--el-index-normal);
border: 1px solid var(--el-transfer-border-color);
border-bottom-left-radius: var(--el-transfer-border-radius);
border-bottom-right-radius: var(--el-transfer-border-radius);
@include utils-vertical-center;
.#{$namespace}-checkbox {