3208639e95ce18145ebf688b1af153ea35b725a5987f89dbbad9ecb60298da5be52e715763fd38b5b449c96dcb1b9388f590457a3c5b34d6946d6d09d71e5a 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. @import "../common/var";
  2. @import "../mixins/mixins";
  3. @include b(date-table) {
  4. font-size: 12px;
  5. user-select: none;
  6. @include when(week-mode) {
  7. .el-date-table__row {
  8. &:hover {
  9. div {
  10. background-color: $--datepicker-inrange-background-color;
  11. }
  12. td.available:hover {
  13. color: $--datepicker-font-color;
  14. }
  15. td:first-child div {
  16. margin-left: 5px;
  17. border-top-left-radius: 15px;
  18. border-bottom-left-radius: 15px;
  19. }
  20. td:last-child div {
  21. margin-right: 5px;
  22. border-top-right-radius: 15px;
  23. border-bottom-right-radius: 15px;
  24. }
  25. }
  26. &.current div {
  27. background-color: $--datepicker-inrange-background-color;
  28. }
  29. }
  30. }
  31. td {
  32. width: 32px;
  33. height: 30px;
  34. padding: 4px 0;
  35. box-sizing: border-box;
  36. text-align: center;
  37. cursor: pointer;
  38. position: relative;
  39. & div {
  40. height: 30px;
  41. padding: 3px 0;
  42. box-sizing: border-box;
  43. }
  44. & span {
  45. width: 24px;
  46. height: 24px;
  47. display: block;
  48. margin: 0 auto;
  49. line-height: 24px;
  50. position: absolute;
  51. left: 50%;
  52. transform: translateX(-50%);
  53. border-radius: 50%;
  54. }
  55. &.next-month,
  56. &.prev-month {
  57. color: $--datepicker-off-font-color;
  58. }
  59. &.today {
  60. position: relative;
  61. span {
  62. color: $--color-primary;
  63. font-weight: bold;
  64. }
  65. &.start-date span,
  66. &.end-date span {
  67. color: $--color-white;
  68. }
  69. }
  70. &.available:hover {
  71. color: $--datepicker-hover-font-color;
  72. }
  73. &.in-range div {
  74. background-color: $--datepicker-inrange-background-color;
  75. &:hover {
  76. background-color: $--datepicker-inrange-hover-background-color;
  77. }
  78. }
  79. &.current:not(.disabled) span {
  80. color: $--color-white;
  81. background-color: $--datepicker-active-color;
  82. }
  83. &.start-date div,
  84. &.end-date div {
  85. color: $--color-white;
  86. }
  87. &.start-date span,
  88. &.end-date span {
  89. background-color: $--datepicker-active-color;
  90. }
  91. &.start-date div {
  92. margin-left: 5px;
  93. border-top-left-radius: 15px;
  94. border-bottom-left-radius: 15px;
  95. }
  96. &.end-date div {
  97. margin-right: 5px;
  98. border-top-right-radius: 15px;
  99. border-bottom-right-radius: 15px;
  100. }
  101. &.disabled div {
  102. background-color: $--background-color-base;
  103. opacity: 1;
  104. cursor: not-allowed;
  105. color: $--color-text-placeholder;
  106. }
  107. &.selected div {
  108. margin-left: 5px;
  109. margin-right: 5px;
  110. background-color: $--datepicker-inrange-background-color;
  111. border-radius: 15px;
  112. &:hover {
  113. background-color: $--datepicker-inrange-hover-background-color;
  114. }
  115. }
  116. &.selected span {
  117. background-color: $--datepicker-active-color;
  118. color: $--color-white;
  119. border-radius: 15px;
  120. }
  121. &.week {
  122. font-size: 80%;
  123. color: $--datepicker-header-font-color;
  124. }
  125. }
  126. th {
  127. padding: 5px;
  128. color: $--datepicker-header-font-color;
  129. font-weight: 400;
  130. border-bottom: solid 1px $--border-color-lighter;
  131. }
  132. }