@ionic/core 8.5.2-dev.11743424594.169340bf → 8.5.2-dev.11743531350.19e040aa

package/dist/collection/components/select/select.ios.css

@@ -1,92 +1,3 @@
-/**
- * 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;
- *   }
- * }
- */
-/**
- * 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
@@ -170,6 +81,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -186,8 +98,20 @@
   position: relative;
   width: 100%;
   min-height: 44px;
+  font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
+  z-index: 2;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -226,23 +150,30 @@
 button {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
 .select-icon {
+  -webkit-margin-start: 4px;
+  margin-inline-start: 4px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: relative;
   /**
    * Prevent the icon from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -260,6 +191,17 @@ button {
   color: inherit;
 }
 
+/**
+ * The select icon should be centered with
+ * the entire container not just the control
+ * with floating/stacked labels.
+ */
+:host(.select-label-placement-stacked) .select-icon,
+:host(.select-label-placement-floating) .select-icon {
+  position: absolute;
+  height: 100%;
+}
+
 /**
  * This positions the icon at the correct
  * edge of the component with LTR and RTL
@@ -286,6 +228,13 @@ button {
 }
 
 .select-wrapper {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
   display: flex;
   position: relative;
   flex-grow: 1;
@@ -321,6 +270,17 @@ button {
   overflow: hidden;
 }
 
+:host(.select-label-placement-stacked) .select-wrapper-inner,
+:host(.select-label-placement-floating) .select-wrapper-inner {
+  /**
+   * When using a stacked/floating label, the inner wrapper is
+   * stacked vertically under the label container. This line
+   * ensures that the inner wrapper fills all the remaining height
+   * of the component.
+   */
+  flex-grow: 1;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -340,9 +300,21 @@ button {
 }
 
 .select-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text select.
+   */
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: 5px;
+  padding-bottom: 0;
   display: flex;
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
+  font-size: 0.75rem;
   white-space: normal;
 }
 
@@ -373,6 +345,7 @@ button {
 
 .select-bottom .helper-text {
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .select-bottom .error-text {
@@ -476,6 +449,20 @@ button {
   flex-direction: row;
 }
 
+:host(.select-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Label is on the right of the select in LTR and
  * on the left in RTL.
@@ -484,6 +471,34 @@ button {
   flex-direction: row-reverse;
 }
 
+/**
+ * The margin between the label and
+ * the select should be on the start
+ * when the label sits at the end.
+ */
+:host(.select-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Label is on the left of the select in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -536,10 +551,29 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1px;
+  margin-bottom: 0;
   flex-grow: 1;
   width: 100%;
 }
 
+/**
+ * This makes the label sit over the select
+ * when the select is blurred and has no value.
+ * The label should not sit over the select if the
+ * select has a placeholder.
+ * Note: This is different from what ion-input does
+ * because the activating the select causes an overlay
+ * to appear. This makes it hard to read the placeholder.
+ * With ion-input, the input just focuses and the placeholder
+ * is still easy to read.
+ */
+:host(.select-label-placement-floating) .label-text-wrapper {
+  transform: translateY(100%) scale(1);
+}
+
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -567,151 +601,6 @@ button {
   opacity: 1;
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
-  /**
-   * Prevent the slots from shrinking when the label and/or
-   * selected item text is long enough to fill the rest of
-   * the container.
-   */
-  flex-shrink: 0;
-}
-
-::slotted([slot=start]:last-of-type) {
-  margin-inline-start: 0;
-}
-
-::slotted([slot=end]:first-of-type) {
-  margin-inline-end: 0;
-}
-
-:host {
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-.select-icon {
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: relative;
-}
-
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-  height: 100%;
-}
-
-.select-wrapper {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  border-radius: var(--border-radius);
-}
-
-.select-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the text select.
-   */
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: 5px;
-  padding-bottom: 0;
-  font-size: 0.75rem;
-}
-
-.select-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-}
-
-:host(.select-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * The margin between the label and
- * the select should be on the start
- * when the label sits at the end.
- */
-:host(.select-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * Ensures the select does not
- * overlap the label.
- * Also ensure that the native wrapper
- * takes up the remaining available height and width.
- */
-:host(.select-label-placement-stacked) .native-wrapper,
-:host(.select-label-placement-floating) .native-wrapper {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
-/**
- * This makes the label sit over the select
- * when the select is blurred and has no value.
- * The label should not sit over the select if the
- * select has a placeholder.
- * Note: This is different from what ion-input does
- * because the activating the select causes an overlay
- * to appear. This makes it hard to read the placeholder.
- * With ion-input, the input just focuses and the placeholder
- * is still easy to read.
- */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  transform: translateY(100%) scale(1);
-}
-
 /**
  * This makes the label sit above the input.
  */
@@ -724,41 +613,25 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
-}
-
-/**
- * When using a stacked/floating label, the inner wrapper is
- * stacked vertically under the label container. This line
- * ensures that the inner wrapper fills all the remaining height
- * of the component.
- */
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  flex-grow: 1;
+::slotted([slot=start]), ::slotted([slot=end]) {
+  /**
+   * Prevent the slots from shrinking when the label and/or
+   * selected item text is long enough to fill the rest of
+   * the container.
+   */
+  flex-shrink: 0;
 }
 
 ::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
-/**
- * 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
@@ -814,12 +687,6 @@ button {
  *   }
  * }
  */
-/**
- * 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