fix(grid): [grid] fix x-design theme style

Author: gimmyhehe

examples/sites/demos/apis/grid.js

@@ -1049,11 +1049,11 @@ export default {
         },
         {
           name: 'tooltip-config',
-          type: 'IToolTipConfig',
-          typeAnchorName: 'IToolTipConfig',
+          linkTo: 'tooltip#tooltip--props',
+          type: 'Tooltip.Props',
           defaultValue: '',
           desc: {
-            'zh-CN': 'Grid 内置 tooltip 配置项，请参考 Tooltip 组件属性说明',
+            'zh-CN': 'Grid 内置 tooltip 配置项，配置项将透传至 Tooltip，请参考 Tooltip 组件属性说明',
             'en-US':
               'Configuration item of the built-in tooltip of the Grid. For details, see the Tooltip Attribute Description.'
           },

packages/theme/src/grid/custom.less

@@ -31,7 +31,7 @@
     .@{grid-custom-prefix-cls}__tabs-body {
       overflow-y: auto;
       border: 0;
-      padding: 12px 0;
+      padding: 16px 0;
 
       .tabs-body-item {
         .@{grid-custom-prefix-cls}__alert {
@@ -40,11 +40,11 @@
 
         .@{grid-custom-prefix-cls}__setting {
           border-bottom: 1px solid transparent;
-          padding: 12px 0 24px;
+          padding: 8px 0 0;
 
           .setting-item {
             font-size: var(--tv-Grid-font-size);
-            padding: 10px 8px;
+            padding: 8px;
             overflow: hidden;
             position: relative;
             display: flex;
@@ -94,7 +94,6 @@
 
             .setting-item {
               span.label {
-                width: 26%;
                 display: inline-block;
                 text-align: right;
                 padding-right: 24px;

packages/theme/src/grid/menu.less

@@ -27,7 +27,7 @@
     font-size: var(--tv-Grid-font-size);
     background-color: #fff;
     box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
-    padding: 0 1px;
+    padding: 8px 0;
     color: var(--tv-Grid-text-color);
     overflow: visible;
     .user-select(none);
@@ -39,38 +39,25 @@
     .@{grid-menu-prefix-cls}__option-wrapper,
     .@{grid-menu-prefix-cls}__clild-wrapper {
       margin: 0;
-      padding: 0;
       list-style-type: none;
       border-bottom: 1px solid var(--tv-Grid-divider-color);
 
+      &:last-child {
+        border: 0;
+      }
+
       li {
         position: relative;
-        margin: 1px 0;
-        border: 1px solid transparent;
-
-        &:last-child {
-          border: 0;
-        }
 
         &.link__active {
-          color: #2b2b2b;
-          background-color: #c5c5c5;
-          border-color: #c5c5c5;
+          color: var(--tv-Grid-text-color);
+          background-color: var(--tv-Grid-bg-color-active);
         }
 
         &.link__disabled {
           .@{grid-menu-prefix-cls}__link {
-            color: var(--tv-Grid-text-color);
-            cursor: initial;
-          }
-
-          &.link__active {
-            border-color: #c0c1c2;
-            background-color: #eeeeee;
-
-            &:hover {
-              background-color: inherit;
-            }
+            color: var(--tv-Grid-text-color-disabled);
+            cursor: not-allowed;
           }
         }
       }

packages/theme/src/grid/mixins/table.less

@@ -53,13 +53,17 @@
 }
 
 .MiniColumnHeight() {
-  height: 30px;
+  height: 32px;
 }
 
 .DefaultTdPadding() {
   padding: var(--tv-Grid-cell-padding-y) var(--tv-Grid-cell-padding-x);
 }
 
+.SmallTdPadding() {
+  padding: var(--tv-Grid-cell-padding-y-small) var(--tv-Grid-cell-padding-x-small);
+}
+
 .MiniTdPadding () {
   padding: var(--tv-Grid-cell-padding-y-mini) var(--tv-Grid-cell-padding-x-mini);
 }

packages/theme/src/grid/table.less

@@ -98,7 +98,7 @@
     .@{grid-prefix-cls}-header__column,
     .@{grid-prefix-cls}-body__column,
     .@{grid-prefix-cls}-footer__column {
-      .DefaultTdPadding();
+      .SmallTdPadding();
     }
 
     .@{grid-prefix-cls}-body__column,
@@ -907,7 +907,7 @@
       .DefaultTdPadding();
 
       &.col__actived {
-        .DefaultTdPadding();
+        padding: 0 var(--tv-Grid-cell-padding-x);
       }
 
       // 可编辑表格showStatus为true时,左上角的角标

packages/theme/src/grid/vars.less

@@ -146,11 +146,15 @@
   --tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover);
   // 工具栏图标按钮边框圆角
   --tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md);
-  // -------mini表格-------
+  // -------mini/small表格-------
   // mini表格单元格水平内边距
   --tv-Grid-cell-padding-x-mini: 16px;
   // mini表格单元格垂直内边距
-  --tv-Grid-cell-padding-y-mini: 8px;
+  --tv-Grid-cell-padding-y-mini: 4px;
+  // small表格单元格水平内边距
+  --tv-Grid-cell-padding-x-small: 16px;
+  // small表格单元格垂直内边距
+  --tv-Grid-cell-padding-y-small: 8px;
   // -------其他-------
   // 树节点图标右侧内边距
   --tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);

packages/vue/src/base-select/index.ts

@@ -10,7 +10,6 @@
  *
  */
 import BaseSelect from './src/index'
-import '@opentiny/vue-theme/base-select/index.less'
 import { version } from './package.json'
 
 BaseSelect.model = {