Merge branch 'exp-styleguide' into AD-884-refactor-styles-for-buttons

gulpfile.js

@@ -77,6 +77,10 @@ gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'c
     opn('http://www.localhost.com:3000');
 });
 
+gulp.task('styleguide', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() {
+    bundle(true, './styleguide/app.js');
+});
+
 gulp.task('jest', function(done) {
     jest.runCLI({ config : config.jestOptions }, ".", function() {
         done();
@@ -153,11 +157,13 @@ gulp.task('lint:watch', function () {
     gulp.watch('js/**/*.js', ['lint']);
 });
 
-function bundle(watch) {
+function bundle(watch, sourceFile, destDir) {
-    var bro;
+    var bro,
+        sourceFile = sourceFile || './js/app.js',
+        destDir = destDir || './build/js';
 
     if (watch) {
-        bro = watchify(browserify('./js/app.js',
+        bro = watchify(browserify(sourceFile,
             // Assigning debug to have sourcemaps
             _.assign(watchify.args, {
                 debug: true
@@ -166,7 +172,7 @@ function bundle(watch) {
             rebundle(bro, true);
         });
     } else {
-        bro = browserify('./js/app.js', {
+        bro = browserify(sourceFile, {
             debug: true
         });
     }
@@ -202,7 +208,7 @@ function bundle(watch) {
                 }
             })))
             .on('error', notify.onError('Error: <%= error.message %>'))
-            .pipe(gulp.dest('./build/js'))
+            .pipe(gulp.dest(destDir))
             .on('error', notify.onError('Error: <%= error.message %>'))
             .pipe(browserSync.stream())
             .on('error', notify.onError('Error: <%= error.message %>'));

sass/ascribe_custom_styles.scss

@@ -0,0 +1,98 @@
+body {
+    background-color: $ascribe-color-background
+}
+
+.btn-default {
+    color: white;
+    background-color: $ascribe-brand-color;
+    border-color: $ascribe-brand-color;
+    &:hover, &:focus {
+        background-color: darken($ascribe-brand-color, 10%);
+        border-color: darken($ascribe-brand-color, 10%);
+    }
+}
+
+.btn-default:active:hover,
+.btn-default:active:focus,
+.btn-default:active.focus,
+.btn-default.active:hover,
+.btn-default.active:focus,
+.btn-default.active.focus,
+.open > .btn-default.dropdown-toggle:hover,
+.open > .btn-default.dropdown-toggle:focus,
+.open > .btn-default.dropdown-toggle.focus {
+        background-color: darken($ascribe-brand-color, 20%);
+        border-color: darken($ascribe-brand-color, 20%);
+}
+
+.btn-default.disabled,
+.btn-default.disabled:hover,
+.btn-default.disabled:focus,
+.btn-default.disabled.focus,
+.btn-default.disabled:active,
+.btn-default.disabled.active,
+.btn-default[disabled],
+.btn-default[disabled]:hover,
+.btn-default[disabled]:focus,
+.btn-default[disabled].focus,
+.btn-default[disabled]:active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-default:hover,
+fieldset[disabled] .btn-default:focus,
+fieldset[disabled] .btn-default.focus,
+fieldset[disabled] .btn-default:active,
+fieldset[disabled] .btn-default.active {
+    background-color: lighten($ascribe-brand-color, 10%);
+    border-color: lighten($ascribe-brand-color, 10%);
+}
+
+.ascribe-piece-list-toolbar-filter-widget {
+    button {
+        color: $ascribe-brand-color;
+        background-color: transparent;
+        border-color: transparent;
+        &:hover, &:active {
+            color: white;
+            background-color: $ascribe-brand-color;
+            border-color: $ascribe-brand-color;
+        }
+    }
+}
+
+.navbar-default {
+    background-color: white;
+    border-color: $ascribe-color-borders;
+}
+
+.navbar-default .navbar-nav > .active > {
+    a, a:hover, a:focus {
+        background-color: transparent;
+        color: $ascribe-brand-color;
+        border-bottom: 1px solid $ascribe-brand-color;
+    }
+}
+
+.ascribe-settings-wrapper {
+    background-color: white;
+    &:hover{
+        border-left-color: rgba($ascribe-brand-color, .4);
+    }
+    &:last-of-type {
+        border-bottom-color: rgba(0, 0, 0, .05);
+    }
+}
+
+.ascribe-settings-wrapper.is-focused {
+    background-color: rgba($ascribe-brand-color, .05);
+    border-left-color: rgba($ascribe-brand-color, 1);
+}
+
+.ascribe-settings-property-collapsible-toggle input[type=checkbox]:checked + .checkbox:before {
+    color: $ascribe-brand-color;
+}
+
+#intercom-container .intercom-launcher-button {
+    background-color: $ascribe-brand-color !important;
+    border-color: $ascribe-brand-color !important;
+}

styleguide/app.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+import Buttons from './components/buttons';
+import Panel from 'react-bootstrap/lib/Panel';
+
+
+React.render(
+    <div className="container">
+        <h3>Buttons</h3>
+        <Buttons />
+    </div>,
+    document.getElementById('main')
+);

styleguide/components/buttons.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+
+let Buttons = React.createClass({
+    render() {
+        let classes = [
+            'btn btn-default',
+            'btn ascribe-btn',
+            'btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner',
+            'btn btn-danger btn-delete btn-sm'
+        ];
+
+        return (
+            <div>
+            {classes.map((c) => {
+                return (
+                    <span className={c}>
+                        {c}
+                    </span>
+                );
+                })
+            }
+            </div>
+        );
+    }
+
+});
+
+export default Buttons;