blaze/scss/components.calendars.scss

@import "mixins/settings.global";
@import "mixins/objects.grid";
@import "mixins/components.buttons";

.c-calendar {
  @include grid;
  @include grid--wrap;
  @include grid--center;
  @include grid__cell--no-gutter;
  max-width: $calendar-max-width;
  padding: $calendar-padding;
  border: $calendar-border;
  border-radius: $calendar-border-radius;
  background-color: $calendar-background-color;
  text-align: $calendar-text-align;
  z-index: $z-over-control;
}

.c-calendar__control,
.c-calendar__date {
  @include button-color($calendar-control-background-color, $calendar-control-color);
  display: inline;
  flex: 0 0 14.28%;
  max-width: 14.28%;
  margin: 0;
  padding: $calendar-control-padding;
  border: $calendar-control-border-width $calendar-control-border-style transparent;
  border-radius: $calendar-control-border-radius;
  outline: 0;
  font-size: $calendar-control-font-size;
  cursor: pointer;
  user-select: none;
}

.c-calendar__header {
  @include grid__cell;
  @include grid__cell--no-gutter;
  @include grid__cell--width(70%);
  padding: $calendar-header-padding;
}

.c-calendar__day {
  @include grid__cell;
  @include grid__cell--no-gutter;
  flex: 0 0 14.28%;
  max-width: 14.28%;
  padding: $calendar-day-padding;
  font-weight: $calendar-day-font-weight;
}

.c-calendar__date {
  &:hover {
    border: $calendar-control-border-hover;
  }
}

.c-calendar__date--in-month {
  color: $calendar-control-date-in-month-color;
}

.c-calendar__date--today {
  border-color: $calendar-today-border-color;
}

.c-calendar__date--selected,
.c-calendar__date--selected:hover {
  @include button-color($calendar-control-selected-background-color, $calendar-control-selected-color);
  border-color: $calendar-control-selected-border-color;
}