@ionic/core/dist/collection/components/picker-column-option/picker-column-option.md.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;
 *   }
 * }
 */
.picker-column-option-button {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: 34px;
  border: 0px;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: var(--ion-font-family, inherit);
  font-size: inherit;
  line-height: 34px;
  text-align: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

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

:host(.option-disabled) .picker-column-option-button {
  cursor: default;
}

/**
 * The active option is colored when either:
 * - picker-column applies the `option-active` class (standalone ion-picker,
 *   where the column lives in the light DOM), or
 * - datetime sets `part="... active"` on the option. This is the reliable
 *   value-based source of truth and keeps the option colored when the column
 *   lives inside datetime's shadow DOM, where the class can be missed
 *   (WebKit's elementsFromPoint is unreliable in a shadow root).
 *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
 *   no longer supported.
 */
:host(.option-active),
:host([part~=active]) {
  color: var(--ion-color-primary, #0054e9);
}

:host(.ion-color.option-active),
:host(.ion-color[part~=active]) {
  color: var(--ion-color-base);
}