#8

added search component
implemented svg icons workflow

content/03-components/card/directory.hbs

@@ -1,3 +1,4 @@
+<div class="container">
 <div class="card-deck">
     <div class="card">
         <div class="card-body">
@@ -19,4 +20,5 @@
             <small>http://{your-outway-address}:12018/demo-organization/amsterdam-citydata/</small>
         </div>
     </div>
+</div>
 </div>

content/03-components/form/search.hbs

@@ -0,0 +1,8 @@
+<div class="search">
+    <input class="form-control" type="text" placeholder="Search in docs">
+    <button class="search_button" value="">
+        <svg width="14" height="14">
+            <use xlink:href="#search" />
+        </svg>
+    </button>
+</div>

content/03-components/form/switch.hbs

@@ -4,6 +4,6 @@
 </div>
 
 <div class="form-switch">
-    <input type="checkbox" class="form-switch-input" id="exampleSwitch1" checked>
-    <label class="form-switch-label" for="exampleSwitch1">Switch me</label>
+    <input type="checkbox" class="form-switch-input" id="exampleSwitch2" checked>
+    <label class="form-switch-label" for="exampleSwitch2">Switch me</label>
 </div>

content/03-components/nav/header.hbs

@@ -24,12 +24,16 @@
     <ul class="navbar-nav flex-row ml-md-auto">
         <li class="nav-item">
             <a class="nav-link p-2" href="https://github.com/VNG-Realisatie/nlx" target="_blank" rel="noopener" aria-label="GitHub">
-                <img src="{{ path '/img/github.svg' }}" />            
+                <svg width="25" height="24">
+                    <use xlink:href="#github" />
+                </svg>      
             </a>
         </li>
         <li class="nav-item">
             <a class="nav-link p-2" href="https://nl-x.slack.com" target="_blank" rel="noopener" aria-label="Slack">
-                <img src="{{ path '/img/slack.svg' }}" />
+                <svg width="24" height="24">
+                    <use xlink:href="#slack" />
+                </svg>  
             </a>
         </li>
     </ul>

content/_icons.hbs

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="github" viewBox="0 0 25 24"><title>github</title><path d="M12.303 0C5.51 0 0 5.509 0 12.305 0 17.74 3.525 22.35 8.415 23.979c.616.112.84-.267.84-.594 0-.291-.01-1.065-.017-2.092-3.422.743-4.144-1.65-4.144-1.65-.56-1.421-1.367-1.799-1.367-1.799-1.117-.763.085-.748.085-.748 1.235.087 1.885 1.268 1.885 1.268 1.097 1.88 2.879 1.337 3.58 1.023.112-.796.43-1.338.782-1.645-2.732-.31-5.605-1.367-5.605-6.081 0-1.343.48-2.442 1.267-3.302-.127-.311-.55-1.562.12-3.256 0 0 1.033-.33 3.384 1.261.98-.273 2.034-.41 3.08-.414 1.044.005 2.097.14 3.08.414 2.349-1.592 3.38-1.261 3.38-1.261.671 1.694.25 2.945.122 3.256.789.86 1.266 1.959 1.266 3.302 0 4.726-2.877 5.766-5.618 6.07.441.38.835 1.131.835 2.28 0 1.644-.015 2.97-.015 3.374 0 .33.221.713.846.592 4.884-1.63 8.407-6.238 8.407-11.672C24.608 5.509 19.098 0 12.303 0" fill="#181717" fill-rule="evenodd"/></symbol><symbol id="search" viewBox="0 0 13 13"><title>search</title><path d="M9.448 7.843L13 11.383 11.384 13 7.832 9.448c-.786.501-1.719.797-2.72.797A5.113 5.113 0 0 1 0 5.123 5.116 5.116 0 0 1 5.123 0a5.116 5.116 0 0 1 5.122 5.123 5.077 5.077 0 0 1-.797 2.72zm-4.325.125a2.847 2.847 0 0 0 0-5.691 2.847 2.847 0 0 0 0 5.691z" fill="#CED4DA" fill-rule="evenodd"/></symbol><symbol id="slack" viewBox="0 0 24 24"><title>slack</title><g fill-rule="nonzero" fill="none"><path d="M15.473 1.58A2.139 2.139 0 0 0 12.8.215a2.139 2.139 0 0 0-1.366 2.673l5.483 16.858a2.116 2.116 0 0 0 2.576 1.308c1.131-.332 1.814-1.522 1.444-2.615 0-.039-5.464-16.859-5.464-16.859z" fill="#ECB32D"/><path d="M6.985 4.332a2.139 2.139 0 0 0-2.673-1.366 2.139 2.139 0 0 0-1.366 2.673L8.43 22.498a2.116 2.116 0 0 0 2.576 1.307c1.132-.332 1.815-1.522 1.444-2.615 0-.039-5.464-16.858-5.464-16.858z" fill="#63C1A0"/><path d="M22.38 15.532a2.139 2.139 0 0 0 1.366-2.673 2.139 2.139 0 0 0-2.673-1.366L4.195 16.995a2.116 2.116 0 0 0-1.307 2.576c.332 1.131 1.522 1.814 2.614 1.444.04 0 16.878-5.483 16.878-5.483z" fill="#E01A59"/><path d="M7.707 20.312c1.093-.351 2.517-.82 4.04-1.307-.352-1.093-.82-2.517-1.308-4.04L6.4 16.274l1.307 4.04z" fill="#331433"/><path d="M16.215 17.541c1.522-.487 2.946-.956 4.039-1.307-.352-1.093-.82-2.517-1.308-4.039l-4.039 1.307 1.308 4.04z" fill="#D62027"/><path d="M19.61 7.044a2.139 2.139 0 0 0 1.366-2.673 2.139 2.139 0 0 0-2.674-1.366L1.444 8.488a2.116 2.116 0 0 0-1.307 2.575c.331 1.132 1.522 1.815 2.614 1.444.04 0 16.859-5.463 16.859-5.463z" fill="#89D3DF"/><path d="M4.956 11.805c1.093-.351 2.517-.82 4.04-1.307-.489-1.522-.957-2.947-1.308-4.04l-4.04 1.308 1.308 4.039z" fill="#258B74"/><path d="M13.444 9.054c1.522-.488 2.946-.956 4.039-1.308-.488-1.522-.956-2.946-1.307-4.039l-4.04 1.308 1.308 4.039z" fill="#819C3C"/></g></symbol></svg>

