feat(select): add ionic theme styles

core/src/components/select/select.scss → core/src/components/select/select.common.scss

@@ -1,3 +1,4 @@
+@use "../../themes/mixins" as mixins;
 @import "./select.vars";
 
 // Select
@@ -31,7 +32,6 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: #{$placeholder-opacity};
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: #{ion-color(primary, base)};
@@ -52,12 +52,9 @@
   width: 100%;
   min-height: 44px;
 
-  font-family: $font-family-base;
-
   white-space: nowrap;
 
   cursor: pointer;
-  z-index: $z-index-item-input;
 }
 
 /**
@@ -115,17 +112,13 @@
 }
 
 button {
-  @include visually-hidden();
+  @include mixins.visually-hidden();
 }
 
 // Select Icon
 // --------------------------------------------------
 
 .select-icon {
-  @include margin(0, 0, 0, $select-icon-margin-start);
-
-  position: relative;
-
   /**
    * Prevent the icon from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -143,18 +136,6 @@ 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
@@ -193,9 +174,6 @@ button {
 // --------------------------------------------------
 
 .select-wrapper {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include border-radius(var(--border-radius));
-
   display: flex;
 
   position: relative;
@@ -389,15 +367,6 @@ 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.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Select Label Placement - End
 // ----------------------------------------------------------------
 
@@ -409,27 +378,6 @@ 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 {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
-// Select Label Placement - Fixed
-// ----------------------------------------------------------------
-
-: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.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 /**
  * Label is on the left of the select in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -488,28 +436,11 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
-  @include margin(1px, 0, 0, 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 {
-  @include transform(translateY(100%), scale(1));
-}
-
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -537,19 +468,6 @@ button {
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the input.
- */
-:host(.label-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
 // Start/End Slots
 // ----------------------------------------------------------------
 
@@ -564,11 +482,9 @@ button {
 }
 
 ::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
   margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
   margin-inline-end: 0;
 }

core/src/components/select/select.ionic.outline.scss

@@ -0,0 +1,52 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Select Fill: Outline (Ionic Theme)
+// ----------------------------------------------------------------
+
+:host(.ion-color) {
+  --border-color: #{globals.current-color(base)};
+}
+
+// Select Label
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .label-text-wrapper {
+  /**
+   * The label should appear on top of an outline
+   * container that overlaps it so it is always clickable.
+   */
+  position: relative;
+}
+
+// Select Inner Wrapper
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .select-wrapper-inner {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  /**
+  * Apply the background to the native select
+  * wrapper to only style the select.
+  */
+  background: var(--background);
+}
+
+// Outline Container
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .select-outline {
+  @include globals.position(0, 0, 0, 0);
+  @include globals.border-radius(var(--border-radius));
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
+
+  box-sizing: border-box;
+}