style(pro:transfer,tree): modify tree node horizontal padding

IDuxFE · Jan 29, 2024 · f34e8e8 · f34e8e8
1 parent f091062
commit f34e8e8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/packages/components/tree-select/theme/default.ts b/packages/components/tree-select/theme/default.ts
@@ -15,7 +15,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     optionPadding: `${paddingSizeSm}px ${paddingSizeMd}px`,
     optionMarginLeft: marginSizeSm,
     optionContainerPadding: `${paddingSizeXs}px 0`,
-    optionContainerTreeNodePadding: `0 0 0 ${paddingSizeSm}px`,
+    optionContainerTreeNodePadding: `0 0 0 ${paddingSizeMd}px`,
 
     overlaySearchWrapperPadding: `${paddingSizeXs}px ${paddingSizeMd}px ${paddingSizeSm}px`,
   }

diff --git a/packages/pro/transfer/style/index.less b/packages/pro/transfer/style/index.less
@@ -75,6 +75,7 @@
     &.@{tree-prefix}-blocked .@{tree-node-prefix} {
       transition: none;
       background-color: var(--ix-color-container-bg);
+      padding-left: var(--ix-padding-size-md);
       &:hover {
         background-color: var(--ix-color-container-bg-hover);
         &-content {

diff --git a/packages/pro/tree/demo/Basic.vue b/packages/pro/tree/demo/Basic.vue
@@ -146,13 +146,13 @@ const onUpdateSelectedKeys = (keys: string[]) => {
 .demo-pro-tree {
   .add-btn {
     font-size: 12px;
-    color: #1c6eff;
+    color: var(--ix-color-primary);
   }
 
   .ix-tree-node {
     .ix-tree-node-content-suffix {
       position: sticky;
-      right: 12px;
+      right: 0;
       display: none;
     }
 
@@ -169,9 +169,9 @@ const onUpdateSelectedKeys = (keys: string[]) => {
   }
 
   .operation-icon {
-    color: #5e6573;
+    color: var(--ix-color-icon);
     &:hover {
-      color: #1c6eff;
+      color: var(--ix-color-icon-hover);
     }
   }
 }

diff --git a/packages/pro/tree/style/variables.less b/packages/pro/tree/style/variables.less
@@ -1,9 +1,9 @@
 @pro-tree-border: var(--ix-line-width) var(--ix-line-type) var(--ix-color-border-secondary);
 @pro-tree-padding: 0;
-@pro-tree-header-search-wrapper-gap: 4px;
-@pro-tree-header-search-wrapper-horizontal-spacing: 12px;
+@pro-tree-header-search-wrapper-gap: var(--ix-margin-size-xs);
+@pro-tree-header-search-wrapper-horizontal-spacing: var(--ix-padding-size-md);
 @pro-tree-header-search-wrapper-vertical-spacing: 0;
-@pro-tree-search-wrapper-margin-bottom: 8px;
+@pro-tree-search-wrapper-margin-bottom: var(--ix-margin-size-sm);
 @pro-tree-search-input-suffix-color: var(--ix-color-icon-info);
 @pro-tree-header-wrapper-icon-font-size: var(--ix-font-size-icon);
 @pro-tree-header-wrapper-icon-hover-color: var(--ix-color-icon-hover);
@@ -12,5 +12,5 @@
 @pro-tree-content-vertical-spacing: 0;
 
 @pro-tree-divider-horizontal-spacing: @pro-tree-header-search-wrapper-horizontal-spacing;
-@pro-tree-divider-vertical-spacing: 8px;
-@pro-tree-node-padding: 0 0 0 8px;
+@pro-tree-divider-vertical-spacing: var(--ix-margin-size-sm);
+@pro-tree-node-padding: 0 0 0 var(--ix-padding-size-md);