index.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. @import '../style/var';
  2. .van-calendar {
  3. display: flex;
  4. flex-direction: column;
  5. height: 100%;
  6. background-color: @calendar-background-color;
  7. &__popup {
  8. &.van-popup--top,
  9. &.van-popup--bottom {
  10. height: @calendar-popup-height;
  11. }
  12. &.van-popup--left,
  13. &.van-popup--right {
  14. height: 100%;
  15. }
  16. .van-popup__close-icon {
  17. top: 11px;
  18. }
  19. }
  20. &__header {
  21. flex-shrink: 0;
  22. box-shadow: @calendar-header-box-shadow;
  23. }
  24. &__month-title,
  25. &__header-title,
  26. &__header-subtitle {
  27. height: @calendar-header-title-height;
  28. font-weight: @font-weight-bold;
  29. line-height: @calendar-header-title-height;
  30. text-align: center;
  31. }
  32. &__header-title {
  33. font-size: @calendar-header-title-font-size;
  34. }
  35. &__header-subtitle {
  36. font-size: @calendar-header-subtitle-font-size;
  37. }
  38. &__month-title {
  39. font-size: @calendar-month-title-font-size;
  40. }
  41. &__weekdays {
  42. display: flex;
  43. }
  44. &__weekday {
  45. flex: 1;
  46. font-size: @calendar-weekdays-font-size;
  47. line-height: @calendar-weekdays-height;
  48. text-align: center;
  49. }
  50. &__body {
  51. flex: 1;
  52. overflow: auto;
  53. -webkit-overflow-scrolling: touch;
  54. }
  55. &__days {
  56. position: relative;
  57. display: flex;
  58. flex-wrap: wrap;
  59. user-select: none;
  60. }
  61. &__month-mark {
  62. position: absolute;
  63. top: 50%;
  64. left: 50%;
  65. z-index: 0;
  66. color: @calendar-month-mark-color;
  67. font-size: @calendar-month-mark-font-size;
  68. transform: translate(-50%, -50%);
  69. pointer-events: none;
  70. }
  71. &__day,
  72. &__selected-day {
  73. display: flex;
  74. align-items: center;
  75. justify-content: center;
  76. text-align: center;
  77. }
  78. &__day {
  79. position: relative;
  80. width: 14.285%;
  81. height: @calendar-day-height;
  82. font-size: @calendar-day-font-size;
  83. cursor: pointer;
  84. &--end,
  85. &--start,
  86. &--start-end,
  87. &--multiple-middle,
  88. &--multiple-selected {
  89. color: @calendar-range-edge-color;
  90. background-color: @calendar-range-edge-background-color;
  91. }
  92. &--start {
  93. border-radius: @border-radius-md 0 0 @border-radius-md;
  94. }
  95. &--end {
  96. border-radius: 0 @border-radius-md @border-radius-md 0;
  97. }
  98. &--start-end,
  99. &--multiple-selected {
  100. border-radius: @border-radius-md;
  101. }
  102. &--middle {
  103. color: @calendar-range-middle-color;
  104. &::after {
  105. position: absolute;
  106. top: 0;
  107. right: 0;
  108. bottom: 0;
  109. left: 0;
  110. background-color: currentColor;
  111. opacity: @calendar-range-middle-background-opacity;
  112. content: '';
  113. }
  114. }
  115. &--disabled {
  116. color: @calendar-day-disabled-color;
  117. cursor: default;
  118. }
  119. }
  120. &__top-info,
  121. &__bottom-info {
  122. position: absolute;
  123. right: 0;
  124. left: 0;
  125. font-size: @calendar-info-font-size;
  126. line-height: @calendar-info-line-height;
  127. @media (max-width: 350px) {
  128. font-size: 9px;
  129. }
  130. }
  131. &__top-info {
  132. top: 6px;
  133. }
  134. &__bottom-info {
  135. bottom: 6px;
  136. }
  137. &__selected-day {
  138. width: @calendar-selected-day-size;
  139. height: @calendar-selected-day-size;
  140. color: @calendar-selected-day-color;
  141. background-color: @calendar-selected-day-background-color;
  142. border-radius: @border-radius-md;
  143. }
  144. &__footer {
  145. flex-shrink: 0;
  146. padding: 0 @padding-md;
  147. padding-bottom: constant(safe-area-inset-bottom);
  148. padding-bottom: env(safe-area-inset-bottom);
  149. &--unfit {
  150. padding-bottom: 0;
  151. }
  152. }
  153. &__confirm {
  154. height: @calendar-confirm-button-height;
  155. margin: @calendar-confirm-button-margin;
  156. }
  157. }