@ionic/core/dist/collection/components/datetime-button/datetime-button.ios.css

Base components for Ionic

/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
:host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

:host button {
  border-radius: 8px;
  -webkit-margin-start: 2px;
  margin-inline-start: 2px;
  -webkit-margin-end: 2px;
  margin-inline-end: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  transition: 150ms color ease-in-out;
  border: none;
  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
  color: var(--ion-text-color, #000);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
}

:host(.time-active) #time-button,
:host(.date-active) #date-button {
  color: var(--ion-color-base);
}

:host(.datetime-button-disabled) {
  pointer-events: none;
}

:host(.datetime-button-disabled) button {
  opacity: 0.4;
}

:host button {
  -webkit-padding-start: 13px;
  padding-inline-start: 13px;
  -webkit-padding-end: 13px;
  padding-inline-end: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
}

:host button.ion-activated {
  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
}