Merge pull request #122 from rakyi/responsive-searchbar

Make search bar more responsive

src/components/_custom/searchbar/_searchbar.scss

@@ -3,6 +3,7 @@
 @import "../../../helpers/all";
 @import "../_partials/gradient-background";
 
+$icon-search: url("../../../assets/images/icon-search-white.svg");
 
 @include govuk-exports("sdn/component/searchbar") {
   // todo replace colors from global variables
@@ -15,8 +16,13 @@
   }
 
   .sdn-searchbar {
-    padding-top: 52px;
-    padding-bottom: 35px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+
+    @include govuk-media-query($from: tablet) {
+      padding-top: 52px;
+      padding-bottom: 35px;
+    }
   }
 
   .sdn-searchbar__item {
@@ -41,7 +47,6 @@
   }
 
   .sdn-searchbar-block__item {
-
     display: flex;
     align-items: center;
 
@@ -53,7 +58,21 @@
 
   .sdn-searchbar-block__item--stretched {
     align-items: stretch;
+  }
 
+  .sdn-searchbar-button {
+    @include govuk-media-query($until: tablet) {
+      padding: 20px;
+      background-image: $icon-search;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 50%;
+    }
   }
 
+  .sdn-searchbar-button--text {
+    @include govuk-media-query($until: tablet) {
+      display: none;
+    }
+  }
 }

src/components/_custom/searchbar/template.njk

@@ -5,7 +5,9 @@
                 <input class="govuk-input" type="search" placeholder="{{ params.placeholder | default('Vyhľadať životnú situáciu') }}">
             </div>
             <div class="sdn-searchbar-block__item sdn-searchbar-block__item--stretched">
-                <button class="govuk-button govuk-button--large">{{ params.buttonText | default('Hľadat') }}</button>
+                <button class="govuk-button govuk-button--large sdn-searchbar-button">
+                    <span class="sdn-searchbar-button--text">{{ params.buttonText | default('Hľadat') }}</span>
+                </button>
             </div>
         </div>
     </div>