| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 | 
							- @import '../style/var';
 
- .van-calendar {
 
-   display: flex;
 
-   flex-direction: column;
 
-   height: 100%;
 
-   background-color: @calendar-background-color;
 
-   &__popup {
 
-     &.van-popup--top,
 
-     &.van-popup--bottom {
 
-       height: @calendar-popup-height;
 
-     }
 
-     &.van-popup--left,
 
-     &.van-popup--right {
 
-       height: 100%;
 
-     }
 
-     .van-popup__close-icon {
 
-       top: 11px;
 
-     }
 
-   }
 
-   &__header {
 
-     flex-shrink: 0;
 
-     box-shadow: @calendar-header-box-shadow;
 
-   }
 
-   &__month-title,
 
-   &__header-title,
 
-   &__header-subtitle {
 
-     height: @calendar-header-title-height;
 
-     font-weight: @font-weight-bold;
 
-     line-height: @calendar-header-title-height;
 
-     text-align: center;
 
-   }
 
-   &__header-title {
 
-     font-size: @calendar-header-title-font-size;
 
-   }
 
-   &__header-subtitle {
 
-     font-size: @calendar-header-subtitle-font-size;
 
-   }
 
-   &__month-title {
 
-     font-size: @calendar-month-title-font-size;
 
-   }
 
-   &__weekdays {
 
-     display: flex;
 
-   }
 
-   &__weekday {
 
-     flex: 1;
 
-     font-size: @calendar-weekdays-font-size;
 
-     line-height: @calendar-weekdays-height;
 
-     text-align: center;
 
-   }
 
-   &__body {
 
-     flex: 1;
 
-     overflow: auto;
 
-     -webkit-overflow-scrolling: touch;
 
-   }
 
-   &__days {
 
-     position: relative;
 
-     display: flex;
 
-     flex-wrap: wrap;
 
-     user-select: none;
 
-   }
 
-   &__month-mark {
 
-     position: absolute;
 
-     top: 50%;
 
-     left: 50%;
 
-     z-index: 0;
 
-     color: @calendar-month-mark-color;
 
-     font-size: @calendar-month-mark-font-size;
 
-     transform: translate(-50%, -50%);
 
-     pointer-events: none;
 
-   }
 
-   &__day,
 
-   &__selected-day {
 
-     display: flex;
 
-     align-items: center;
 
-     justify-content: center;
 
-     text-align: center;
 
-   }
 
-   &__day {
 
-     position: relative;
 
-     width: 14.285%;
 
-     height: @calendar-day-height;
 
-     font-size: @calendar-day-font-size;
 
-     cursor: pointer;
 
-     &--end,
 
-     &--start,
 
-     &--start-end,
 
-     &--multiple-middle,
 
-     &--multiple-selected {
 
-       color: @calendar-range-edge-color;
 
-       background-color: @calendar-range-edge-background-color;
 
-     }
 
-     &--start {
 
-       border-radius: @border-radius-md 0 0 @border-radius-md;
 
-     }
 
-     &--end {
 
-       border-radius: 0 @border-radius-md @border-radius-md 0;
 
-     }
 
-     &--start-end,
 
-     &--multiple-selected {
 
-       border-radius: @border-radius-md;
 
-     }
 
-     &--middle {
 
-       color: @calendar-range-middle-color;
 
-       &::after {
 
-         position: absolute;
 
-         top: 0;
 
-         right: 0;
 
-         bottom: 0;
 
-         left: 0;
 
-         background-color: currentColor;
 
-         opacity: @calendar-range-middle-background-opacity;
 
-         content: '';
 
-       }
 
-     }
 
-     &--disabled {
 
-       color: @calendar-day-disabled-color;
 
-       cursor: default;
 
-     }
 
-   }
 
-   &__top-info,
 
-   &__bottom-info {
 
-     position: absolute;
 
-     right: 0;
 
-     left: 0;
 
-     font-size: @calendar-info-font-size;
 
-     line-height: @calendar-info-line-height;
 
-     @media (max-width: 350px) {
 
-       font-size: 9px;
 
-     }
 
-   }
 
-   &__top-info {
 
-     top: 6px;
 
-   }
 
-   &__bottom-info {
 
-     bottom: 6px;
 
-   }
 
-   &__selected-day {
 
-     width: @calendar-selected-day-size;
 
-     height: @calendar-selected-day-size;
 
-     color: @calendar-selected-day-color;
 
-     background-color: @calendar-selected-day-background-color;
 
-     border-radius: @border-radius-md;
 
-   }
 
-   &__footer {
 
-     flex-shrink: 0;
 
-     padding: 0 @padding-md;
 
-     padding-bottom: constant(safe-area-inset-bottom);
 
-     padding-bottom: env(safe-area-inset-bottom);
 
-     &--unfit {
 
-       padding-bottom: 0;
 
-     }
 
-   }
 
-   &__confirm {
 
-     height: @calendar-confirm-button-height;
 
-     margin: @calendar-confirm-button-margin;
 
-   }
 
- }
 
 
  |