ionic-framework/core/src/components/datetime/datetime.md.scss

@import "./datetime.scss";
@import "./datetime.md.vars.scss";
@import "../../themes/ionic.globals.md";

:host {
  --background: var(--ion-color-step-100, #ffffff);
  --range-background: #{current-color(base, 0.1)};
  --title-color: #{current-color(contrast)};
}

// Header
// -----------------------------------
:host .datetime-header {
  @include padding(
    $datetime-md-header-padding,
    $datetime-md-header-padding,
    $datetime-md-header-padding,
    $datetime-md-header-padding
  );

  background: current-color(base);
  color: var(--title-color);
}

:host .datetime-header .datetime-title {
  font-size: $datetime-md-title-font-size;

  text-transform: uppercase;
}

:host .datetime-header .datetime-selected-date {
  @include margin(30px, null, null, null);

  font-size: $datetime-md-selected-date-font-size;
}

// Calendar / Header / Action Buttons
// -----------------------------------

:host .calendar-action-buttons ion-button {
  --color: #{$text-color-step-350};
}

.calendar-month-year-toggle {
  @include padding(12px, 16px, 12px, #{$datetime-md-header-padding});

  min-height: 48px;

  background: transparent;

  color: #{$text-color-step-350};

  z-index: 1;

  &.ion-focused::after {
    opacity: 0.04;
  }
}

.calendar-month-year-toggle ion-ripple-effect {
  color: currentColor;
}

@media (any-hover: hover) {
  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover {
    &::after {
      background: currentColor;

      opacity: 0.04;
    }
  }
}

// Calendar / Header / Days of Week
// -----------------------------------
:host .calendar-days-of-week {
  @include padding(0px, 10px, 0px, 10px);

  color: $text-color-step-500;

  font-size: $datetime-md-calendar-item-font-size;

  line-height: 36px;
}

// Calendar / Body
// -----------------------------------
:host .calendar-body .calendar-month .calendar-month-grid {
  @include padding(4px, 10px);

  /**
   * Calendar on MD will show an empty row
   * if not enough dates to fill 6th row.
   * Calendar on iOS fits all dates into
   * a fixed number of rows and resizes
   * if necessary.
   */
  grid-template-rows: repeat(6, 1fr);
}

// Individual day button in month
:host .calendar-day {
  width: $datetime-md-day-width;
  min-width: $datetime-md-day-width;

  height: $datetime-md-day-height;

  font-size: $datetime-md-calendar-item-font-size;
}

/**
 * Day that today but not selected
 * should have ion-color for text color.
 */
:host .calendar-day.calendar-day-today {
  border: 1px solid current-color(base);

  color: current-color(base);
}

/**
 * Day that is not today but
 * is selected should have ion-color for
 * text color and be bolder.
 */
:host .calendar-day.calendar-day-active {
  color: current-color(contrast);
}

.calendar-day.calendar-day-active {
  border: 1px solid current-color(base);

  background: current-color(base);
}

// Time / Header
// -----------------------------------
:host .datetime-time {
  @include padding($datetime-md-padding * 0.5, $datetime-md-padding, $datetime-md-padding * 0.5, $datetime-md-padding);
}

:host .time-header {
  color: #{$text-color-step-350};
}

// Month and Year
// -----------------------------------

/**
 * Add some margin when only selecting month/year
 * otherwise layout will too constricted.
 */
:host(.datetime-presentation-month) .datetime-year,
:host(.datetime-presentation-year) .datetime-year,
:host(.datetime-presentation-month-year) .datetime-year {
  @include margin(20px, null, 20px, null);
}

// Footer
// -----------------------------------
:host .datetime-buttons {
  @include padding(10px, 10px, 10px, 10px);

  display: flex;

  align-items: center;

  justify-content: flex-end;
}

// Range Selection
// -----------------------------------

.calendar-day-in-range.calendar-day-wrapper:not(.calendar-day-wrapper-padding) {
  position: relative;

  &:not(.calendar-day-range-start):not(.calendar-day-range-end) {
    background: var(--range-background);
  }

  &.calendar-day-range-start .calendar-day,
  &.calendar-day-range-end .calendar-day {
    z-index: 1;
  }

  &.calendar-day-range-start:not(.calendar-day-range-end)::after,
  &.calendar-day-range-end:not(.calendar-day-range-start)::before {
    position: absolute;

    width: 50%;
    height: 100%;

    background: var(--range-background);

    content: " ";
  }

  &.calendar-day-range-start::after {
    @include position(null, 0, null, null);
  }

  &.calendar-day-range-end::before {
    @include position(null, null, null, 0);
  }
}