fix(input-group): make sure that the input of type search does not interfere with the outline variant (#1520)

Author: desig9stein

src/components/input/themes/shared/input.material.scss

@@ -278,6 +278,24 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
+:host([outlined][type='search']) {
+    [part~='labelled'] [part~='input'] {
+        padding-top: rem(20px);
+        padding-bottom: rem(6px);
+    }
+
+    input:placeholder-shown + [part='notch'] [part='label'],
+    [part~='filled'] + [part='notch'] [part='label'] {
+        transform: translateY(-73%);
+    }
+}
+
+:host([outlined][type='search']:focus-within) {
+    [part='notch'] [part='label'] {
+        transform: translateY(-73%);
+    }
+}
+
 :host(:disabled[type='search']),
 :host([disabled][type='search']) {
     [part^='container'] {
@@ -287,7 +305,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([outlined]) {
+:host(:not([type='search'])[outlined]) {
     [part^='container'] {
         border-radius: var-get($theme, 'border-border-radius');
         background: var-get($theme, 'border-background');
@@ -314,16 +332,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
     }
 
-    [part='notch'] {
-        border: {
-            width: $idle-border-width;
-            style: solid;
-            color: var-get($theme, 'border-color');
-            left: none;
-            right: none;
-        }
-    }
-
     [part='filler'] {
         border: {
             width: $idle-border-width;
@@ -354,13 +362,26 @@ input:placeholder-shown + [part='notch'] [part='label'],
             };
         }
     }
+}
+
+:host([outlined]) {
+    [part='notch'] {
+        border: {
+            width: $idle-border-width;
+            style: solid;
+            color: var-get($theme, 'border-color');
+            left: none;
+            right: none;
+        }
+    }
 
     [part~='filled'] + [part='notch'] {
         @extend %floated-styles;
     }
 }
 
-:host([readonly][outlined]:focus-within) {
+
+:host(:not([type='search'])[readonly][outlined]:focus-within) {
     :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] [part='label'] {
             transform: translate(0);
@@ -376,7 +397,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([outlined]:focus-within) {
+:host(:not([type='search'])[outlined]:focus-within) {
     [part='label'] {
         margin-block-start: calc(#{$active-border-width} / 2);
     }
@@ -423,9 +444,9 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([outlined]:active),
-:host([outlined]:focus),
-:host([outlined]:focus-within) {
+:host(:not([type='search'])[outlined]:active),
+:host(:not([type='search'])[outlined]:focus),
+:host(:not([type='search'])[outlined]:focus-within) {
     [part='suffix'] {
         margin-inline-end: rem(-1px);
     }
@@ -442,8 +463,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([outlined][invalid]),
-:host([outlined][invalid]:focus-within) {
+:host(:not([type='search'])[outlined][invalid]),
+:host(:not([type='search'])[outlined][invalid]:focus-within) {
     [part='start'],
     [part='notch'],
     [part='filler'],
@@ -457,13 +478,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([outlined][invalid]:focus-within) {
+:host(:not([type='search'])[outlined][invalid]:focus-within) {
     [part='notch'] {
         border-top: $idle-border-width solid transparent;
     }
 }
 
-:host([readonly][outlined][invalid]:focus-within) {
+:host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
     input:not(:placeholder-shown) + [part='notch'] {
         border: {
             width: $active-border-width;
@@ -479,8 +500,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:disabled[outlined]),
-:host([disabled][outlined]) {
+:host(:not([type='search']):disabled[outlined]),
+:host(:not([type='search'])[disabled][outlined]) {
     [part='start'],
     [part='filler'],
     [part='notch'],
@@ -494,6 +515,12 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
+:host([type='search'][outlined]) {
+    [part='notch'] {
+        border: none
+    }
+}
+
 :host(:disabled),
 :host([disabled]) {
     [part~='input'],