@ionic/core 8.4.1-dev.11732561669.1ff93af7 → 8.4.1-dev.11732646949.1aaebad5

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

@@ -1,9 +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
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * 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 {
   /**
    * @prop --background: Background of the select
@@ -109,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);
@@ -125,8 +98,10 @@
   position: relative;
   width: 100%;
   min-height: 44px;
+  font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
+  z-index: 2;
 }
 
 /**
@@ -175,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
@@ -209,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
@@ -235,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;
@@ -392,6 +392,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.
@@ -400,6 +414,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.
@@ -452,10 +494,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
@@ -483,132 +544,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);
-}
-
-: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.
  */
@@ -621,20 +556,25 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+::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
@@ -690,12 +630,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