Updated design system components.

1 files changed, 32 insertions, 7 deletions

diff --git a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
index 44a14ef..169dc02 100644
--- a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
+++ b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
@@ -47,16 +47,31 @@
 }
 .searchbox-advanced-search-button {
   position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  padding: 0 1rem;
+  right: .25em;
+  top: .5em;
+  bottom: .5em;
+  padding: 0 .5rem;
+  border-radius: 50%;
+  &:focus,
+  &:hover,
+  &:active {
+    background-color: $pm-global-altgrey;
+  }
   & > .searchbox-advanced-search-icon {
     fill: var(--fillcolor-icons, $white);
   }
 }
 
-@include respond-to($breakpoint-small) { 
+.searchbox-container--reset-advanced {
+  .searchbox-field[type="search"] {
+    padding-right: 6.25rem;
+  }
+  [type="reset"].searchbox-advanced-search-button {
+    right: 2.75rem;
+  }
+}
+
+@include respond-to($breakpoint-small) {
   .searchbox-advanced-search-button {
     position: static;
   }
@@ -64,7 +79,7 @@
 
 @if $rtl-option == true {
   [dir="rtl"] {
-    .searchbox-field[type="search"] { 
+    .searchbox-field[type="search"] {
       padding-right: calc(2em + 2rem);
       padding-left: 4rem;
       background-image: none;
@@ -81,5 +96,15 @@
       right: auto;
       left: 0;
     }
+    .searchbox-container--reset-advanced {
+      .searchbox-field[type="search"] {
+        padding-right: calc(2em + 2rem);
+        padding-left: 6rem;
+      }
+      .searchbox-advanced-search-button {
+        right: auto;
+        left: 2.5rem;
+      }
+    }
   }
-}
\ No newline at end of file
+}