gulpfile.js

@@ -37,7 +37,7 @@ const JS_BUILD_WATCHLIST = [
 ];
 
 const SVG_WATCHLIST = [
-	'components/atoms/**/*.svg'
+	'src/icons/**/*.svg'
 ];
 
 let isProduction = false;
@@ -158,33 +158,33 @@ gulp.task('js', gulp.series('js:clean', 'js:process'));
 gulp.task('svg:process', function () {
 	return gulp
 		.src(SVG_WATCHLIST)
-		.pipe(filenames('icons'))
+		// .pipe(filenames('icons'))
 		.pipe(svgmin(function (file) {
 			const prefix = path.basename(file.relative, path.extname(file.relative));
 			return {
 				plugins: [{
 					cleanupIDs: {
 						prefix: prefix + '-',
-						minify: true
+						// minify: true
 					}
 				}]
 			};
 		}))
 		.pipe(svgStore({
-			inlineSvg: true
+			// inlineSvg: true
 		}))
 		.pipe(rename(function (path) {
 			path.basename = '_icons';
 			path.extname = '.hbs';
 			return path;
 		}))
-		.pipe(gulp.dest('components/'))
-		.pipe(rename(function (path) {
-			path.basename = 'inline';
-			path.extname = '.svg';
-			return path;
-		}))
-		.pipe(gulp.dest('public/icons'));
+		.pipe(gulp.dest('content/'))
+		// .pipe(rename(function (path) {
+		// 	path.basename = 'inline';
+		// 	path.extname = '.svg';
+		// 	return path;
+		// }))
+		// .pipe(gulp.dest('public/icons'));
 });
 
 gulp.task('svg:clean', function () {

src/scss/_variables.scss

@@ -53,6 +53,7 @@ $font-size-base:                1rem;
 $font-weight-base:              $font-weight-light;
 $line-height-base:              1.9;
 
+
 // Heading
 $headings-margin-bottom:        0;
 $headings-font-weight:          $font-weight-bold;
@@ -85,19 +86,26 @@ $container-max-widths: (
 // Grid
 $grid-gutter-width:             40px;
 
-// Buttons
-$btn-font-weight:               $font-weight-bold;
-$input-btn-padding-y-lg:        .5rem;
-$input-btn-padding-x-lg:        1rem;
-
+// Radius
 $border-radius:                 3px;
 $border-radius-lg:              5px;
 $border-radius-sm:              0;
 
+// Buttons
+$btn-font-weight:               $font-weight-bold;
+$input-btn-padding-y:           0;
+$input-btn-padding-x:           15px;
+
+// Inputs
+$input-border-radius:           0;
+$input-border-color:            $gray-300;
+$input-placeholder-color:       $gray-500;
+
 
-// Forms
 
 
+// Custom //
+$input-height:                  48px;
 
 // Transition
 $transition-base:               all .15s ease;

src/scss/base.scss

@@ -5,8 +5,15 @@
 
 @import 'core';
 
+// override bootstrap components
 @import 'components/buttons';
 @import 'components/card';
 @import 'components/forms';
 @import 'components/navbar';
 @import 'components/sidebar';
+
+
+// custom components
+@import 'custom/search';
+
+

src/scss/components/forms.scss

@@ -1,3 +1,7 @@
+.form-control {
+    height: $input-height;
+}
+
 .form-switch {
     position: relative;
     display: block;

src/scss/core.scss

@@ -1,16 +1,16 @@
 body {
-    // padding-top: 56px;
+    font-size: 16px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
     text-rendering: optimizeLegibility;
 
-    @include media-breakpoint-down(xl) {
-        font-size: 14px;
-    }
-    @include media-breakpoint-up(xl) {
-        font-size: 16px;
-    }
+    // @include media-breakpoint-down(xl) {
+    //     font-size: 14px;
+    // }
+    // @include media-breakpoint-up(xl) {
+    //     font-size: 16px;
+    // }
 }
 
 main {

src/scss/custom/search.scss

@@ -0,0 +1,22 @@
+.search {
+    position: relative;
+}
+
+.search_button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    width: 48px;
+    background: none;
+    border: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:not(:disabled):not(.disabled) {
+        cursor: pointer;
+    }
+}