zarm/lib/calendar/style/index.css

基于 React 的移动端UI库

.za-calendar {
  --background: var(--za-calendar-background, #fff);
  --padding-horizontal: var(--za-calendar-padding-horizontal, var(--za-padding-h-md));
  --padding-vertical: var(--za-calendar-padding-vertical, 10px);
  --header-height: var(--za-calendar-header-height, var(--za-height-md));
  --week-height: var(--za-calendar-week-height, 40px);
  --week-font-size: var(--za-calendar-week-font-size, 13px);
  --week-font-weight: var(--za-calendar-week-font-weight, 500);
  --week-background: var(--za-calendar-week-background, #f2f2f2);
  --week-text-color: var(--za-calendar-week-text-color, var(--za-color-text-caption));
  --month-font-size: var(--za-calendar-month-font-size, 17px);
  --month-font-weight: var(--za-calendar-month-font-weight, 500);
  --month-height: var(--za-calendar-month-height, 50px);
  --month-scroll-background: var(--za-calendar-month-scroll-background, #fff);
  --day-height: var(--za-calendar-day-height, 30px);
  --day-width: var(--za-calendar-day-width, 30px);
  --day-font-size: var(--za-calendar-day-font-size, 16px);
  --day-text-color: var(--za-calendar-day-text-color, var(--za-color-text));
  --day-today-background: var(--za-calendar-day-today-background, var(--za-theme-primary-lighter));
  --day-today-text-color: var(--za-calendar-day-today-text-color, var(--za-theme-primary));
  --day-selected-background: var(--za-calendar-day-selected-background, var(--za-theme-primary));
  --day-selected-border-radius: var(--za-calendar-day-selected-border-radius, 50%);
  --day-margin-vertical: var(--za-calendar-day-margin-vertical, 10px);
  --day-selected-text-color: var(--za-calendar-day-selected-text-color, #fff);
  --day-selected-shadow: var(--za-calendar-day-selected-shadow, 0 2px 5px 0 var(--za-theme-primary-lighter));
  --day-range-background: var(--za-calendar-day-range-background, var(--za-theme-primary-lighter));
  --day-range-text-color: var(--za-calendar-day-range-text-color, var(--za-theme-primary));
  --action-btn-disabled: var(--za-calendar-action-btn-disabled, var(--za-color-text-disabled));
  background: var(--background);
  user-select: none;
  position: relative;
}
.za-calendar ul {
  list-style-type: disc;
}
.za-calendar li {
  display: inline-block;
  width: 14.2857142857%;
  text-align: center;
  vertical-align: middle;
}
.za-calendar .za-picker-view {
  position: absolute;
  top: var(--header-height);
  z-index: 10;
}
.za-calendar__week {
  display: flex;
  flex-wrap: wrap;
  height: var(--week-height);
  line-height: var(--week-height);
  color: var(--week-text-color);
  background: var(--week-background);
  font-size: var(--week-font-size);
  font-weight: var(--week-font-weight);
  margin: 0;
  padding: 0 var(--padding-horizontal);
}

.za-calendar__header {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--padding-horizontal);
  height: var(--header-height);
  align-items: center;
}

.za-calendar__action {
  display: flex;
}
.za-calendar__action .za-calendar__action-btn--disabled {
  color: var(--action-btn-disabled);
}

.za-calendar__title--animate .za-icon {
  transform: rotate(90deg);
  transition: all 0.15s ease-in-out;
}

.za-calendar__body {
  padding: var(--padding-vertical) 0;
  overflow: auto;
}

.za-calendar__scroll-month {
  display: none;
  position: absolute;
  top: var(--week-height);
  width: 100%;
  height: var(--month-height);
  line-height: var(--month-height);
  text-align: center;
  transition: opacity 300ms ease-in-out;
  background-image: linear-gradient(var(--month-scroll-background), transparent);
  font-weight: var(--month-font-weight);
  font-size: var(--month-font-size);
}
.za-calendar__scroll-month--entering, .za-calendar__scroll-month--entered {
  display: block;
  opacity: 1;
}

.za-calendar__scroll-month--exiting {
  display: block;
  opacity: 0;
}

.za-calendar__month__wrapper {
  padding: 0 var(--padding-horizontal);
  flex-shrink: 0;
  width: 100%;
}
.za-calendar__month__wrapper ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.za-calendar__month {
  height: var(--month-height);
  line-height: var(--month-height);
  padding: 0 var(--padding-horizontal);
  font-size: var(--month-font-size);
  font-weight: var(--month-font-weight);
}

.za-calendar__day {
  margin: var(--day-margin-vertical) 0;
  position: relative;
  font-size: var(--day-font-size);
  color: var(--day-text-color);
  cursor: pointer;
}
.za-calendar__day__content {
  width: var(--day-width);
  height: var(--day-height);
  background-color: transparent;
  border-radius: var(--day-selected-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.za-calendar__day--today .za-calendar__day__content {
  background: var(--day-today-background);
  color: var(--day-today-text-color);
}

.za-calendar__day--selected .za-calendar__day__content {
  background: var(--day-selected-background);
  color: var(--day-selected-text-color);
  box-shadow: var(--day-selected-shadow);
}

.za-calendar__day--disabled {
  cursor: auto;
}
.za-calendar__day--disabled .za-calendar__day__content {
  color: var(--za-color-text-disabled);
}

.za-calendar__day--range {
  background: var(--day-range-background);
  color: var(--day-range-text-color);
}
.za-calendar__day--range .za-calendar__day__content {
  background: var(--day-range-background);
}

.za-calendar__day--range:first-child {
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}
.za-calendar__day--range:last-child {
  background-color: transparent;
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--d6 {
  background-color: transparent;
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--d7 {
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--start {
  background-color: transparent;
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--end {
  background-color: transparent;
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--last, .za-calendar__day--first {
  background-image: none;
}