f78866fed25ff0bb65d75b224a65b2484bb838a139590fd084344d0423caa19653ee9c7163eb6631d1bd48bc46e97d722d8d07e3504c3920240c3c189499d0 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @use '../mixins/mixins' as *;
  2. @use '../common/var' as *;
  3. @include b(month-table) {
  4. font-size: 12px;
  5. margin: -1px;
  6. border-collapse: collapse;
  7. td {
  8. width: 68px;
  9. text-align: center;
  10. padding: 8px 0;
  11. cursor: pointer;
  12. position: relative;
  13. @include b(date-table-cell) {
  14. height: 48px;
  15. padding: 6px 0;
  16. box-sizing: border-box;
  17. }
  18. &.today {
  19. .#{$namespace}-date-table-cell__text {
  20. color: getCssVar('color-primary');
  21. font-weight: bold;
  22. }
  23. &.start-date .#{$namespace}-date-table-cell__text,
  24. &.end-date .#{$namespace}-date-table-cell__text {
  25. color: $color-white;
  26. }
  27. }
  28. &.disabled .#{$namespace}-date-table-cell__text {
  29. background-color: getCssVar('fill-color', 'light');
  30. cursor: not-allowed;
  31. color: getCssVar('text-color', 'placeholder');
  32. &:hover {
  33. color: getCssVar('text-color', 'placeholder');
  34. }
  35. }
  36. @include b(date-table-cell__text) {
  37. width: 54px;
  38. height: 36px;
  39. display: block;
  40. line-height: 36px;
  41. color: getCssVar('datepicker-text-color');
  42. margin: 0 auto;
  43. border-radius: 18px;
  44. position: absolute;
  45. left: 50%;
  46. transform: translateX(-50%);
  47. &:hover {
  48. color: getCssVar('datepicker-hover-text-color');
  49. }
  50. }
  51. &.in-range .#{$namespace}-date-table-cell {
  52. background-color: getCssVar('datepicker-inrange-bg-color');
  53. &:hover {
  54. background-color: getCssVar('datepicker-inrange-hover-bg-color');
  55. }
  56. }
  57. &.start-date .#{$namespace}-date-table-cell,
  58. &.end-date .#{$namespace}-date-table-cell {
  59. color: $color-white;
  60. }
  61. &.start-date .#{$namespace}-date-table-cell__text,
  62. &.end-date .#{$namespace}-date-table-cell__text {
  63. color: $color-white;
  64. background-color: getCssVar('datepicker-active-color');
  65. }
  66. &.start-date .#{$namespace}-date-table-cell {
  67. margin-left: 3px;
  68. border-top-left-radius: 24px;
  69. border-bottom-left-radius: 24px;
  70. }
  71. &.end-date .#{$namespace}-date-table-cell {
  72. margin-right: 3px;
  73. border-top-right-radius: 24px;
  74. border-bottom-right-radius: 24px;
  75. }
  76. &.current:not(.disabled) .#{$namespace}-date-table-cell {
  77. border-radius: 24px;
  78. margin-left: 3px;
  79. margin-right: 3px;
  80. }
  81. &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
  82. color: $color-white;
  83. background-color: getCssVar('datepicker-active-color');
  84. }
  85. &:focus-visible {
  86. outline: none;
  87. .#{$namespace}-date-table-cell__text {
  88. outline: 2px solid getCssVar('datepicker-active-color');
  89. outline-offset: 1px;
  90. }
  91. }
  92. }
  93. }