Add demo

Author: jsor

demo/_src/index.js

@@ -0,0 +1,4 @@
+require('./style.less');
+
+var setup = require('../../lib/setup');
+setup('sliding-navigation');

demo/_src/style.less

@@ -0,0 +1,61 @@
+@import "../../lib/mixins";
+
+.clearfix() {
+    zoom: 1;
+    &:before,
+    &:after {
+        content: " "; /* 1 */
+        display: table; /* 2 */
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+body {
+    margin: 0;
+}
+
+.sliding-navigation {
+    .dotsunited-sliding-navigation();
+
+    position: relative;
+    max-width: 500px;
+    height: 100%;
+    background: #000;
+
+    font-family: sans-serif;
+
+    li {
+        .clearfix();
+    }
+
+    a {
+        display: block;
+        padding: 14px 20px;
+        color: #fff;
+        border-bottom: 1px solid rgba(255, 255, 255, .1);
+    }
+}
+
+.sliding-navigation__open-button {
+    .dotsunited-sliding-navigation-open-button();
+
+    float: right;
+
+    opacity: .5;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.sliding-navigation__back {
+    padding: 0 10px;
+    background: rgba(255, 255, 255, .1);
+}
+
+.sliding-navigation__back-button {
+    .dotsunited-sliding-navigation-back-button();
+    color: #fff;
+}

demo/_src/webpack.config.js

@@ -0,0 +1,19 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        demo: __dirname
+    },
+    output: {
+        path: path.join(__dirname, '..'),
+        publicPath: './',
+        filename: '[name].js?[chunkhash]'
+    },
+    module: {
+        loaders: [
+            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+            { test: /\.(gif|png|jpe?g|svg)$/, loader: 'url-loader' }
+        ]
+    }
+};