shibori 1.0.0.beta1 → 1.3.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4ca62cc5fc76a05afafe004462b6abd9a0b6135d
-  data.tar.gz: 5938d8d9776a90fe53f8948569981d4792e1c6ec
+  metadata.gz: df112b48b0c0fdac4a5250485570460e918122fc
+  data.tar.gz: 4c7896f2d594603415355336698c97c2a6261c35
 SHA512:
-  metadata.gz: c4e3c6a0a7581b46fb5dc2010523f1a9d690ea1e507e6ff5462c83892dea0c2adbf789e07928fac366a24b356018282a5e008310701cc9adced9a96cda2ccb9b
-  data.tar.gz: 42606bb007ce66b3145135e136b646e9ca1f05194f7568278b1007e8771f483618980baf9f42b4f8ecf95e4c6ff08c2ddcfaf9226f0690b6e14f9cc7b08e299a
+  metadata.gz: 5d098e7e5cbd38f104f05b773ad36648fa6f1a0bb71c7a25257ef59b1ed260a964f8b867f64151c31174e995747c658ee6251369b79451073a6d330fd0f6c9b8
+  data.tar.gz: 2bd89f233f87449cb67cb126d1089436e2041c3a3e9444be81f465ac0185e7e8434ff017e5a57b58abedbfcf28f36ac59e91484a5fbc4b46907af735800c4568

data/.gitignore

@@ -18,3 +18,5 @@ public/styleguide/css/static.css.map
 public/styleguide/css/styleguide-specific.css.map
 public/styleguide/css/styleguide.css.map
 source/css/shibori.css.map
+
+/pkg/

data/README.md

@@ -20,5 +20,14 @@ gulp serve
 ## Development alongside Rails
 In the rails app, set up bundler to use the local copy of shibori you have: `bundle config local.shibori path/to/your/local/shibori`.
 
