shibori 1.0.0.beta1 → 1.3.0.beta1

data/source/css/{scss → shibori/scss}/globals/_colors.scss

@@ -17,7 +17,7 @@ $black: #111;
 
 //- Mains
 $purple: #79589F;
-$purple-light: lighten(#79589F, 20%);
+$purple-light: #AB8ECD;
 $blue: #408FEC;
 $green: #74C080;
 $orange: #FA9F47;
@@ -25,12 +25,16 @@ $red: #D64242;
 
 //- Brand
 $brand-primary: $purple;
+$brand-primary-alt: $purple-light;
 $brand-primary-light: $purple-light;
 $brand-info: $blue;
+$brand-info-alt: #A1CAF9;
 $brand-success: $green;
+$brand-success-alt: #ADE28F;
 $brand-warning: $orange;
+$brand-warning-alt: #FFD3A0;
 $brand-danger: $red;
-
+$brand-danger-alt: #F37A65;
 
 .swatch-white {
   background: $white;
@@ -99,6 +103,10 @@ $grad-purple-blue: #5d64d0;
 
 @mixin gradient-brand-primary() {
   @include linear-gradient(to right bottom, #AB8ECD, $brand-primary, $fallback: $brand-primary);
+
+  &:hover {
+    @include linear-gradient(to right bottom, #DAE0EC, $gray-light, $fallback: $gray-light);
+  }
 }
 
 @mixin gradient-gray-light() {

data/source/css/shibori/scss/globals/_mixins.scss

@@ -0,0 +1,183 @@
+// ==========================================================================
+// Mixins (not provided by Bourbon)
+// ==========================================================================
+
+@mixin horizontal-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(left, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: 100% $width;
+}
+
+@mixin vertical-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(top, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: $width 100%;
+}
+
+.pad-{
+  &top {
+    padding-top: $pad;
+  }
+  &bottom {
+    padding-bottom: $pad;
+  }
+  &top-bottom {
+    padding-top: $pad;
+    padding-bottom: $pad;
+  }
+}
+
+.space-{
+  &top {
+    padding-top: $space;
+  }
+  &bottom {
+    padding-bottom: $space;
+  }
+  &top-bottom {
+    padding-top: $space;
+    padding-bottom: $space;
+  }
+}
+
+// Target retina devices
+@mixin retina {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (   min--moz-device-pixel-ratio: 2),
+  only screen and (     -o-min-device-pixel-ratio: 2/1),
+  only screen and (        min-device-pixel-ratio: 2),
+  only screen and (                min-resolution: 192dpi),
+  only screen and (                min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+@mixin shibori-button($color, $background) {
+  color: $color;
+  background-color: $background;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: tint($background, 10%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: shade($background, 1%);
+    box-shadow: inset 0 0 0 1px rgba(#000, .1);
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background: rgba($gray-lighter, .3);
+      box-shadow: inset 0 0 0 1px $gray-light;
+      color: $gray-light;
+    }
+  }
+
+  .badge {
+    color: $background;
+    background-color: $color;
+  }
+}
+
+@mixin shibori-button-lightning($color, $background, $gradient) {
+  color: $color;
+  background-color: $background;
+
+  background-image: -webkit-gradient(
+  	linear,
+  	left top,
+  	right bottom,
+  	color-stop(0, rgba($gradient, 0)),
+  	color-stop(1, rgba($gradient, 1))
+  );
+  background-image: -o-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
+  background-image: -moz-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
+  background-image: -webkit-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
+  background-image: -ms-linear-gradient(left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
+  background-image: linear-gradient(to left top, rgba($gradient, 0) 0%, rgba($gradient, 1) 100%);
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: tint($background, 10%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: shade($background, 1%);
+    box-shadow: inset 0 0 0 1px rgba(#000, .1);
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background: rgba($gray-lighter, .3);
+      box-shadow: inset 0 0 0 1px $gray-light;
+      color: $gray-light;
+    }
+  }
+
+  .badge {
+    color: $background;
+    background-color: $color;
+  }
+}
+
+@mixin shibori-button-alt($button-color) {
+  color: $button-color;
+  background: none;
+  box-shadow: inset 0 0 0 1px rgba($button-color, .6);
+
+  &:hover {
+    background: rgba($button-color, .1);
+    box-shadow: inset 0 0 0 1px rgba($button-color, .6);
+  }
+
+  &:active,
+  &.active {
+    background: rgba($button-color, .2);
+    box-shadow: inset 0 0 0 1px rgba($button-color, .8);
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background: rgba($gray-light, .1);
+      box-shadow: inset 0 0 0 1px $gray-light;
+      color: $gray-light;
+    }
+  }
+
+  .badge {
+    color: #fff;
+    background-color: $button-color;
+  }
+}

data/source/css/{scss → shibori/scss}/page-elements/_navigation.scss

@@ -20,45 +20,42 @@ nav {
   background-color: $gray-lighter;
   @include clearfix();
 
+  .btn {
+    margin: $pad !important;
+  }
+
   nav > ul {
     float: left;
 
     li {
-      font-size: $font-lg;
       display: inline-block;
+      font-size: $font-lg;
     }
 
     a {
       display: block;
-      padding: $pad*1.5;
+      padding: $pad*1.25;
       margin-top: 3px; // adjust for bottom border
       text-decoration: none;
-      color: fade-out($purple, .5);
+      color: fade-out($purple, .4);
       border-bottom: 3px solid fade-out($purple, 1);
       @include transition(all $transition);
 
-      [class^="icon-"] {
-        opacity: .5;
+      [class^="hk-icon"] {
         margin-bottom: -7px;
-        margin-right: 3px;
+        margin-right: $pad;
         top: -2px;
+        font-weight: normal;
+        font-size: $font-lg;
       }
 
       &.active {
         color: $purple;
         border-color: $purple;
-
-        [class^="icon-"] {
-          opacity: 1;
-        }
       }
 
       &:hover {
-        color: fade-out($purple, .1);
-
-        [class^="icon-"] {
-          opacity: 1;
-        }
+        color: $purple;
       }
 
       &:active,
@@ -96,13 +93,15 @@ nav {
 
       &:hover {
         color: $text-color;
-        padding-left: $pad;
       }
     }
 
     &.active a {
-      padding-left: $pad;
       color: $purple;
+
+      &.action {
+        padding-left: $pad;
+      }
     }
   }
 
@@ -113,6 +112,18 @@ nav {
       margin-bottom: $pad;
     }
   }
+
+  &.slide-action {
+    li {
+      a:hover {
+        padding-left: $pad;
+      }
+
+      &.active a {
+        padding-left: $pad;
+      }
+    }
+  }
 }
 
 //- Breadcrumbs

data/source/css/shibori.scss

@@ -2,62 +2,63 @@
 // Heroku
 // ==========================================================================
 
+@import 'hk-icon-rails';
 @import 'bourbon';
 
 //- Globals
-@import "scss/globals/colors";
-@import "scss/globals/variables";
-@import "scss/globals/mixins";
+@import "shibori/scss/globals/colors";
+@import "shibori/scss/globals/variables";
+@import "shibori/scss/globals/mixins";
 
 //- Layout
-@import "scss/layout/grid-settings";
+@import "shibori/scss/layout/grid-settings";
 @import 'neat';
-@import "scss/layout/layout";
+@import "shibori/scss/layout/layout";
 
 //- Base
-@import "scss/base/normalize";
-@import "scss/base/base";
-@import "scss/base/utilities";
-@import "scss/base/fonts";
-@import "scss/base/type";
+@import "shibori/scss/base/normalize";
+@import "shibori/scss/base/base";
+@import "shibori/scss/base/utilities";
+@import "shibori/scss/base/fonts";
+@import "shibori/scss/base/type";
 
 //- Page Elements
-@import "scss/page-elements/headers";
-@import "scss/page-elements/sections";
-@import "scss/page-elements/navigation";
-@import "scss/page-elements/sidebar";
+@import "shibori/scss/page-elements/headers";
+@import "shibori/scss/page-elements/sections";
+@import "shibori/scss/page-elements/navigation";
+@import "shibori/scss/page-elements/sidebar";
 
 //- Ecosystem/Elements Marketplace
-@import "scss/ecosystem/elements";
-@import "scss/ecosystem/cards";
-@import "scss/ecosystem/addons-card";
-@import "scss/ecosystem/elements-brand";
+@import "shibori/scss/ecosystem/elements";
+@import "shibori/scss/ecosystem/cards";
+@import "shibori/scss/ecosystem/addons-card";
+@import "shibori/scss/ecosystem/elements-brand";
 
 //- Components
-@import "scss/components/animate";
-@import "scss/components/hero";
-@import "scss/components/sr-only";
-@import "scss/components/masonary";
-@import "scss/components/lists";
-@import "scss/components/buttons";
-@import "scss/components/forms";
-@import "scss/components/quote";
-@import "scss/components/code";
-@import "scss/components/pill-box";
-@import "scss/components/tables";
-@import "scss/components/animation";
-@import "scss/components/tooltips";
-@import "scss/components/readmore";
-@import "scss/components/spinner";
-@import "scss/components/slider";
-@import "scss/components/alert";
-@import "scss/components/modal";
-@import "scss/components/panel";
-@import "scss/components/users";
-@import "scss/components/logos";
-@import "scss/components/icons";
-@import "scss/components/video";
-@import "scss/components/hr";
-@import "scss/components/sprites";
-@import "scss/components/vertical-tabs";
-@import "scss/components/owlCarousel";
+@import "shibori/scss/components/animate";
+@import "shibori/scss/components/hero";
+@import "shibori/scss/components/sr-only";
+@import "shibori/scss/components/masonary";
+@import "shibori/scss/components/lists";
+@import "shibori/scss/components/buttons";
+@import "shibori/scss/components/forms";
+@import "shibori/scss/components/quote";
+@import "shibori/scss/components/code";
+@import "shibori/scss/components/pill-box";
+@import "shibori/scss/components/tables";
+@import "shibori/scss/components/animation";
+@import "shibori/scss/components/tooltips";
+@import "shibori/scss/components/readmore";
+@import "shibori/scss/components/spinner";
+@import "shibori/scss/components/slider";
+@import "shibori/scss/components/alert";
+@import "shibori/scss/components/modal";
+@import "shibori/scss/components/panel";
+@import "shibori/scss/components/users";
+@import "shibori/scss/components/logos";
+@import "shibori/scss/components/icons";
+@import "shibori/scss/components/video";
+@import "shibori/scss/components/hr";
+@import "shibori/scss/components/sprites";
+@import "shibori/scss/components/vertical-tabs";
+@import "shibori/scss/components/owlCarousel";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shibori
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta1
+  version: 1.3.0.beta1
 platform: ruby
 authors:
 - Heroku
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-09-16 00:00:00.000000000 Z
+date: 2016-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bourbon
@@ -137,11 +137,13 @@ files:
 - source/_patterns/00-atoms/01-colors/00-colors-monochromatic.mustache
 - source/_patterns/00-atoms/01-colors/01-colors-brand.mustache
 - source/_patterns/00-atoms/01-colors/02-colors-gradients.mustache
-- source/_patterns/00-atoms/02-buttons/00-btn-lg.mustache
-- source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache
-- source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache
-- source/_patterns/00-atoms/02-buttons/03-btn-block.mustache
+- source/_patterns/00-atoms/02-buttons/00-btn-default.mustache
+- source/_patterns/00-atoms/02-buttons/01-btn-primary.mustache
+- source/_patterns/00-atoms/02-buttons/02-btn-colors.mustache
+- source/_patterns/00-atoms/02-buttons/03-btn-sizes.mustache
 - source/_patterns/00-atoms/02-buttons/04-btn-deploy.mustache
+- source/_patterns/00-atoms/02-buttons/05-btn-types.mustache
+- source/_patterns/00-atoms/02-buttons/06-btn-switch.mustache
 - source/_patterns/00-atoms/03-forms/00-text-fields.mustache
 - source/_patterns/00-atoms/03-forms/01-select-menu.mustache
 - source/_patterns/00-atoms/03-forms/02-checkbox.mustache
@@ -172,6 +174,7 @@ files:
 - source/_patterns/00-atoms/18-grid/_00-grid.mustache
 - source/_patterns/01-molecules/00-text/00-header-groups.mustache
 - source/_patterns/01-molecules/00-text/01-intro-text.mustache
+- source/_patterns/01-molecules/00-text/02-intro-text-light.mustache
 - source/_patterns/01-molecules/01-layout/00-one-up.mustache
 - source/_patterns/01-molecules/01-layout/01-two-up.mustache
 - source/_patterns/01-molecules/01-layout/02-three-up.mustache
@@ -195,53 +198,53 @@ files:
 - source/_patterns/02-organisms/03-sections/00-purple.mustache
 - source/_patterns/02-organisms/03-sections/01-purple-dark.mustache
 - source/_patterns/02-organisms/03-sections/03-gray-light.mustache
-- source/css/hk-icon-rails.scss
-- source/css/scss/base/_base.scss
-- source/css/scss/base/_fonts.scss
-- source/css/scss/base/_normalize.scss
-- source/css/scss/base/_type.scss
-- source/css/scss/base/_utilities.scss
-- source/css/scss/components/_alert.scss
-- source/css/scss/components/_animate.scss
-- source/css/scss/components/_animation.scss
-- source/css/scss/components/_buttons.scss
-- source/css/scss/components/_code.scss
-- source/css/scss/components/_forms.scss
-- source/css/scss/components/_hero.scss
-- source/css/scss/components/_hr.scss
-- source/css/scss/components/_icons.scss
-- source/css/scss/components/_lists.scss
-- source/css/scss/components/_logos.scss
-- source/css/scss/components/_masonary.scss
-- source/css/scss/components/_modal.scss
-- source/css/scss/components/_owlCarousel.scss
-- source/css/scss/components/_panel.scss
-- source/css/scss/components/_pill-box.scss
-- source/css/scss/components/_quote.scss
-- source/css/scss/components/_readmore.scss
-- source/css/scss/components/_slider.scss
-- source/css/scss/components/_spinner.scss
-- source/css/scss/components/_sprites.scss
-- source/css/scss/components/_sr-only.scss
-- source/css/scss/components/_tables.scss
-- source/css/scss/components/_tooltips.scss
-- source/css/scss/components/_users.scss
-- source/css/scss/components/_vertical-tabs.scss
-- source/css/scss/components/_video.scss
-- source/css/scss/ecosystem/_addons-card.scss
-- source/css/scss/ecosystem/_cards.scss
-- source/css/scss/ecosystem/_elements-brand.scss
-- source/css/scss/ecosystem/_elements.scss
-- source/css/scss/globals/_colors.scss
-- source/css/scss/globals/_mixins.scss
-- source/css/scss/globals/_variables.scss
-- source/css/scss/layout/_grid-settings.scss
-- source/css/scss/layout/_layout.scss
-- source/css/scss/page-elements/_headers.scss
-- source/css/scss/page-elements/_navigation.scss
-- source/css/scss/page-elements/_sections.scss
-- source/css/scss/page-elements/_sidebar.scss
+- source/css/_hk-icon-rails.scss
 - source/css/shibori.scss
+- source/css/shibori/scss/base/_base.scss
+- source/css/shibori/scss/base/_fonts.scss
+- source/css/shibori/scss/base/_normalize.scss
+- source/css/shibori/scss/base/_type.scss
+- source/css/shibori/scss/base/_utilities.scss
+- source/css/shibori/scss/components/_alert.scss
+- source/css/shibori/scss/components/_animate.scss
+- source/css/shibori/scss/components/_animation.scss
+- source/css/shibori/scss/components/_buttons.scss
+- source/css/shibori/scss/components/_code.scss
+- source/css/shibori/scss/components/_forms.scss
+- source/css/shibori/scss/components/_hero.scss
+- source/css/shibori/scss/components/_hr.scss
+- source/css/shibori/scss/components/_icons.scss
+- source/css/shibori/scss/components/_lists.scss
+- source/css/shibori/scss/components/_logos.scss
+- source/css/shibori/scss/components/_masonary.scss
+- source/css/shibori/scss/components/_modal.scss
+- source/css/shibori/scss/components/_owlCarousel.scss
+- source/css/shibori/scss/components/_panel.scss
+- source/css/shibori/scss/components/_pill-box.scss
+- source/css/shibori/scss/components/_quote.scss
+- source/css/shibori/scss/components/_readmore.scss
+- source/css/shibori/scss/components/_slider.scss
+- source/css/shibori/scss/components/_spinner.scss
+- source/css/shibori/scss/components/_sprites.scss
+- source/css/shibori/scss/components/_sr-only.scss
+- source/css/shibori/scss/components/_tables.scss
+- source/css/shibori/scss/components/_tooltips.scss
+- source/css/shibori/scss/components/_users.scss
+- source/css/shibori/scss/components/_vertical-tabs.scss
+- source/css/shibori/scss/components/_video.scss
+- source/css/shibori/scss/ecosystem/_addons-card.scss
+- source/css/shibori/scss/ecosystem/_cards.scss
+- source/css/shibori/scss/ecosystem/_elements-brand.scss
+- source/css/shibori/scss/ecosystem/_elements.scss
+- source/css/shibori/scss/globals/_colors.scss
+- source/css/shibori/scss/globals/_mixins.scss
+- source/css/shibori/scss/globals/_variables.scss
+- source/css/shibori/scss/layout/_grid-settings.scss
+- source/css/shibori/scss/layout/_layout.scss
+- source/css/shibori/scss/page-elements/_headers.scss
+- source/css/shibori/scss/page-elements/_navigation.scss
+- source/css/shibori/scss/page-elements/_sections.scss
+- source/css/shibori/scss/page-elements/_sidebar.scss
 - source/fonts/bentonsans/bentonsans-book.eot
 - source/fonts/bentonsans/bentonsans-book.svg
 - source/fonts/bentonsans/bentonsans-book.ttf

data/source/_patterns/00-atoms/02-buttons/00-btn-lg.mustache

@@ -1,7 +0,0 @@
-<ul class="list-unstyled">
-  <li><button class="btn">Default Button</button></li>
-  <li><button class="btn btn-alt">Alternate Button</button></li>
-  <li><button class="btn btn-white">White Button</button></li>
-  <li><button class="btn btn-disabled">Disabled Button</button></li>
-  <li><button class="btn btn-text">Text Button</button></li>
-</ul>

data/source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache

@@ -1,7 +0,0 @@
-<ul class="list-unstyled">
-  <li><button class="btn btn-sm">Default Button</button></li>
-  <li><button class="btn btn-sm btn-alt">Alternate Button</button></li>
-  <li><button class="btn btn-sm btn-white">White Button</button></li>
-  <li><button class="btn btn-sm btn-disabled">Disabled Button</button></li>
-  <li><button class="btn btn-sm btn-text">Text Button</button></li>
-</ul>

data/source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache

@@ -1,7 +0,0 @@
-<ul class="list-unstyled">
-  <li><button class="btn btn-xs">Default Button</button></li>
-  <li><button class="btn btn-xs btn-alt">Alternate Button</button></li>
-  <li><button class="btn btn-xs btn-white">White Button</button></li>
-  <li><button class="btn btn-xs btn-disabled">Disabled Button</button></li>
-  <li><button class="btn btn-xs btn-text">Text Button</button></li>
-</ul>

data/source/_patterns/00-atoms/02-buttons/03-btn-block.mustache

@@ -1,7 +0,0 @@
-<ul class="list-unstyled">
-  <li><button class="btn btn-block">Default Button</button></li>
-  <li><button class="btn btn-block btn-alt">Alternate Button</button></li>
-  <li><button class="btn btn-block btn-white">White Button</button></li>
-  <li><button class="btn btn-block btn-disabled">Disabled Button</button></li>
-  <li><button class="btn btn-block btn-text">Text Button</button></li>
-</ul>