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