variables.scss 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // Color
  2. $color-scrollList-bg: var(--semi-color-bg-3); // 滚动列表背景色
  3. $color-scrollList-border: var(--semi-color-border); // 滚动列表描边颜色
  4. $color-scrollList_header-title: var(--semi-color-text-0); // 滚动列表标题颜色
  5. $color-scrollList_item-bg: transparent; // 滚动列表选项背景色
  6. $color-scrollList_item-text: var(--semi-color-text-0); // 滚动列表选项文字颜色
  7. $color-scrollList_disabled_item-text: var(--semi-color-disabled-text); // 滚动列表选项背景色 - 禁用
  8. $color-scrollList_item-text-hover: var(--semi-color-fill-1); // 滚动列表选项文字颜色 - 悬浮
  9. $color-scrollList_item-bg-active: var(--semi-color-fill-2); // 滚动列表选项文字颜色 - 选中
  10. $color-scrollList_selected_item-bg: var(--semi-color-primary-light-default); // 滚动列表选中选项背景颜色
  11. $color-scrollList_selected_item-text: var(--semi-color-text-0); // 滚动列表选中选项文字颜色
  12. $color-scrollList_selected_item-icon: var(--semi-color-text-2); // 滚动列表选中选项图标颜色
  13. $color-scrollList_footer-border: var(--semi-color-border); // 滚动列表底部描边颜色
  14. // Width/Height
  15. $height-scrollList: 300px;
  16. $height-scrollList_item: 36px;
  17. $width-scrollList_item-border: $border-thickness-control;
  18. $width-scrollList_item_sel_svg: 16px;
  19. $width-scrollList_item_wheel-border: $border-thickness-control;
  20. $width-scrollList_item_wheel_selector-border: $border-thickness-control;
  21. $height-scrollList_line: 1px;
  22. $width-scrollList_footer-border: $border-thickness-control;
  23. // Spacing
  24. $spacing-scrollList_header-paddingY: 0;
  25. $spacing-scrollList_header-paddingX: 16px;
  26. $spacing-scrollList_header_title-paddingY: $spacing-base;
  27. $spacing-scrollList_header_title-paddingX: 0;
  28. $spacing-scrollList_body-paddingY: 0;
  29. $spacing-scrollList_body-paddingX: 16px;
  30. $spacing-scrollList_item_ul-padding: 0;
  31. $spacing-scrollList_item_ul-margin: 0;
  32. $spacing-scrollList_item_ul-paddingBottom: ($height-scrollList - $height-scrollList_item) / 2;
  33. $spacing-scrollList_item_sel_svg-marginRight: 12px;
  34. $spacing-scrollList_item_wheel_list_outer-paddingRight: $height-scrollList_item / 2;
  35. $spacing-scrollList_item_wheel_list_shade_pre-marginTop: -1 * ($height-scrollList_item / 2 + $border-thickness-control);
  36. $spacing-scrollList_item_wheel_list_shade_post-marginTop: $height-scrollList_item / 2 + $border-thickness-control;
  37. $spacing-scrollList_footer-padding: 10px;
  38. // Radius
  39. $radius-scrollList: var(--semi-border-radius-medium);
  40. // Font
  41. $font-scrollList_header_title-fontWeight: $font-weight-bold;
  42. $font-scrollList_item_wheel_item_selected-fontWeight: $font-weight-bold;
  43. // Other
  44. $shadow-scrollList: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);