variables.scss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. // Color
  2. $color-calendar-bg-active: var(--semi-color-primary); // 今日标识颜色
  3. $color-calendar-bg: var(--semi-color-bg-2); // 日历背景颜色
  4. $color-calendar-text-active: var(--semi-color-bg-1); // 日历文字颜色 - 今日
  5. $color-calendar_curr-bg: var(--semi-color-danger); // 当前时间标识线颜色
  6. $color-calendar_curr-border: var(--semi-color-danger); // 当前时间标识线颜色
  7. $color-calendar_currCircle-bg-default: var(--semi-color-danger); // 当前时间标识原点颜色
  8. $color-calendar_date-text-default: var(--semi-color-text-0); // 日历文字颜色 - 当月
  9. $color-calendar_day-border: var(--semi-color-border); // 日历描边颜色
  10. $color-calendar_day-text-default: var(--semi-color-text-2); // 日历文字颜色 - 非当月
  11. $color-calendar_sticky-bg: var(--semi-color-bg-2); // 日历背景颜色 - 吸顶部分
  12. $color-calendar_weekend-bg: var(--semi-color-fill-0); // 日历背景颜色 - 非工作日
  13. // Width/Height
  14. $width-calendar_day: 70px;
  15. $width-calendar_day-minWidth: 70px;
  16. $height-calendar_day_grid: 60px;
  17. $width-calendar_day_grid: 130px;
  18. $width-calendar_day_grid-minWidth: 130px;
  19. $height-calendar_time_grid: $height-calendar_day_grid / 2;
  20. $height-calendar_allDay: 26px;
  21. $height-calendar_allDay-minHeight: 26px;
  22. $width-calendar_currCircle: 8px;
  23. $width-calendar_tag_col: 70px;
  24. $width-calendar_tag_col-minWidth: 70px;
  25. $height-calendar_day_allDay: 26px;
  26. $height-calendar_month: 100%;
  27. $height-calendar_month_day: 24px;
  28. $height-calendar_month_week_skeletion: 100%;
  29. $height-calendar_month_grid_wrapper: calc(100% - 27px);
  30. $width-calendar_card: 220px;
  31. $height-calendar_day_gridTime: $height-calendar_day_grid / 2;
  32. $width-calendar_today_date: 24px;
  33. $height-calendar_today_date: 24px;
  34. $height-calendar_body_li: 24px;
  35. $height-calendar_day_scroll_wrapper: calc(100% - 28px);
  36. $height-calendar_week_scroll_wrapper: calc(100% - 55px);
  37. $height-calendar_month_skeletion_li: 100%;
  38. $height-calendar_month_grid_col: 100%;
  39. $height-calendar_month_week_row_event_month: 1em;
  40. $width-calendar-border-default: 1px;
  41. $width-calendar-border-thick: 1px;
  42. // Spacing
  43. $spacing-calendar_ul_li-padding: 0;
  44. $spacing-calendar_ul_li-margin: 0;
  45. $spacing-calendar_sticky_top-top: 0;
  46. $spacing-calendar_sticky_top-right: 0;
  47. $spacing-calendar_sticky_top-left: 0;
  48. $spacing-calendar_sticky_left-left: 0;
  49. $spacing-calendar_event_day-left: 0;
  50. $spacing-calendar_event_day-right: 0;
  51. $spacing-calendar_custom_container-top: 0;
  52. $spacing-calendar_custom_container-right: 0;
  53. $spacing-calendar_custom_container-bottom: 0;
  54. $spacing-calendar_custom_container-left: 0;
  55. $spacing-calendar_currCircle-marginTop: -4px;
  56. $spacing-calendar_currLine-left: 0;
  57. $spacing-calendar_currLine-right: 0;
  58. $spacing-calendar_allDay_tag-paddingRight: 8px;
  59. $spacing-calendar_allDay_content-paddingLeft: 0;
  60. $spacing-calendar_month_event_card_wrapper-paddingTop: 2px;
  61. $spacing-calendar_grid_row_span_child-paddingY: 0;
  62. $spacing-calendar_grid_row_span_child-paddingX: 4px;
  63. $spacing-calendar_skeleton_li_child-paddingTop: 4px;
  64. $spacing-calendar_month_event_card_close-marginRight: -4px;
  65. $spacing-calendar_header_info_date-marginTop: 4px;
  66. $spacing-calendar_time-paddingRight: 8px;
  67. $spacing-calendar_time_item_span-top: -10px;
  68. $spacing-calendar_tag_child-paddingRight: 8px;
  69. $spacing-calendar_skeletion_grid_row_li-paddingRight: 8px;
  70. $spacing-calendar_month_event_card_wrapper-right: 8px;
  71. $spacing-calendar_month_event_card_content-paddingY: 12px;
  72. $spacing-calendar_month_event_card_content-paddingX: 0;
  73. $spacing-calendar_month_event_card_ul_li-margin: 0;
  74. $spacing-calendar_month_event_card_ul_li-padding: 0;
  75. $spacing-calendar_header-marginY: 12px;
  76. $spacing-calendar_header-marginX: 20px;
  77. $spacing-calendar_body-padingY: 0;
  78. $spacing-calendar_body-padingX: 16px;
  79. $spacing-calendar_event_items-top: 31px;
  80. $spacing-calendar_event_items-right: 0;
  81. $spacing-calendar_event_items-bottom: 20px;
  82. $spacing-calendar_event_items-left: 0;
  83. $spacing-calendar_month_skeletion-left: 0;
  84. $spacing-calendar_month_skeletion-right: 0;
  85. $spacing-calendar_month_date-right: 4px;
  86. // Radius
  87. $radius-calendar_currCircle: var(--semi-border-radius-circle); // 日历选中日期标识圆角
  88. $radius-calendar_today_date: var(--semi-border-radius-circle); // 日历选中日期标识圆角
  89. // Font
  90. $font-calendar_allDay_tag-lineHeight: $height-calendar_allDay; // 日历全天标识文字行高
  91. $font-calendar_today_date-lineHeight: 24px;
  92. $font-calendar_day_allDay-lineHeight: 26px;
  93. $font-calendar_day_allDay-fontSize: 26px;
  94. $font-calendar_month_day-fontSize: 24px;
  95. // Other
  96. $z-calendar_stickyTop: 20;
  97. $z-calendar_item: 5;
  98. $z-calendar_stickyLeft: 10;
  99. $z-calendar_curr: 8;
  100. $z-calendar_line: 3;