PLANET-5606 Center search buttons svg icons

greenpeace · Nov 3, 2020 · 99a6f6d · 99a6f6d
1 parent c85e347
commit 99a6f6d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/assets/src/scss/pages/search/_filter-sidebar.scss b/assets/src/scss/pages/search/_filter-sidebar.scss
@@ -144,6 +144,11 @@
       padding: 0 $n10;
       color: $white;
 
+      svg {
+        margin-right: 4px;
+        vertical-align: baseline;
+      }
+
       &:hover {
         color: $grey-80;
         cursor: pointer;

diff --git a/assets/src/scss/pages/search/_search-bar.scss b/assets/src/scss/pages/search/_search-bar.scss
@@ -25,9 +25,25 @@
     font-size: $font-size-sm;
     line-height: 2.75;
 
+    svg {
+      margin-right: 4px;
+      vertical-align: baseline;
+    }
+
+    // We need this margin exception for tablets because otherwise the button moves to 2 lines.
+    @include medium-and-up {
+      svg {
+        margin-right: 0;
+      }
+    }
+
     @include large-and-up {
       margin-top: 2px;
       line-height: 3;
+
+      svg {
+        margin-right: 4px;
+      }
     }
 
     i {