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

docs/examples/transfer/basic.vue

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

packages/components/transfer/src/transfer-panel.vue

@@ -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,
     }

packages/theme-chalk/src/common/var.scss

@@ -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,
   ),

packages/theme-chalk/src/transfer.scss

@@ -20,9 +20,7 @@
   }
 
   @include e(button) {
-    &:first-child {
+    vertical-align: top;
-      margin-bottom: 10px;
-    }
 
     &: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);
-
+    border-left: 1px solid var(--el-transfer-border-color);
-    @include when(with-footer) {
+    border-right: 1px solid var(--el-transfer-border-color);
-      padding-bottom: var(--el-transfer-panel-footer-height);
+    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(
+      height: calc(100% - var(--el-transfer-filter-height) - 30px);
-        var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) -
-          20px
-      );
       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;
+      position: relative;
-      line-height: 40px;
+      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);
+    border: 1px solid var(--el-transfer-border-color);
-    position: absolute;
+    border-bottom-left-radius: var(--el-transfer-border-radius);
-    bottom: 0;
+    border-bottom-right-radius: var(--el-transfer-border-radius);
-    left: 0;
-    width: 100%;
-    z-index: var(--el-index-normal);
     @include utils-vertical-center;
 
     .#{$namespace}-checkbox {