initial commit

components/SearchHeader.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="container wrapper">
     <form class="search-container" @submit.prevent="search" >
-      <div class="categorias-wrapper">
-        <select v-model="selectedCategory" class="categorias">
-          <option selected value="">Todas las categorías</option>
-          <option
-            v-for="(category, key) in categories"
-            :key="key"
-            :value="category"
-          >
-            {{ category }}
-          </option>
-        </select>
-      </div>
       <input
         id="searchbox"
         v-model="searchText"
@@ -153,7 +141,6 @@ export default {
 
 <style lang="scss" scoped>
 .wrapper {
-  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -165,13 +152,13 @@ export default {
 .search-container {
   background-color: $color-light;
   height: 60px;
-  border-radius: 40px;
-  overflow: hidden;
+  max-width: 490px;
+  border-radius: 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin: 15px 0 50px;
+  margin-top: 48px;
   -webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
   box-shadow: 0px 0px 20px 0px #d1d1d1;
   @include mobile {
@@ -201,36 +188,37 @@ export default {
   }
 }
 
-.categorias-wrapper {
-  height: 100%;
-  background: linear-gradient(90deg, #1aceb8, #0bbfba);
-  padding: 0.4em 0.5em 0.4em 1.2em;
+// .categorias-wrapper {
+//   height: 100%;
+//   background: linear-gradient(90deg, #1aceb8, #0bbfba);
+//   padding: 0.4em 0.5em 0.4em 1.2em;
 
-  @include mobile {
-    display: none;
-  }
-}
+//   @include mobile {
+//     display: none;
+//   }
+// }
 
-.categorias {
-  cursor: pointer;
-  outline: none;
-  background: transparent;
-  color: $color-light;
-  height: 100%;
-  width: 18rem;
-  -moz-appearance: none;
-  text-align: center;
+// .categorias {
+//   cursor: pointer;
+//   outline: none;
+//   background: transparent;
+//   color: $color-light;
+//   height: 100%;
+//   width: 18rem;
+//   -moz-appearance: none;
+//   text-align: center;
 
-  @include mobile {
-    display: none;
-  }
-  @include tablet {
-    width: 14rem;
-  }
-}
+//   @include mobile {
+//     display: none;
+//   }
+//   @include tablet {
+//     width: 14rem;
+//   }
+// }
 
 .search-icon {
   cursor: pointer;
+  width: 1.8rem;
   @include mobile {
     margin-left: 0;
     width: 100%;