calendar.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @include b(calendar) {
  5. @include set-component-css-var('calendar', $calendar);
  6. background-color: getCssVar('fill-color', 'blank');
  7. @include e(header) {
  8. display: flex;
  9. justify-content: space-between;
  10. padding: 12px 20px;
  11. border-bottom: getCssVar('calendar', 'header-border-bottom');
  12. }
  13. @include e(title) {
  14. color: getCssVar('text-color');
  15. align-self: center;
  16. }
  17. @include e(body) {
  18. padding: 12px 20px 35px;
  19. }
  20. }
  21. @include b(calendar-table) {
  22. table-layout: fixed;
  23. width: 100%;
  24. thead th {
  25. padding: 12px 0;
  26. color: getCssVar('text-color', 'regular');
  27. font-weight: normal;
  28. }
  29. &:not(.is-range) {
  30. td.prev,
  31. td.next {
  32. color: getCssVar('text-color', 'placeholder');
  33. }
  34. }
  35. td {
  36. border-bottom: getCssVar('calendar', 'border');
  37. border-right: getCssVar('calendar', 'border');
  38. vertical-align: top;
  39. transition: background-color getCssVar('transition-duration', 'fast') ease;
  40. @include when(selected) {
  41. background-color: getCssVar('calendar', 'selected-bg-color');
  42. }
  43. @include when(today) {
  44. color: getCssVar('color-primary');
  45. }
  46. }
  47. tr:first-child td {
  48. border-top: getCssVar('calendar', 'border');
  49. }
  50. tr td:first-child {
  51. border-left: getCssVar('calendar', 'border');
  52. }
  53. tr.#{$namespace}-calendar-table__row--hide-border td {
  54. border-top: none;
  55. }
  56. @include b(calendar-day) {
  57. box-sizing: border-box;
  58. padding: 8px;
  59. height: getCssVar('calendar', 'cell-width');
  60. &:hover {
  61. cursor: pointer;
  62. background-color: getCssVar('calendar', 'selected-bg-color');
  63. }
  64. }
  65. }