Release: 4.0.0

Author: rickyrauch

Gruntfile.js

@@ -22,7 +22,12 @@ module.exports = function (grunt) {
         command: './node_modules/.bin/gulp build'
       },
       gulp_dev: {
-        command: './node_modules/.bin/gulp'
+        command: './node_modules/.bin/gulp',
+        options: {
+          execOptions: {
+              maxBuffer: Infinity
+          }
+        }
       }
     },
     aws_s3: {

bower.json

@@ -1,4 +1,4 @@
 {
   "name": "auth0-styleguide",
-  "version": "3.8.4"
+  "version": "4.0.0"
 }

component.json

@@ -1,6 +1,6 @@
 {
   "name": "auth0-styleguide",
-  "version": "3.8.4",
+  "version": "4.0.0",
   "dependencies": {},
   "fonts": [
     "lib/budicon/fonts/*",

landing/styles/main.styl

@@ -280,18 +280,19 @@
       .btn
         margin-right: 30px;
 
-      span
-        height: 4px;
-        background: $color-red;
-        display: inline-block;
-        width: 47px;
-        margin-right: 2px;
-        &.blue
-          background-color: $color-blue;
-        &.blue-light
-          background-color: $color-blue-light;
-        &.gray
-          background-color: $color-gray
+      .lines
+        span
+          height: 4px;
+          background: $color-red;
+          display: inline-block;
+          width: 47px;
+          margin-right: 2px;
+          &.blue
+            background-color: $color-blue;
+          &.blue-light
+            background-color: $color-blue-light;
+          &.gray
+            background-color: $color-gray
 
   // typography table box black
   .theme-dark

landing/templates/splash.jade

@@ -2,13 +2,18 @@
 
   .splash.theme-dark
     .splash-intro 
-      span.red
-      span.blue
-      span.blue-light
-      span.gray
-      
+      .lines 
+        span.red
+        span.blue
+        span.blue-light
+        span.gray
+        
       h1 Styleguide
       p Conjunction of design patterns, components and resources used across our products.
 
-      a(href="").btn.btn-success.btn-lg Fork from github
-      a(href="").btn.btn-default.btn-lg Download Sketch
+      a(href="").btn.btn-success.btn-lg 
+        span.btn-icon.icon-budicon-493 
+        | Fork from github
+      a(href="").btn.btn-default.btn-lg 
+        span.btn-icon.icon-budicon-493 
+        | Download Sketch

lib/buttons/demo.jade

@@ -1,9 +1,9 @@
-.row 
+.row.bg-color-dark
   .col-sm-3
     p
       .btn Default
-    p
-      .btn.btn-xs Default
+    //- p
+    //-   .btn.btn-xs Default
     p
       .btn.btn-sm Default
     p
@@ -16,57 +16,67 @@
   .col-sm-3
     p
       .btn.btn-success Success
-    p
-      .btn.btn-success.btn-xs Success
+    //- p
+    //-   .btn.btn-success.btn-xs Success
     p
       .btn.btn-success.btn-sm Success
     p
       .btn.btn-success.btn-md Success
     p
       .btn.btn-success.btn-lg Success
     p
-      .btn.btn-success.icon-budicon-493 Success with icon
+      .btn.btn-success
+        span.btn-icon.icon-budicon-120 
+        | Success with icon
 
   .col-sm-3
     p
       .btn.btn-primary Primary
-    p
-      .btn.btn-primary.btn-xs Primary
+    //- p
+    //-   .btn.btn-primary.btn-xs Primary
     p
       .btn.btn-primary.btn-sm Primary
     p
       .btn.btn-primary.btn-md Primary
     p
       .btn.btn-primary.btn-lg Primary
     p
-      .btn.btn-primary.icon-budicon-493 Primary with icon
+      .btn.btn-primary
+        span.btn-icon.icon-budicon-120 
+        | Primary with icon
 
   .col-sm-3
     p
       .btn.btn-warning Warning
-    p
-      .btn.btn-warning.btn-xs Warning
+    //- p
+    //-   .btn.btn-warning.btn-xs Warning
     p
       .btn.btn-warning.btn-sm Warning
     p
       .btn.btn-warning.btn-md Warning
     p
       .btn.btn-warning.btn-lg Warning
     p
-      .btn.btn-warning.icon-budicon-493 Warning with icon
+      .btn.btn-warning
+        span.btn-icon.icon-budicon-493 
+        | Warning with icon
 
 
-.row 
+.row.bg-color-dark
   .col-sm-3
     p
       .btn.btn-danger Warning
-    p
-      .btn.btn-danger.btn-xs Warning
+    //- p
+    //-   .btn.btn-danger.btn-xs Warning
     p
       .btn.btn-danger.btn-sm Warning
     p
       .btn.btn-danger.btn-md Warning
     p
-      .btn.btn-danger.btn-lg Warning
+      .btn.btn-danger.btn-lg 
+        span.btn-icon.icon-budicon-493 
+        | Warning
     p
-      .btn.btn-danger.icon-budicon-493 Warning with icon
+      .btn.btn-danger
+        span.btn-icon.icon-budicon-493 
+        | Warning with icon

lib/buttons/index.styl

@@ -239,3 +239,32 @@ fieldset[disabled] .btn,
 .glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:100px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
 .glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
 .glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
+
+
+
+.btn
+  overflow: hidden;
+  position: relative;
+  span.btn-icon
+    margin-right: 46px;
+    display: inline-block
+    &::before
+      border-right: 1px solid rgba(255,255,255,.1);
+      display: inline-block
+      position: absolute;
+      width: 20px;
+      top: 0;
+      padding-right: 29px;
+      line-height: 40px;
+
+  &.btn-default
+    span
+      &::before
+        border-right: 1px solid rgba(0,0,0,.1);
+
+  &.btn-lg
+    span.btn-icon
+      &::before
+        line-height: 51px;
+        width: 10px;
+        margin-left: -10px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth0-styleguide",
-  "version": "3.8.4",
+  "version": "4.0.0",
   "engines": {
     "node": "0.10.x"
   },