variables.scss 6.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. // Spacing
  2. $spacing-table-paddingY: $spacing-base; // 表格单元格垂直内边距
  3. $spacing-table-paddingX: $spacing-base-tight; // 表格单元格水平内边距
  4. $spacing-table_middle-paddingY: $spacing-base-tight; // 中尺寸表格单元格垂直内边距
  5. $spacing-table_small-paddingY: $spacing-tight; // 小尺寸表格单元格垂直内边距
  6. $spacing-table_th-paddingTop: $spacing-tight; // 表格顶部内边距
  7. $spacing-table_th-paddingBottom: $spacing-tight; // 表格底部内边距
  8. $spacing-table_title-paddingY: $spacing-base; // 表格标题垂直内边距
  9. $spacing-table_title-paddingX: 0; // 表格标题水平内边距
  10. $spacing-table_footer-padding: $spacing-base; // 表格 footer 内边距
  11. $spacing-table_expand_row-paddingLeft: 16px; // 表格展开行左侧内边距
  12. $spacing-table_expand_row-paddingRight: 16px; // 表格展开行右侧内边距
  13. $spacing-table_expand_row-paddingTop: 16px; // 表格展开行顶部内边距
  14. $spacing-table_expand_row-paddingBottom: 16px; // 表格展开行底部内边距
  15. $spacing-table_resizable-offset-y: 4px; // 可拖动拉伸操作垂直偏移量
  16. $spacing-table_resizable-bottom: 4px; // 可拖动拉伸操作底部距离
  17. $spacing-table_row_head-paddingY: $spacing-tight; // 表头垂直内边距
  18. $spacing-table_row_head-paddingX: $spacing-base; // 表头水平内边距
  19. $spacing-table_react_resizable_handle-right: -1px; // 可拖动拉伸操作向右偏移量
  20. $spacing-table_tbody_rowCell-padding: $spacing-base; // 表格单元格内边距
  21. $spacing-table_tbody_rowSelection_rowCell_notSelection-paddingX: 16px; // 可选中的表格单元水平内边距
  22. $spacing-table_tbody_rowSelection_rowCell_notSelection-paddingY: 10px; // 可选中的表格单元垂直内边距
  23. $spacing-table_column_sorter-marginLeft: $spacing-extra-tight; // 列排序按钮左侧外边距
  24. $spacing-table_column_filter-marginLeft: $spacing-extra-tight; // 列过滤器按钮左侧外边距
  25. $spacing-table_bordered_titler-paddingLeft: $spacing-base; // 列过滤器按钮左侧外边距
  26. $spacing-table_bordered_titler-paddingRight: $spacing-base; // 列过滤器按钮右侧外边距
  27. $spacing-table_expand_icon-marginRight: 8px; // 行展开按钮右侧外边距
  28. $spacing-table_panel_operation-paddingX: $spacing-base;
  29. $spacing-table_panel_operation-paddingY: $spacing-tight;
  30. // Size
  31. $width-table_base_border: 1px; // 表格单元格分割线宽度
  32. $width-table_header_border: 2px; // 表格表头分割线宽度
  33. $width-table_resizer_border: 2px; // 表格拉伸列标示线宽度
  34. $radius-table_base: 4px;
  35. $width-table_column_selection: 48px; // 表格默认列宽
  36. $width-table_column_sorter-icon: 16px; // 表格排序按钮宽度
  37. $height-table_column_sorter-icon: 16px; // 表格排序按钮高度
  38. $width-table_column_filter-icon: 12px; // 表格过滤按钮宽度
  39. $height-table_column_filter-icon: 12px; // 表格过滤按钮高度
  40. $width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边宽度
  41. $width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
  42. $width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度
  43. $height-table_pagination_outer_min: 60px; // 表格分页器高度
  44. // Color no need to change
  45. $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
  46. $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
  47. $color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
  48. $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
  49. $color-table-border-default: var(--semi-color-border); // 表格描边颜色
  50. $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
  51. $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
  52. $color-table_th-bg-default: transparent; // 表头背景色
  53. $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
  54. $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
  55. $color-table_pl-bg-default: transparent;
  56. $color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
  57. $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
  58. $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
  59. $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
  60. $color-table_expanded_icon-default: var(--semi-color-text-2); // 表格展开行图标颜色 - 默认
  61. $color-table_expanded-bg-default: transparent; // 表格展开行图标容器背景颜色 - 默认
  62. $color-table_disabled-bg-default: var(--semi-color-disabled-bg);
  63. $color-table_filter_on-text-default: var(--semi-color-primary); // 表格过滤按钮颜色 - 激活态
  64. $color-table_filter-text-default: var(--semi-color-text-2); // 表格过滤按钮颜色 - 默认态
  65. $color-table_sorter_on-text-default: var(--semi-color-primary); // 表格排序按钮颜色 - 激活态
  66. $color-table_sorter-text-default: var(--semi-color-text-2); // 表格排序按钮颜色 - 默认态
  67. $color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮颜色 - 悬浮态
  68. $color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
  69. $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
  70. $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
  71. $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
  72. // Other
  73. $font-table_base-fontSize: 14px; // 表格默认文本字号
  74. $border-table_base-borderStyle: solid; // 表格描边样式
  75. $shadow-table_left: -3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 左侧
  76. $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 右侧
  77. $border-table: $width-table_base_border $border-table_base-borderStyle $color-table-border-default; // 表格默认描边
  78. $border-table_head-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default; // 表头单元格描边 - 底部
  79. $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
  80. $z-table-fixed: 101!default; // fixed列的zIndex值
  81. $z-table_fixed_column: $z-table-fixed; // fixed列的zIndex值