fix(search): add styles for custom search buttons (#3247)

carbon-design-system · Jul 2, 2019 · 96f13e2 · 96f13e2
1 parent 70051f3
commit 96f13e2
Showing 1 changed file with 46 additions and 26 deletions.
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
@@ -114,6 +114,40 @@
   .#{$prefix}--search-close {
     @include button-reset(false);
     @include focus-outline('reset');
+    position: absolute;
+    right: 0;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: rem(1px);
+      height: calc(100% - 2px);
+      width: 2px;
+      background-color: $field-01;
+      transition: background-color $duration--fast-02
+        motion(standard, productive);
+    }
+
+    &:hover {
+      border-bottom: 1px solid $ui-04;
+    }
+  }
+
+  .#{$prefix}--search-button {
+    flex-shrink: 0;
+    margin-left: $carbon--spacing-01;
+    background-color: $field-01;
+
+    svg {
+      vertical-align: middle;
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--search-close,
+  .#{$prefix}--search-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -124,17 +158,14 @@
     cursor: pointer;
     visibility: visible;
     opacity: 1;
-    position: absolute;
     height: rem(40px);
     width: rem(40px);
-    right: 0;
     fill: $icon-01;
     border: 1px solid transparent;
     border-left: 0;
 
     &:hover {
       background-color: $hover-field;
-      border-bottom: 1px solid $ui-04;
     }
 
     &:focus {
@@ -145,19 +176,6 @@
       @include focus-outline('outline');
       background-color: $selected-ui;
     }
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 0;
-      top: rem(1px);
-      height: calc(100% - 2px);
-      width: 2px;
-      background-color: $field-01;
-      transition: background-color $duration--fast-02
-        motion(standard, productive);
-    }
   }
 
   .#{$prefix}--search-close:hover {
@@ -177,18 +195,20 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--search--sm .#{$prefix}--search-close {
-    height: rem(32px);
-    width: rem(32px);
-  }
-
-  .#{$prefix}--search--xl .#{$prefix}--search-close {
-    height: rem(48px);
-    width: rem(48px);
+  .#{$prefix}--search--sm {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button {
+      height: rem(32px);
+      width: rem(32px);
+    }
   }
 
-  .#{$prefix}--search-close:focus {
-    @include focus-outline('outline');
+  .#{$prefix}--search--xl {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button {
+      height: rem(48px);
+      width: rem(48px);
+    }
   }
 
   .#{$prefix}--search-close--hidden {