From e282058e23ed2d3c77cb10a8ea33f58ff52cacf6 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Tue, 31 Oct 2023 20:27:25 -0400
Subject: [PATCH] Input: allow label size overrides

Input: allow label size overrides
---
 core/src/components/input/input.md.outline.scss   | 6 ++++++
 core/src/components/select/select.md.outline.scss | 9 +++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 4a1abfbbdc..4828386cca 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -66,15 +66,20 @@
 
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
+  @include transform(translateY(-50%), scale(1));
   @include transform-origin(start, top);
 
   position: absolute;
+  top: 50%;
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
   max-width: calc(100% - var(--padding-start) - var(--padding-end));
+
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    top 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /**
@@ -94,6 +99,7 @@
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
   @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
+  top: 0;
 
   /**
    * Label text should not extend
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 746750780c..8414b30771 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -79,17 +79,18 @@
 
 :host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,
 :host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
+  @include transform(translateY(-50%), scale(1));
   position: absolute;
   top: 50%;
-  @include transform(translateY(-50%), scale(1));
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    top 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   /**
    * Label text should not extend
    * beyond the bounds of the select.
    */
   max-width: calc(100% - var(--padding-start) - var(--padding-end));
+
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    top 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /**
@@ -110,9 +111,9 @@
 :host(.ion-focused.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
 :host(.has-value.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
 :host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper {
-  top: 0;
   @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
+  top: 0;
 
   /**
    * Label text should not extend