Merge pull request #1222 from greenpeace/planet-5606

PLANET-5606 Center search buttons svg icons
greenpeace · Nov 4, 2020 · 5ed59fe · 5ed59fe
2 parents ae4bb3d + 99a6f6d
commit 5ed59fe
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 {