style(Transfer): 添加穿梭箭头边框样式 (#673)

uiwjs · Mar 16, 2022 · 211f4fe · 211f4fe
1 parent f1ec501
commit 211f4fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/packages/react-transfer/src/index.tsx b/packages/react-transfer/src/index.tsx
@@ -156,6 +156,15 @@ function Transfer(props: TransferProps) {
     props.onSearch?.('right', searchValue);
   };
 
+  const Arrow = (props: { click: () => void; style: React.CSSProperties }) => (
+    <Icon
+      onClick={() => props.click()}
+      type="down-square-o"
+      className={`${prefixCls}-arrow`}
+      style={{ fontSize: 20, stroke: '#e9e9e9', fill: '#333', ...props.style }}
+    />
+  );
+
   return (
     <div className={cls} style={{ width: 400, ...style }}>
       <Card
@@ -181,18 +190,8 @@ function Transfer(props: TransferProps) {
         </div>
       </Card>
       <div className={`${prefixCls}-arrow-content`}>
-        <Icon
-          onClick={() => transferClick('left')}
-          type="down-square-o"
-          className={`${prefixCls}-arrow-left`}
-          style={{ transform: 'rotate(-90deg)', fontSize: 20 }}
-        />
-        <Icon
-          onClick={() => transferClick('right')}
-          type="down-square-o"
-          className={`${prefixCls}-arrow-right`}
-          style={{ transform: 'rotate(90deg)', fontSize: 20 }}
-        />
+        <Arrow click={() => transferClick('left')} style={{ transform: 'rotate(90deg)' }} />
+        <Arrow click={() => transferClick('right')} style={{ transform: 'rotate(-90deg)' }} />
       </div>
       <Card
         bodyStyle={{ padding: 5 }}

diff --git a/packages/react-transfer/src/style/index.less b/packages/react-transfer/src/style/index.less
@@ -22,12 +22,13 @@
     justify-content: space-between;
   }
 
-  &-arrow-left,
-  &-arrow-right {
+  &-arrow {
+    transition: all 0.3s;
+    border-radius: 3px;
+
     &:hover {
       cursor: pointer;
-      border-radius: 3px;
-      box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 1px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
     }
   }
 }