Merge branch 'feature/ISTWCMS-6024-m26lebla-header-search-bar-regressions' into '1.0.x'

ISTWCMS-6024: css fix for Header search bar regressions

See merge request !71

src/patterns/04-components/search/search--wcms-headerbar/_search--wcms-headerbar.scss

@@ -65,6 +65,10 @@
 
     .form-item {
       margin: inherit;
+      opacity: 0;
+      @media(min-width: $screen-md) {
+        opacity: 1;
+      }
     }
 
     .form-type-select {
@@ -148,7 +152,7 @@
       &:focus {
         &::after {
           @include svg-background(search_2-white);
-          background-color: gesso-grayscale(gray-6);
+          background-color: var(--gray-6);
           color: var(--uw-white);
         }
       }
@@ -200,11 +204,9 @@
       background-color: var(--uw-black);
       border: 1px solid var(--uw-white);
       border-radius: 0;
-      border-width: 1px 0 1px 1px;
-      border-width: 0;
       box-shadow: none;
       color: var(--uw-white);
-      display: none;
+      display: block;
       font-family: var(--font-systemmedium);
       font-size: var(--font-size-0);
       font-weight: 200;
@@ -215,9 +217,10 @@
       position: relative;
       transition: all 0.3s ease;
       @media(min-width: $screen-md) {
+        border-width: 0;
         display: block;
         font-size: var(--font-size-000);
-        width: 4rem;
+        width: var(--size-8);
       }
 
       &::placeholder {
@@ -260,20 +263,30 @@
       appearance: none;
       background-color: var(--uw-black);
       border-radius: 0;
-      display: block;
+      color: var(--uw-white);
+      display: inline-block;
       font-family: var(--font-systemmedium);
-      font-size: var(--font-size-0);
+      font-size: var(--font-size-000);
+      height: 2.25rem;
+      opacity: 1;
+      outline: none;
+      padding-left: var(--size-1); // LTR
+      padding-right: 0;
 
+      &:hover,
+      &:focus {
+        background-color: var(--uw-white);
+        border-width: 0;
+        color: var(--uw-black);
+      }
       @media(min-width: $screen-md) {
-        font-size: var(--font-size-000);
+        opacity: 0;
+        overflow: hidden;
+        padding: 0;
+        transition: opacity 0.5s ease;
+        width: 0;
       }
-      opacity: 0;
-      overflow: hidden;
-      padding-right: 0;
-      transition: opacity 0.5s ease;
-      width: 7.5rem;
     }
-
     .form-actions {
       height: 2.25rem;
       margin: 0;
@@ -285,7 +298,6 @@
       transition: opacity 0.5s ease;
       width: 2.125rem;
     }
-
     .uw-input {
       &.uw-input--checkboxform {
         display: block;
@@ -316,6 +328,7 @@
           ~ .form-item {
             animation: fadeIn 500ms;
             display: block;
+            opacity: 1;
             .no-js & {
               background-color: var(--uw-black);
               padding: var(--size-2);
@@ -329,10 +342,9 @@
 
             &.form-type-textfield {
               display: block;
-
               .uw-input--search {
                 border: var(--size-xs) solid var(--uw-white);
-                display: inline-block;
+                display: inline-block !important;
                 width: 100%;
               }
             }