Header and search-box developed.

Author: jmosawy

src/App.vue

@@ -1,9 +1,26 @@
 <template>
   <div class="wrapper" id="app">
-    HELLO WORLD
+    <bc-header></bc-header>
+    <div class="page">
+      <section class="search">
+        <div class="container">
+          <div class="box-1">
+            <search-box></search-box>
+          </div>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {};
+  import BcHeader from './components/header.vue';
+  import SearchBox from './components/search-box.vue';
+
+  export default {
+    components: {
+      BcHeader,
+      SearchBox,
+    },
+  };
 </script>

src/assets/data.json

@@ -0,0 +1,25 @@
+[
+  {
+    "name": "Aparat",
+    "colors": [
+      "#E0E0E0",
+      "#AEC0FF",
+      "#00A1CD"
+    ]
+  },
+  {
+    "name": "Mihanblog",
+    "colors": [
+      "#ACAC1A",
+      "#00A1CD"
+    ]
+  },
+  {
+    "name": "Raad",
+    "colors": [
+      "#0CAC1A",
+      "#0010D3",
+      "#988AAC"
+    ]
+  }
+]

src/assets/fonts/.gitkeep

@@ -0,0 +1,9 @@
+<template>
+  <header class="header">
+    <img src="../assets/images/logo.svg" alt="BrandColors" class="header__logo">
+  </header>
+</template>
+
+<script>
+  export default {};
+</script>

src/assets/images/.gitkeep

@@ -0,0 +1,33 @@
+<template>
+  <div class="form-input">
+    <div class="form-input__text-box">
+      <input type="text" :id="id" v-model="text">
+    </div>
+    <div class="form-input__label">
+      <transition name="slide-fade">
+        <label v-if="labelVisibility" :for="id">
+          <slot>Placeholder</slot>
+        </label>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+  /* eslint-disable no-underscore-dangle */
+  /* eslint-disable object-shorthand */
+
+  export default {
+    data() {
+      return {
+        text: '',
+        id: this._uid,
+      };
+    },
+    computed: {
+      labelVisibility: function () {
+        return (this.text === '');
+      },
+    },
+  };
+</script>

src/assets/images/logo.svg

@@ -0,0 +1,8 @@
+@import "styles/tools/mixins";
+@import "styles/tools/transitions";
+@import "styles/core/all";
+
+@import "styles/modules/grid";
+
+@import "styles/components/header";
+@import "styles/components/form-input";

src/components/header.vue

@@ -0,0 +1,45 @@
+%fullWidth {
+  display: block;
+  width: 100%;
+}
+
+%form-typography {
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.form-input {
+  position: relative;
+
+  &__label {
+    position: absolute;
+    top: 50%;
+    left: 4px;
+    transform: translateY(-50%);
+    pointer-events: none;
+
+    label {
+      color: #B0BEC5;
+      @extend %fontFamily;
+      @extend %fullWidth;
+      @extend %form-typography;
+    }
+  }
+
+  &__text-box {
+    input {
+      border: none;
+      @extend %fontFamily;
+      @extend %fullWidth;
+      @extend %form-typography;
+      color: #455A64;
+      padding: 12px 4px;
+    }
+
+    &:after {
+      content: '';
+      border-bottom: 1px solid #263238;
+      @extend %fullWidth;
+    }
+  }
+}

src/components/search-box.vue

@@ -0,0 +1,10 @@
+.header {
+  background-color: $header__background-color--primary;
+  border-bottom: 1px solid $header__border-bottom-color--primary;
+  padding: 12px 0;
+
+  &__logo {
+    display: block;
+    margin: 0 auto;
+  }
+}

src/style.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "reset";
+@import "global";

src/styles/components/_form-input.scss

@@ -0,0 +1,7 @@
+body {
+  background-color: $background-color;
+}
+
+.page {
+  padding-top: 58px;
+}

src/styles/components/_header.scss

@@ -0,0 +1,58 @@
+* {
+  outline: none;
+  box-sizing: border-box;
+
+  &:after,
+  &:before {
+    outline: none;
+  }
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/styles/core/.gitkeep

@@ -0,0 +1,5 @@
+$background-color: #ffffff;
+
+// Header
+$header__background-color--primary: #ffffff;
+$header__border-bottom-color--primary: #90A4AE;

src/styles/core/_all.scss

@@ -0,0 +1,9 @@
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.box-1 {
+  width: 50%;
+  margin: 0 auto;
+}

src/styles/core/_global.scss

@@ -0,0 +1,18 @@
+%clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+%fontFamily {
+  font-family: 'Roboto', sans-serif;
+}
+
+%defaultTransition {
+  transition: all 300ms;
+}

src/styles/core/_reset.scss

@@ -0,0 +1,37 @@
+// slide fade
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(10px);
+  opacity: 0;
+}
+
+
+// slide up
+.slide-up-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.slide-up-enter-active {
+  transition: all 300ms;
+}
+
+.slide-up-leave-active {
+  transition: all 200ms ease;
+}
+
+.slide-up-leave {
+  opacity: 1;
+}
+
+.slide-up-leave-to {
+  transform: translateY(40px);
+}