@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781201980.1b6e8398

package/dist/collection/components/select-popover/select-popover.ionic.css

@@ -59,95 +59,100 @@
  * @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.
  */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: var(--token-space-300, var(--token-scale-300, 12px));
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: var(--token-space-300, var(--token-scale-300, 12px));
-}
-
-.select-option-description {
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
-  -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
-  padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
-  -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
-  padding-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
-  padding-top: var(--token-space-0, var(--token-scale-0, 0px));
-  padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
-  font-size: var(--token-font-size-350, 0.875rem);
-}
-
-.select-option-start,
-.select-option-end {
-  gap: var(--token-space-200, var(--token-scale-200, 8px));
-}
-
 /**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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;
+ *   }
+ * }
  */
-.select-option-start > ion-avatar,
-.select-option-start > ion-img,
-.select-option-start > ion-thumbnail,
-.select-option-start > ion-icon,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-end > ion-avatar,
-.select-option-end > ion-img,
-.select-option-end > ion-thumbnail,
-.select-option-end > ion-icon,
-.select-option-end > img,
-.select-option-end > svg {
-  width: var(--token-scale-1200, 48px);
-  height: var(--token-scale-1200, 48px);
+:host ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
+ion-list-header,
+ion-label {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 /**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
+ * The main content inside of a popover has overflow: hidden
+ * so that a descendant ion-content can be scrolled.
+ * However, select-popover does not use ion-content so we need
+ * to explicitly make this container scrollable.
  */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
+:host {
+  overflow-y: auto;
 }
 
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
+.select-option-label {
   display: flex;
   align-items: center;
 }
 
-.select-option-start,
-.select-option-end {
+.select-option-label-text {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
 }
 
 .select-option-description {
@@ -155,33 +160,121 @@
 }
 
 /**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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;
+ *   }
+ * }
  */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
 :host ion-list {
   margin-left: 0;
   margin-right: 0;
@@ -207,46 +300,200 @@ ion-label {
   overflow-y: auto;
 }
 
-ion-item {
-  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
-  --background-focused: transparent;
-  --background-focused-opacity: 1;
-  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
-  --background-hover-opacity: 1;
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
-  --background-activated-opacity: 1;
+.select-option-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-label-text {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.select-option-description {
+  display: block;
 }
 
-ion-item.ion-focused.item-checkbox-checked,
-ion-item.ion-focused.item-radio-checked {
-  --background-focused: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
-  --background-focused-opacity: 1;
+.select-option-label {
+  gap: 12px;
 }
 
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
 ion-list ion-radio::part(container) {
   display: none;
 }
 
 ion-list ion-radio::part(label) {
-  -webkit-margin-start: var(--token-space-0, var(--token-scale-0, 0px));
-  margin-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
-  -webkit-margin-end: var(--token-space-0, var(--token-scale-0, 0px));
-  margin-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
-  margin-top: var(--token-space-0, var(--token-scale-0, 0px));
-  margin-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-}
-
-ion-list ion-radio::part(label),
-ion-list ion-checkbox::part(label) {
-  font-size: var(--token-font-size-400, 1rem);
-  font-weight: var(--token-font-weight-medium, 500);
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ion-item {
+  --inner-border-width: 0;
+}
+
+.item-radio-checked {
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-focused-opacity: 0.2;
+  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover-opacity: 0.12;
+}
+
+.item-checkbox-checked {
+  --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
+  --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
+  --color: var(--ion-color-primary, #0054e9);
+}
+
+.select-option-label {
+  gap: var(--token-space-300, var(--token-scale-300, 12px));
+}
+
+.select-option-description {
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0%);
   line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
-}
-
-.item-radio-checked,
-.item-checkbox-checked {
-  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  font-size: var(--token-font-size-350, 0.875rem);
 }