+When you do local development you'll want the `local.shibori` set up. Before you deploy, you may want to remove this to test a specific tag.
+
+
+```sh
+# ~/.zshrc or ~/.bashrc example
+alias shibori-on="bundle config local.shibori ../shibori"
+alias shibori-off="bundle config --delete local.shibori"
+```
+
 ## Pattern lab docs
 Shibori uses the [node version](https://github.com/pattern-lab/patternlab-node) of [Pattern Lab](http://patternlab.io/). You can find documentation in this repo's [`docs`](/docs) directory.

data/gulpfile.js

@@ -9,7 +9,7 @@ var pkg = require('./package.json'),
     nodeunit = require('gulp-nodeunit'),
     bourbon = require('node-bourbon'),
     neat = require('node-neat'),
-		sass = require('gulp-sass'),
+    sass = require('gulp-sass'),
     browserSync = require('browser-sync').create();
 
 require('gulp-load')(gulp);
@@ -95,7 +95,7 @@ gulp.task('connect', ['lab'], function(){
   gulp.watch([
     './source/_patterns/**/*.mustache',
     './source/_patterns/**/*.json',
-    './source/_data/*.json'	],
+    './source/_data/*.json'  ],
      ['lab-pipe'], function(){
        browserSync.reload();
      });
@@ -110,22 +110,22 @@ gulp.task('nodeunit', function(){
 
 // sass tasks, turn on if you want to use
 gulp.task('sass:style', function(){
-	return gulp.src('./source/css/*.scss')
-		.pipe(sass({
-			outputStyle: 'expanded',
-			precision: 8,
+  return gulp.src('./source/css/**/*.scss')
+    .pipe(sass({
+      outputStyle: 'expanded',
+      precision: 8,
       includePaths: neat.includePaths
-		}))
-		.pipe(gulp.dest('./public/css'))
+    }))
+    .pipe(gulp.dest('./public/css'))
     .pipe(browserSync.stream());
 })
 gulp.task('sass:styleguide', function(){
-	return gulp.src('./public/styleguide/css/*.scss')
- 		.pipe(sass({
- 			outputStyle: 'expanded',
- 			precision: 8
- 		}))
- 		.pipe(gulp.dest('./public/styleguide/css'))
+  return gulp.src('./public/styleguide/css/*.scss')
+     .pipe(sass({
+       outputStyle: 'expanded',
+       precision: 8
+     }))
+     .pipe(gulp.dest('./public/styleguide/css'))
     .pipe(browserSync.stream());
 })
 

data/lib/shibori/version.rb

@@ -1,3 +1,3 @@
 module Shibori
-  VERSION = '1.0.0.beta1'
+  VERSION = '1.3.0.beta1'
 end

data/lib/shibori.rb

@@ -1,4 +1,4 @@
-class Shibori
+module Shibori
   class Railtie < Rails::Railtie
     initializer 'shibori' do
       Rails.configuration.assets.paths += [

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

@@ -0,0 +1,13 @@
+<ul class="list-unstyled">
+  <button class="btn btn-default">.btn-default</button>
+  <button class="btn btn-default hover">.btn-default:hover</button>
+  <button class="btn btn-default active">.btn-default:active</button>
+  <button class="btn disabled">.disabled</button>
+  <button class="btn btn-loading">
+    <span class="spinner">
+       <i class="spinner__dot spinner__dot--one"></i>
+       <i class="spinner__dot spinner__dot--two"></i>
+       <i class="spinner__dot spinner__dot--three"></i>
+     </span>
+  </button>
+</ul>

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

@@ -0,0 +1,26 @@
+<ul class="list-unstyled">
+  <button class="btn btn-primary">.btn-primary</button>
+  <button class="btn btn-primary hover">.btn-primary:hover</button>
+  <button class="btn btn-primary active">.btn-primary:active</button>
+  <button class="btn disabled">.disabled</button>
+  <button class="btn btn-loading">
+    <span class="spinner">
+       <i class="spinner__dot spinner__dot--one"></i>
+       <i class="spinner__dot spinner__dot--two"></i>
+       <i class="spinner__dot spinner__dot--three"></i>
+     </span>
+  </button>
+</ul>
+<ul class="list-unstyled">
+  <button class="btn btn-primary-lightning">.btn-primary-lightning</button>
+  <button class="btn btn-primary-lightning hover">.btn-primary-lightning:hover</button>
+  <button class="btn btn-primary-lightning active">.btn-primary-lightning:active</button>
+  <button class="btn disabled">.disabled</button>
+  <button class="btn btn-loading">
+    <span class="spinner">
+       <i class="spinner__dot spinner__dot--one"></i>
+       <i class="spinner__dot spinner__dot--two"></i>
+       <i class="spinner__dot spinner__dot--three"></i>
+     </span>
+  </button>
+</ul>

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

@@ -0,0 +1,24 @@
+<ul class="list-unstyled">
+  <button class="btn btn-info">.btn-info</button>
+  <button class="btn btn-success">.btn-success</button>
+  <button class="btn btn-warning">.btn-warning</button>
+  <button class="btn btn-danger">.btn-danger</button>
+</ul>
+
+<ul class="list-unstyled">
+  <button class="btn btn-info-lightning">.btn-info-lightning</button>
+  <button class="btn btn-success-lightning">.btn-success-lightning</button>
+  <button class="btn btn-warning-lightning">.btn-warning-lightning</button>
+  <button class="btn btn-danger-lightning">.btn-danger-lightning</button>
+</ul>
+
+<ul class="list-unstyled">
+  <button class="btn btn-info btn-default">.button-default .btn-info</button>
+  <button class="btn btn-success btn-default">.button-default .btn-success</button>
+  <button class="btn btn-warning btn-default">.button-default .btn-warning</button>
+  <button class="btn btn-danger btn-default">.button-default .btn-danger</button>
+</ul>
+
+<ul class="list-unstyled">
+  <button class="btn btn-text">.btn-text</button>
+</ul>

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

@@ -0,0 +1,7 @@
+<div class="buttons-demo">
+  <button class="btn btn-default btn-xs">.btn-xs</button>
+  <button class="btn btn-default btn-sm">.btn-sm</button>
+  <button class="btn btn-default">Submit</button>
+  <button class="btn btn-default btn-lg">.btn-lg</button>
+  <button class="btn btn-default btn-block">.btn-block</button>
+</div>

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

@@ -1,4 +1,4 @@
- <a class='btn btn-primary deploy btn-block'>
+ <a class='btn btn-primary-lightning deploy'>
   <span class="hk-icon hk-icon-deploy"></span>
   Deploy <span class="to-heroku">to Heroku</span>
  </a>

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

@@ -0,0 +1,13 @@
+<ul class="list-unstyled">
+  <button class="btn btn-default"><span class="hk-icon hk-icon-stars"></span>Default</button>
+  <button class="btn btn-primary"><span class="hk-icon hk-icon-stars"></span>Primary</button>
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Box <span class="caret"></span></button>
+  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Select Box <span class="caret"></span></button>
+</ul>
+
+<ul class="list-unstyled">
+  <button class="btn btn-default"><span class="hk-icon hk-icon-stars"></span>Default</button>
+  <button class="btn btn-primary-lightning"><span class="hk-icon hk-icon-stars"></span>Primary</button>
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Box <span class="caret"></span></button>
+  <button type="button" class="btn btn-primary-lightning dropdown-toggle" data-toggle="dropdown">Select Box <span class="caret"></span></button>
+</ul>

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

@@ -0,0 +1,6 @@
+<label class="shibori-checkbox">
+  <span class="shibori-checkbox">
+    <input type="checkbox">
+    <span class="shibori-checkbox-value" aria-hidden="true"></span>
+  </span>
+</label>

data/source/_patterns/01-molecules/00-text/01-intro-text.mustache

@@ -1,5 +1 @@
 <p class="intro">This is intro text to a paragraph. Fugit reprehenderit impedit delectus culpa vero voluptatibus recusandae sed, assumenda dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus est aliquid dolorum exercitationem eius explicabo, ratione doloremque. Mollitia a similique porro facilis, repellat sint sit atque, voluptatibus neque praesentium iusto.</p>
-
-<p class="intro light">This is intro text to a paragraph. Fugit reprehenderit impedit delectus culpa vero voluptatibus recusandae sed, assumenda dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus est aliquid dolorum exercitationem eius explicabo, ratione doloremque. Mollitia a similique porro facilis, repellat sint sit atque, voluptatibus neque praesentium iusto.</p>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit blanditiis, veritatis reiciendis placeat ipsum illo excepturi. Voluptatum nemo voluptatem temporibus, provident, nostrum quam nobis nam voluptate, accusantium quae, placeat similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit blanditiis, veritatis reiciendis placeat ipsum illo excepturi. Voluptatum nemo voluptatem temporibus, provident, nostrum quam nobis nam voluptate, accusantium quae, placeat similique.</p>

data/source/_patterns/01-molecules/00-text/02-intro-text-light.mustache

@@ -0,0 +1 @@
+<p class="intro light">This is intro text to a paragraph. Fugit reprehenderit impedit delectus culpa vero voluptatibus recusandae sed, assumenda dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus est aliquid dolorum exercitationem eius explicabo, ratione doloremque. Mollitia a similique porro facilis, repellat sint sit atque, voluptatibus neque praesentium iusto.</p>

data/source/_patterns/01-molecules/02-navigation/01-subnav.mustache

@@ -1,21 +1,22 @@
 <div class="page-subnav">
-  <div class="wrapper wrapper-full">
+  <div class="wrapper">
     <nav>
       <ul class="subnav-inner">
         <li>
-          <a href="#">Subnav item</a>
+          <a href="#">Elements</a>
         </li>
         <li>
-          <a href="#">Subnav item</a>
+          <a class="active" href="#"></span>Add-ons</a>
         </li>
-        <li class="active">
-          <a href="#">Subnav item</a>
+        <li>
+          <a href="#">Buttons</a>
         </li>
         <li>
-          <a href="#">Subnav item</a>
+          <a href="#">Buildpacks</a>
         </li>
       </ul>
     </nav>
-    <a href="#" class="btn btn-sm pull-right">Button</a>
+
+    <a href="#" class="btn btn-sm btn-alt pull-right">Action Button</a>
   </div>
 </div>

data/source/_patterns/01-molecules/02-navigation/02-breadcrumbs.mustache

@@ -1,5 +1,5 @@
 <div class="breadcrumbs">
-  <div class="wrapper wrapper-full">
+  <div class="wrapper">
     <nav>
       <ul>
         <li><a href="#">First Breadcrumb</a> /</li>
@@ -13,7 +13,7 @@
 <br>
 
 <div class="breadcrumbs breadcrumbs-sm">
-  <div class="wrapper wrapper-full">
+  <div class="wrapper">
     <nav>
       <ul>
         <li><a href="#">First Breadcrumb</a> /</li>

data/source/_patterns/01-molecules/02-navigation/03-side-nav.mustache

@@ -1,6 +1,6 @@
-<div class="list-nav">
+<div class="list-nav slide-action">
   <nav>
-    <h5>A page subnav for the sidebar</h5>
+    <h5>Side-nav (w/slide-action)</h5>
     <ul>
       <li><a href="#">Nav Item</a></li>
       <li><a href="#">Nav Item</a></li>

data/source/_patterns/01-molecules/02-navigation/04-side-nav-small.mustache

@@ -1,6 +1,6 @@
 <div class="list-nav list-nav-sm">
   <nav>
-      <h5>Add-on Categories</h5>
+      <h5>Side-nav-small</h5>
       <ul>
         <li><a href="#">Add-on Categorie</a></li>
         <li><a href="#">Data Stores</a></li>

data/source/css/shibori/scss/components/_buttons.scss

@@ -0,0 +1,302 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+.buttons-demo {
+  padding: 0;
+
+  * {
+    vertical-align: top;
+  }
+
+  .btn {
+    display: block;
+    vertical-align: top;
+  }
+}
+
+.btn,
+a.btn {
+  @include transition(background $transition);
+  border-radius: $border-radius;
+  display: inline-block;
+  margin: $pad-sm 0;
+  padding: 6px 14px;
+  border: none;
+  font-weight: $font-bold;
+  text-align: center;
+  text-decoration: none;
+  background: $white;
+  font-size: 13px;
+  outline: none;
+  position: relative;
+  cursor: pointer;
+
+  &:active,
+  &.active {
+    outline: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    color: $gray-light;
+    background-color: rgba($gray-lighter, .3);
+    box-shadow: inset 0 0 0 1px $gray-light;
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  &-loading {
+    color: $gray;
+    background-color: rgba($gray-lighter, .3);
+    box-shadow: inset 0 0 0 1px $gray-light;
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  .hk-icon {
+    font-size: 14px;
+    line-height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: -3px;
+    margin-right: 4px;
+    margin-left: -2px;
+  }
+
+  .caret {
+    position: relative;
+    top: 1px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    border: none;
+    left: 4px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAAHhJREFUGBmdj8EJgDAMRevZXcQ1Cg5ScBFxDXUVwTkKHj3oVajvlxT0auHl85M2SZ2zk1JqYZOWXFYSHVxwmHal0JO4YYLaVL53hAgDVLotNR/z63+BFjuMavdqK79rRgAtMIMWWsyHPA7j4QR9Reo/e5BoYJWWwgNOyZST/q/QUQAAAABJRU5ErkJggg==') no-repeat;
+
+    @include retina {
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABGdBTUEAALGPC/xhBQAAASZJREFUOBHdkk1qAkEQRh1/NuJaBK/gwlu48RRuvIF7swlkmRsEkq1ZBInkChG8gJtALhACSkjI+L6xv9jTTi5gwbOqq17pjHStVhF5njfgNtCoUM5byB14AofqzrkZdRD6sPFGlNXrR+qpZDCE90jeUguHZsPTBhWNMXzaIL9CN6DaIWdcLFNM4ccT8jP8vZNqWIFD7lS/tneHfAfN0uMcn6gVZlb3WnwEPcI8XUjPOFfBXaSzizzzskv4gmvI/ntJzYIjd6l/dQeOe4pWuqwePFgi77Q4ge+o+UKdXgD1HHInxZdTjODDE/IafOVUO+SMSk9EYwBvNsjpJddsUFrygUEP4kvNsQj1evYqM0IbFoV+/FDdTuXKvx+xjngT5FmWZb/p4gHik/DofGR3LQAAAABJRU5ErkJggg==') no-repeat;
+      background-size: 7px 10px;
+    }
+  }
+
+  //- Colors
+
+  &-default {
+    @include shibori-button-alt($brand-primary);
+
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      color: $gray-light;
+      background-color: rgba($gray-lighter, .3);
+      box-shadow: inset 0 0 0 1px $gray-light;
+
+      &:hover {
+        color: $gray-light;
+        background-color: rgba($gray-lighter, .3);
+        box-shadow: inset 0 0 0 1px $gray-light;
+      }
+    }
+
+    .caret {
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAANRJREFUGBmdTj1OAmEUnPnYE3gG7QzhBDZWJhZ0sEBAK0ikB3ZpdxMTSgqgYZfoqom9B/ACxjtoR2hN0G/8vg0nYIr3M2/evEccELXWNYhLUP20uP3wtPFh2s6vYfku4Mznsnd8JWpmd1bISbyeBObyRzq1FsnFeX0biBhTmiXFzYR0ldSNw+xL5Ni7HgdGYfYN8CEpuqODLePW5h5Qh3FzPbDgHMSze6i/2/+tBDYMNKQ/GLXzK1n74hx+3UZAYxrpY++tHJaCMK8KWhAcpE+9T8/9A50YUm6gIA0oAAAAAElFTkSuQmCC') no-repeat;
+
+      @include retina {
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABGdBTUEAALGPC/xhBQAAAg9JREFUOBHdU79rE1Ecf59Lk6PFCOpSKLSCQ5cKgXZycREKmgwOHm2KSbNYUJd2EBoL3mAzOFQXC7okd2IKR6GDiVR0c40QqIuDQ4SCk0LVliTtff1+7/JiEvoX+OC97/f7+XHv50Gd0jzPi9R3jp4Klbg5vGxZ1smgDIOAfdc70/xxuKUUJUMOFfP8yLy9af3u1fYZH2acMWpThYgSfSKgjiiS6252X+NdYz5dTCgfFVI0JiQUvkrk+lKn3lcGJQvlXF1qQ4a1BSfJpo9dE1CLRY0r0sG5aAKONYGWa6zOO0uK6DlTEREoYNc8N3JL70n23Pr5Z5tIzQa8wglr7hlQ9Eyb+OuuOTmR0iYRSj4Rv5wSLjRSRDxDXOzyfq4BamN9a/FRSPaPSy9n2oxk83NOgydZ5vx9v+L/rPg6ilWQHA42HpczeY502lb5NWEt7RY4rhDoA1bnSod8UsOBGHh9MT6V65xi1//iTi3aONgr8RfTIYgjvkfc534cAEQLjV97Vbl07ZJcMG0SbehhRT7tziryPV7G2cAAfDKHjOuSN4/9t/yypiXnbRwoGFahnHn375Hfdqeo7Vd52eOBaOCRs+0bosaNwqvM55CXsdPsxeJoq4k3PPOMxiTyTLWYSSm7lPuu8eDv0IUQsfiFqyzc0ZjkgvWahOsuVQsl2jYZrS/OE8ljk9kHtg1f8t72F5HJzIBJBfCCAAAAAElFTkSuQmCC') no-repeat;
+        background-size: 7px 10px;
+      }
+    }
+  }
+
+  &-primary {
+    @include shibori-button(#fff, $brand-primary);
+
+    &-lightning {
+      @include shibori-button-lightning(#fff, $brand-primary, $brand-primary-alt);
+    }
+  }
+
+  &-white {
+    @include shibori-button($brand-primary, #fff);
+    box-shadow: inset 0 0 0 1px rgba(#fff, .6);
+
+    &-lightning {
+      @include shibori-button-lightning($brand-primary, #E7E4EE, #fff);
+      box-shadow: inset 0 0 0 1px rgba(#fff, .6);
+    }
+  }
+
+  &-success {
+    @include shibori-button(#fff, $brand-success);
+
+    &-lightning {
+      @include shibori-button-lightning(#fff, $brand-success, $brand-success-alt);
+    }
+
+    &.btn-default {
+      @include shibori-button-alt($brand-success);
+    }
+  }
+
+  &-info {
+    @include shibori-button(#fff, $brand-info);
+
+    &-lightning {
+      @include shibori-button-lightning(#fff, $brand-info, $brand-info-alt);
+    }
+
+    &.btn-default {
+      @include shibori-button-alt($brand-info);
+    }
+  }
+
+  &-warning {
+    @include shibori-button(#fff, $brand-warning);
+
+    &-lightning {
+      @include shibori-button-lightning(#fff, $brand-warning, $brand-warning-alt);
+    }
+
+    &.btn-default {
+      @include shibori-button-alt($brand-warning);
+    }
+  }
+
+  &-danger {
+    @include shibori-button(#fff, $brand-danger);
+
+    &-lightning {
+      @include shibori-button-lightning(#fff, $brand-danger, $brand-danger-alt);
+    }
+
+    &.btn-default {
+      @include shibori-button-alt($brand-danger);
+    }
+  }
+
+  //- Sizes
+  &-xs {
+    padding: 2px 8px;
+    font-size: 12px;
+  }
+
+  &-sm {
+    padding: 5px 16px;
+    font-size: 12px;
+  }
+
+  &-lg {
+    padding: 7px 20px;
+    font-size: $font-lg;
+  }
+
+  &-block {
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  //- Layouts
+
+  &-no-margin {
+    margin: 0;
+  }
+
+  //- Types
+  &-text {
+    background: transparent;
+    color: $blue;
+
+    &:hover,
+    &:focus {
+      color: darken($blue, 5%);
+      background: transparent;
+    }
+
+    &:active {
+      color: $brand-primary;
+    }
+  }
+
+  // Special Buttons
+  &.deploy {
+
+    .hk-icon {
+      position: relative;
+      top: 1px;
+      line-height: $font-sm;
+      margin-right: 4px;
+      color: lighten($brand-primary-light, 15%);
+      font-size: $font-base;
+    }
+
+    .to-heroku {
+      color: lighten($brand-primary-light, 15%);
+    }
+  }
+}
+
+// - Switch
+
+.shibori-checkbox {
+  display: inline-block;
+}
+
+.shibori-checkbox input {
+  display: inline-block;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/* style the "fake" shibori-checkbox */
+
+.shibori-checkbox-value {
+  background: #EEF1F6;
+  border: 1px solid #CFD7E6;
+  border-radius: 34px;
+  display: inline-block;
+  height: 30px;
+  width: 60px;
+  position: relative;
+  transition: all 120ms;
+  vertical-align: -0.5em;
+}
+
+.shibori-checkbox-value::before {
+  content: '';
+  background-color: #fff;
+  border: 1px solid;
+  border-color: inherit;
+  border-radius: 50%;
+  box-shadow: 0 0.0625em 0 0.0625em rgba(0,0,0,0.075);
+  display: block;
+  height: 30px;
+  width: 30px;
+  left: 25%;
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  transition: all 120ms ease-in;
+}
+
+input:checked + .shibori-checkbox-value {
+  background-image: linear-gradient(-135deg, #AB8ECD 0%, #79589F 100%);
+  border-color: #AB8ECD;
+}
+
+input:checked + .shibori-checkbox-value::before {
+  left: 51%;
+}

data/source/css/shibori/scss/components/_spinner.scss

@@ -0,0 +1,64 @@
+// ==========================================================================
+// Spinner
+// ==========================================================================
+
+// Pulled from purple.heroku for most of it
+
+/* $spinner-dot-size: 7px;
+$spinner-color: $purple;
+ */
+.spinner {
+  display: inline-flex;
+  @include justify-content(space-around);
+  position: relative;
+  vertical-align: middle;
+  width: 30px;
+  height: 6px;
+  text-align: center;
+  top: -1px;
+
+  i.spinner__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: $gray;
+
+    @include animation(pulse .85s infinite ease-in-out);
+
+    &.spinner__dot--one {
+      @include animation-delay(-0.2s);
+    }
+
+    &.spinner__dot--two {
+      @include animation-delay(-0.1s);
+    }
+  }
+
+  &.spinner--inverted {
+
+    i.spinner__dot {
+      background: #fff;
+    }
+  }
+
+  .btn--saving & {
+    width: 18px;
+    margin-right: 8px;
+    opacity: .6;
+
+    i.spinner__dot {
+      width: 3px;
+      height: 3px;
+    }
+  }
+}
+
+@include keyframes(pulse) {
+  0%, 80%, 100% {
+    opacity: 0;
+    transform: scale(.8);
+  } 40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}