| 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;  }}
 |