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

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

:host {
  --background: var(--ion-color-light, #ffffff);
  --background-rgb: var(--ion-color-light-rgb);
  --title-color: #{$text-color-step-400};
}

:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),
:host(.datetime-presentation-date:not(.datetime-prefer-wheel)) {
  min-height: 350px;
}

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

  border-bottom: $datetime-ios-border-color;
  
  font-size: 14px;
}

:host .datetime-header .datetime-title {
  color: var(--title-color);
}

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

// Calendar / Header / Action Buttons
// -----------------------------------
:host .calendar-action-buttons ion-item {
  --padding-start: #{$datetime-ios-padding};
  --background-hover: transparent;
  --background-activated: transparent;

  font-size: 16px;
  font-weight: 600;
}

:host .calendar-action-buttons ion-item ion-icon,
:host .calendar-action-buttons ion-buttons ion-button {
  color: current-color(base);
}

:host .calendar-action-buttons ion-buttons {
  @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
}

:host .calendar-action-buttons ion-buttons ion-button {
  @include margin(0, 0, 0, 0);
}

// Calendar / Header / Days of Week
// -----------------------------------
:host .calendar-days-of-week {
  @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);

  color: $text-color-step-700;

  font-size: 12px;

  font-weight: 600;

  line-height: 24px;

  text-transform: uppercase;
}

// Calendar / Body
// -----------------------------------
:host .calendar-body .calendar-month .calendar-month-grid {

  /**
   * We need to apply the padding to
   * each month grid item otherwise
   * older versions of WebKit will consider
   * this padding a snapping point if applied
   * on .calendar-month
   */
  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);

  height: calc(100% - #{$datetime-ios-padding});
}

:host .calendar-day {
  font-size: 20px;
}

:host .calendar-day:after {
  opacity: 0.2;
}

:host .calendar-day:focus:after {
  background: current-color(base);
}

/**
 * Day that today but not selected
 * should have ion-color for text color.
 */
:host .calendar-day.calendar-day-today {
  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(base);

  font-weight: 600;
}

:host .calendar-day.calendar-day-active:after {
  background: current-color(base);
}

/**
 * Day that is selected and is today
 * should have white color.
 */
:host .calendar-day.calendar-day-today.calendar-day-active {
  color: current-color(contrast);
}

:host .calendar-day.calendar-day-today.calendar-day-active:after {
  background: current-color(base);

  opacity: 1;
}

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

  font-size: 16px;
}

:host .datetime-time .time-header {
  font-weight: 600;
}

// Footer
// -----------------------------------
:host .datetime-buttons {
  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);

  border-top: $datetime-ios-border-color;
}

:host .datetime-buttons ::slotted(ion-buttons),
:host .datetime-buttons ion-buttons {
  display: flex;

  align-items: center;
  justify-content: space-between;
}

:host .datetime-action-buttons {
  width: 100%;
}