Module search

gulp/config.js

@@ -43,6 +43,10 @@ module.exports = function () {
       src:  basePaths.assets + 'favicons/',
       dest: basePaths.dest
     },
+    icons: {
+      src:  basePaths.assets + 'icons/',
+      dest: basePaths.dest + 'assets/icons/'
+    },
     fonts: {
       src:  basePaths.assets + 'fonts/',
       dest: basePaths.dest + 'assets/fonts/'
@@ -57,6 +61,7 @@ module.exports = function () {
     images:   paths.images.src + '**/*',
     logos:    paths.logos.src + '**/*',
     favicons: paths.favicons.src + '**/*',
+    icons:    paths.icons.src + '**/*',
     fonts:    paths.fonts.src + '**/*'
   };
 

gulp/tasks/assets.js

@@ -8,6 +8,8 @@ module.exports = function (gulp, $, config) {
   var logosDest    = config.paths.logos.dest;
   var faviconsSrc  = config.appFiles.favicons;
   var faviconsDest = config.paths.favicons.dest;
+  var iconsSrc     = config.appFiles.icons;
+  var iconsDest    = config.paths.icons.dest;
   var fontsSrc     = config.appFiles.fonts;
   var fontsDest    = config.paths.fonts.dest;
 
@@ -24,10 +26,14 @@ module.exports = function (gulp, $, config) {
       .pipe($.changed(faviconsSrc))
       .pipe(gulp.dest(faviconsDest));
 
+    var iconsSt = gulp.src(iconsSrc)
+      .pipe($.changed(iconsSrc))
+      .pipe(gulp.dest(iconsDest));
+
     var fontsSt = gulp.src(fontsSrc)
       .pipe($.changed(fontsSrc))
       .pipe(gulp.dest(fontsDest));
 
-    return merge(imagesSt, logosSt, faviconsSt, fontsSt);
+    return merge(imagesSt, logosSt, faviconsSt, iconsSt, fontsSt);
   };
 };

src/modules/search/definition.yml

@@ -0,0 +1,2 @@
+data: {}
+options: {}

src/modules/search/markup.jade

@@ -0,0 +1,4 @@
+mixin search(data, options)
+  form.search(class=attributes.class, method='get', action='#')
+    input.search-input(type='text', name="query")
+    span.search-icon(type="submit")

src/modules/search/spec.jade

@@ -0,0 +1,2 @@
+h2 Search
++search()

src/modules/search/style.scss

@@ -0,0 +1,48 @@
+$search-icon-size: 15px !default;
+$search-icon-glass-url: url(../assets/icons/glass--white.png);
+
+//spaces
+$search-spacing:        12px !default;
+$search-spacing-half:   0.5 * $search-spacing;
+$search-spacing-double: 2 * $search-spacing;
+
+//colors
+$search-font-color: #FFF !default;
+
+.search {
+  display: flex;
+  &-input {
+    flex-grow: 1;
+
+    padding: $search-spacing-half $search-spacing;
+    background-color: transparent;
+
+    border: 1px solid rgba($c-white, 0.5);
+    transition: 100ms border ease;
+    border-radius: 1.5rem;
+
+    color: $search-font-color;
+    &:focus {
+      border: 1px solid $c-white;
+      outline: none;
+    }
+  }
+  &-icon {
+    align-self: center;
+    opacity: 0.5;
+    transition: 100ms opacity ease;
+
+    background: $search-icon-glass-url;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    width: $search-icon-size;
+    height: $search-icon-size;
+
+    margin-left: $search-spacing-double;
+  }
+
+  &-input:focus ~ &-icon {
+    opacity: 1;
+  }
+}

src/styles/_0.settings.scss

@@ -10,3 +10,23 @@ $breakpoints: (
     "print"               : "print"
 );
 
+/**
+ * Defines the spaces
+ */
+
+// general
+$s:         12px;
+$s-half:    0.5 * $s;
+$s-double:  2   * $s;
+
+// search
+$search-spacing: $s;
+
+
+/**
+ * Defines Icon Styles
+ */
+
+//search
+$search-icon-size: 15px;
+$search-icon-glass-url: url(../assets/icons/glass--white.png);

src/styles/_2.color.scss

@@ -10,4 +10,5 @@ $c-red:            #E00202;
 
 $c-cover:          rgba(0,0,0,0.5);
 
-
+// search
+$search-font-color: $c-white;