variables.scss 8.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. // Color
  2. $color-upload-text: var(--semi-color-text-0); // 上传文件卡片等默认文本颜色
  3. $color-upload_assist-text: var(--semi-color-text-2); // 上传辅助文本颜色
  4. $color-upload-border: var(--semi-color-border); // 上传描边颜色
  5. $color-upload_card-bg-hover: var(--semi-color-fill-1); // 上传文件卡片背景色 - 悬浮
  6. $color-upload_card-bg: var(--semi-color-fill-0); // 上传文件卡片背景色 - 默认
  7. $color-upload_card_fail-bg-hover: var(--semi-color-danger-light-hover); // 上传失败文件卡片背景色 - 悬浮
  8. $color-upload_card_fail-bg: var(--semi-color-danger-light-default); // 上传失败文件卡片背景色 - 默认
  9. $color-upload_clear-text: var(--semi-color-primary); // 上传清空按钮文本颜色
  10. $color-upload_drag_area-bg-hover: var(--semi-color-primary-light-default); // 上传可拖拽区域背景颜色 - 悬浮
  11. $color-upload_drag_area-border-hover: var(--semi-color-primary); // 上传可拖拽区域描边颜色 - 悬浮
  12. $color-upload_drag_area_disabled-text: var(--semi-color-disabled-text); // 上传可拖拽区域禁用文本颜色
  13. $color-upload_drag_area-bg: var(--semi-color-tertiary-light-default); // 上传可拖拽区域背景颜色 - 默认
  14. $color-upload_drag_area_icon: var(--semi-color-primary); // 上传可拖拽区域图标颜色
  15. $color-upload_drag_area_tips-text: var(--semi-color-primary); // 上传可拖拽区域背景颜色 - 悬浮
  16. $color-upload_drag_area_main-text-default: var(--semi-color-text-0); // 上传可拖拽区主要提示文本颜色 - 默认
  17. $color-upload_drag_area_main-text-hover: var(--semi-color-text-0); // 上传可拖拽区主要提示文本颜色 - 悬浮
  18. $color-upload_drag_area_main-text-active: var(--semi-color-text-0); // 上传可拖拽区主要提示文本颜色 - 按下
  19. $color-upload_drag_area_sub-text-default: var(--semi-color-text-0); // 上传可拖拽区次要提示文本颜色 - 默认
  20. $color-upload_drag_area_sub-text-hover: var(--semi-color-text-0); // 上传可拖拽区次要提示文本颜色 - 悬浮
  21. $color-upload_drag_area_sub-text-active: var(--semi-color-text-0); // 上传可拖拽区次要提示文本颜色 - 按下
  22. $color-upload_file_card_fail_info-text: var(--semi-color-danger); // 上传文件卡片失败提示信息文本颜色
  23. $color-upload_file_card_preview_placeholder-bg: rgba(var(--semi-grey-3), 1); // 文件卡片默认预览背景颜色
  24. $color-upload_file_card_preview_placeholder-text: rgba(var(--semi-white), 1); // 文件卡片默认预览图颜色
  25. $color-upload_file_card_retry-bg: var(--semi-color-white); // 重新上传按钮背景颜色
  26. $color-upload_file_card_retry-text: var(--semi-color-primary); // 重新上传按钮文本颜色
  27. $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号颜色
  28. $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
  29. $color-upload_pic_add-bg-hover: var(--semi-color-fill-1); // 图片墙上传背景色 - 悬浮
  30. $color-upload_pic_add-bg: var(--semi-color-fill-0); // 图片墙上传背景色 - 默认
  31. $color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移除图标颜色
  32. $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
  33. $color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
  34. $color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息(序号)文字颜色
  35. $color-upload_picture_file_card_close-icon: var(--semi-color-white); // 图片墙关闭图标颜色
  36. $color-upload_picture_file_card_hover-bg: var(--semi-color-overlay-bg); // 图片墙预览悬浮背景色
  37. $color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
  38. $color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
  39. $color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色
  40. // Width/Height
  41. $height-upload_file_card: 52px; // 上传文件卡片高度
  42. $width-upload_file_card: 250px; // 上传文件卡片宽度
  43. $height-upload_file_pic_card: 96px; // 图片墙上传卡片高度
  44. $width-upload_file_pic_card: 96px; // 图片墙上传卡片宽度
  45. $width-upload_file_card_preview: 36px; // 文件卡片预览图标宽度
  46. $height-upload_file_card_preview: 36px; // 文件卡片预览图标高度
  47. $width-upload_file_card_preview_img: 36px; // 文件卡片预览图片宽度
  48. $width-upload_file_card_info_name: 106px; // 文件卡片信息名称
  49. $width-upload_file_card-icon: 11px; // 文件卡片图标宽度
  50. $width-upload_picture_add-border: 2px; // 文件卡片图标宽度
  51. $width-upload_picture_file_card_img: 96px; // 图片墙上传卡片宽度
  52. $width-upload_picture_file_card_close: 16px; // 图片墙上传卡片删除annual宽度
  53. $width-upload_file_card_retry: 24px; // 重新上传按钮宽度
  54. $width-upload_file_card_retry-icon: 13px; // 重新上传按钮图标宽度
  55. $height-upload_file_card_retry-icon: 14px; // 重新上传按钮图标高度
  56. $width-upload_picture_file_card_loading-icon: 14px; // 上传加载 spin 宽度
  57. $width-upload_drag_area-border: 2px; // 可拖拽上传描边宽度
  58. // Spacing
  59. $spacing-upload_title_choosen-marginRight: $spacing-tight; // 已选择文件标题右侧外边距
  60. $spacing-upload_title-marginBottom: $spacing-extra-tight; // 文件列表标题底部外边距
  61. $spacing-upload_file_card_preview-margin: $spacing-tight; // 上传文件卡片预览外边距
  62. $spacing-upload_file_card_info_size-marginLeft: $spacing-tight; // 上传文件卡片文件大小文本左侧外边距
  63. $spacing-upload_file_card_info_retry-marginLeft: $spacing-tight; // 上传文件卡片重新上传按钮左侧外边距
  64. $spacing-upload_file_card_info_progress-marginTop: 4px; // 上传文件卡片进度顶部外边距
  65. $spacing-upload_file_card_close-marginLeft: $spacing-tight; // 上传文件卡片删除按钮左侧外边距
  66. $spacing-upload_file_card_close-marginRight: $spacing-tight; // 上传文件卡片删除按钮右侧外边距
  67. $spacing-upload_file_card_icon-marginRight: $spacing-super-tight; // 上传文件卡片图标右侧外边距
  68. $spacing-upload_picture_file_card-gap: $spacing-tight; // 图片墙卡片之间边距
  69. $spacing-upload_picture_file_card-marginBottom: $spacing-tight; // 图片墙上传卡片底部外边距
  70. $spacing-upload_picture_file_card_close-top: 8px; // 图片墙上传卡片删除按钮顶部位置
  71. $spacing-upload_picture_file_card_close-right: 8px; // 图片墙上传卡片删除右侧位置
  72. $spacing-upload_picture_file_card_loading_error-bottom: 6px; // 图片墙上传卡片加载中图标底部位置
  73. $spacing-upload_picture_file_card_loading_error-right: 6px; // 图片墙上传卡片报错图标底部位置
  74. $spacing-upload_picture_file_card_icon_error-top: -1px; // 图片墙上传卡片加载中图标顶部位置
  75. $spacing-upload_drag_area-padding: $spacing-base-tight; // 可拖拽上传拖拽区域内边距
  76. $spacing-upload_drag_area_main_text-marginBottom: $spacing-extra-tight; // 可拖拽上传拖拽标题底部外边距
  77. // Radius
  78. $radius-upload_file_card: var(--semi-border-radius-medium); // 上传文件卡片圆角
  79. $radius-upload_file_card_preview: var(--semi-border-radius-small); // 上传文件卡片预览图圆角
  80. $radius-upload_picture_add: var(--semi-border-radius-small); // 图片墙上传文件添加按钮圆角
  81. $radius-upload_picture_file_card_img: var(--semi-border-radius-small); // 图片墙上传卡片圆角
  82. $radius-upload_picture_file_card_close: var(--semi-border-radius-circle); // 图片墙上传卡片删除按钮圆角
  83. $radius-upload_file_card_retry: var(--semi-border-radius-circle); // 上传文件卡片重新上传圆角
  84. $radius-upload_drag_area: var(--semi-border-radius-small); // 可拖拽上传拖拽区域圆角
  85. // Font
  86. $font-upload_file_card_info_name-fontWeight: $font-weight-bold; // 上传文件卡片文件名字重
  87. $font-upload_file_card_info_size-fontWeight: $font-weight-regular; // 上传文件卡片文件尺寸字重
  88. $font-upload_drag_area_tips-fontWeight: 600; // 可拖拽上传提示文本字重
  89. $font-upload_picture_file_card_pic_info-fontSize: 12px; // 图片墙图片信息字体大小
  90. $font-upload_picture_file_card_pic_info-fontWeight: 600; // 图片墙图片信息文本字重