feat(button-flat): add flat button and flat button with icon #137

chore(fabricator): downgrade to 1.1.10 due to an issue, see fbrctr/fabricator-assemble#40 #137

docs/demo/materials/02-atoms/buttons/00-button-flat.html

@@ -0,0 +1,13 @@
+---
+name: button flat
+title: button flat
+---
+
+<button class="dc-btn dc-btn--flat dc-btn--flat-large">Flat Large Button</button>
+<button class="dc-btn dc-btn--flat">Flat Default Button</button>
+<button class="dc-btn dc-btn--flat dc-btn--flat-small">Flat Small button</button><br>
+
+
+<button class="dc-btn dc-btn--flat dc-btn--flat-large dc-btn--flat-destroy">Flat Large Destroy</button>
+<button class="dc-btn dc-btn--flat dc-btn--flat-success">Flat Default Success</button>
+<button class="dc-btn dc-btn--flat dc-btn--flat-small dc-btn--flat-disabled">Flat Small Disabled</button><br>

docs/demo/materials/02-atoms/buttons/01-button.html

@@ -8,7 +8,6 @@
 
   Use different buttons with the <code>dc-btn--small</code> and <code>dc-btn--large</code> classes.
 ---
-
 <button class="dc-btn dc-btn--large">Large Button</button><br>
 <button class="dc-btn">Default Button</button><br>
 <button class="dc-btn dc-btn--small"> small button </button>

docs/demo/materials/03-molecules/01-button-icon.html → docs/demo/materials/03-molecules/01-button-icon/01-button-icon.html

@@ -6,6 +6,8 @@
 
     For buttons with icon and text, use the modifiers `dc-icon--btn--left` and `dc-icon--btn--right` to set the position of the icon.
 ---
+
+
 <button class="dc-btn">
     <i class="dc-icon dc-icon--history dc-icon--btn"></i>
 </button>
@@ -35,3 +37,5 @@
 <button class="dc-btn dc-btn--destroy dc-btn--large">
     <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
 </button>
+
+

docs/demo/materials/03-molecules/01-button-icon/02-button-flat-icon.html

@@ -0,0 +1,12 @@
+---
+name: button flat icon
+title: button flat icon
+---
+<button class="dc-btn dc-btn--flat dc-btn--flat-destroy dc-btn--flat-large">
+    <span>Back to previous</span> <i class="dc-icon dc-icon--arrow-left dc-icon--btn dc-icon--btn-large dc-icon--btn--left"></i>
+</button>
+
+<button class="dc-btn dc-btn--flat dc-btn--flat-large">
+    <span>Go To next</span> <i class="dc-icon dc-icon--arrow-right dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
+</button>
+

package.json

@@ -42,7 +42,7 @@
     "babel-loader": "5.0.0",
     "browser-sync": "^2.7.1",
     "del": "^1.1.1",
-    "fabricator-assemble": "^1.1.9",
+    "fabricator-assemble": "1.1.10",
     "gulp": "^3.8.11",
     "gulp-autoprefixer": "^2.3.1",
     "gulp-conventional-changelog": "^0.7.0",

src/styles/atoms/_btn.scss

@@ -1,4 +1,5 @@
 // @import "../core/core";
+// @import "../atoms/link";
 
 @mixin dc-btn {
     display: inline-block;
@@ -129,7 +130,6 @@
 @mixin dc-btn--small {
     padding: $dc-space100 - .1 $dc-space100;
     font-size: 1.4rem;
-
     @content;
 }
 
@@ -169,6 +169,24 @@
     width: 100%;
 }
 
+//  = FLAT BUTTON
+//  ---------------------------------------------------------------------------
+@mixin dc-btn--flat {
+    @include dc-link;
+
+    background: transparent;
+    border: 0;
+}
+
+@mixin dc-btn--flat--no-touch {
+    &:hover {
+        border: 0;
+        background: none;
+        box-shadow: none;
+    }
+
+    @include dc-link--no-touch;
+}
 
 @mixin dc-btn-selectors {
     .dc-btn {
@@ -207,4 +225,52 @@
     .dc-btn--block {
         @include dc-btn--block;
     }
+
+    .dc-btn--flat {
+        @include dc-btn--flat;
+    }
+
+    .no-touch .dc-btn--flat {
+        @include dc-btn--flat--no-touch;
+    }
+
+    .dc-btn--flat-large {
+        @include dc-btn--large;
+    }
+
+    .dc-btn--flat-small {
+        @include dc-btn--small;
+    }
+
+    .no-touch .dc-btn--flat-small {
+        @include dc-btn--small--no-touch;
+    }
+
+    .no-touch .dc-btn--flat-success {
+        @include dc-link--success--no-touch;
+    }
+
+    .touch .dc-btn--flat-success {
+        @include dc-link--success--touch;
+    }
+
+    .no-touch .dc-btn--flat-destroy {
+        @include dc-link--destroy--no-touch;
+    }
+
+    .touch .dc-btn--flat-destroy {
+        @include dc-link--destroy--touch;
+    }
+
+    .dc-btn--flat-disabled {
+        @include dc-link--disabled;
+    }
+
+    .no-touch .dc-btn--flat-disabled {
+        @include dc-link--disabled--no-touch;
+    }
+
+    .touch .dc-btn--flat-disabled {
+        @include dc-link--disabled--touch;
+    }
 }