strip out components into separate repo

src/styles/config-page.scss

@@ -3,9 +3,3 @@
 @import "partials/reset";
 @import "fonts";
 @import "base";
-
-@import "items/color";
-@import "items/toggle";
-@import "items/input";
-@import "items/select";
-@import "items/button";

src/styles/items/_button.scss

@@ -1,61 +0,0 @@
-@import "../partials/vars";
-
-.item-button {
-}
-
-
-button,
-.button {
-  @include font-pfdin(medium);
-  text-transform: uppercase;
-  background-color: $color-gray-4;
-  border-radius: $border-radius;
-  font-size: 1rem;
-  line-height: 1;
-  border: none;
-  display: block;
-
-  color: $color-white;
-  min-width: 12rem;
-  text-align: center;
-  margin: 0 auto;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-  padding: $button-padding;
-
-  .platform-ios & {
-    padding: $button-padding-ios;
-  }
-
-  &:disabled {
-    background-color: $color-gray-3;
-    color: $color-gray-8;
-  }
-
-  &:not(:disabled):active {
-    background-color: $color-gray-8;
-  }
-
-  &.orange, &[type="submit"] {
-    background-color: $color-orange;
-
-    &:disabled {
-      background-color: $color-orange-dark;
-      color: $color-gray-3;
-    }
-
-    &:not(:disabled):active {
-      background-color: $color-red;
-    }
-  }
-
-  &.light-grey {
-    background-color: $color-gray-5;
-  }
-
-}
-
-a.button {
-  text-decoration: none;
-  color: $color-white;
-}

src/styles/items/_color.scss

@@ -1,91 +0,0 @@
-@import "../partials/vars";
-
-.item-color {
-
-  .value {
-    width: $small-component-width;
-    height: $base-height;
-    border-radius: $base-height / 2;
-    box-shadow: $box-shadow-small-components;
-  }
-
-  input:disabled ~ .value,
-  input:disabled ~ .label {
-    opacity: 0.25;
-  }
-
-  .picker-wrap {
-    left: 0;
-    top: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    position: fixed;
-    padding: 1rem;
-    background: rgba(0,0,0,0.7);
-    opacity: 0;
-    transition: opacity 70ms ease-in 175ms;
-    pointer-events: none;
-    z-index: 100;
-
-    .picker {
-      padding: 1rem;
-      background: $color-gray-11;
-      border-radius: $border-radius;
-    }
-
-    &.show {
-      transition-delay: 0ms;
-      pointer-events: auto;
-      opacity: 1;
-    }
-  }
-
-  .color-box-wrap {
-    box-sizing: border-box;
-    position: relative;
-    height: 0;
-    width: 100%;
-    padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0em;
-
-    .color-box-container {
-      position: absolute;
-      height: 99.97%;
-      width: 100%;
-      left: 0;
-      top: 0;
-
-      .color-box {
-        float:left;
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-        &.rounded-tl {
-          border-top-left-radius: $border-radius;
-        }
-
-        &.rounded-tr {
-          border-top-right-radius: $border-radius;
-        }
-
-        &.rounded-bl {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &.rounded-br {
-          border-bottom-right-radius: $border-radius;
-        }
-
-        &.selected {
-          transform: scale(1.15);
-          border-radius: $border-radius;
-          box-shadow: #111 0 0 0.24rem;
-          position: relative;
-          z-index: 100;
-        }
-      }
-
-    }
-  }
-}

src/styles/items/_input.scss

@@ -1,43 +0,0 @@
-@import "../partials/vars";
-@import "../partials/mixins";
-
-
-.item-input {
-
-  display: block;
-
-  .label {
-    padding-bottom: $item-spacing-v;
-  }
-
-  .input {
-    position: relative;
-    min-width: 100%;
-    margin-top: $item-spacing-v;
-    margin-left: 0;
-  }
-
-  input {
-    display:block;
-    width: 100%;
-    background: $color-gray-2;
-    border-radius: $border-radius;
-    padding: $item-spacing-v / 2 $item-spacing-h / 2;
-    border: none;
-    vertical-align: baseline;
-    color: $color-white;
-    font-size: inherit;
-
-    @include placeholder {
-      color: $color-gray-8;
-    }
-
-    &:focus {
-      @include placeholder {
-        color: $color-gray-6;
-      }
-      border: none;
-      box-shadow: none ;
-    }
-  }
-}

src/styles/items/_select.scss

@@ -1,36 +0,0 @@
-@import "../vendor/bourbon/bourbon";
-@import "../partials/vars";
-
-.item-select {
-  position: relative;
-
-  .value {
-    $triangle-size: 0.85rem;
-    position: relative;
-    padding-right: $triangle-size + 0.25rem;
-
-    &:after {
-      content: "";
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-gray-10, down);
-    }
-  }
-
-  select {
-    opacity: 0;
-    position: absolute;
-    display: block;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: #000;
-    width: 100%;
-    border: none;
-    margin:0;
-    padding:0;
-  }
-}

src/styles/items/_toggle.scss

@@ -1,51 +0,0 @@
-@import "../partials/vars";
-
-.item-toggle {
-
-  $slide-height: $base-height * 0.75;
-  $slide-width: $small-component-width;
-  $marker-diameter: $base-height;
-
-  input {
-    display: none; // @todo make sure this doesnt mess up interactivity on iOS
-  }
-
-  .graphic {
-    display: inline-block;
-    position: relative;
-
-    .slide {
-      display:block;
-      border-radius: $slide-height;
-      height: $slide-height;
-      width: $slide-width;
-      background: $color-gray-1;
-      transition: background-color 150ms linear;
-    }
-
-    .marker {
-      background: $color-gray-10;
-      width: $marker-diameter;
-      height: $marker-diameter;
-      border-radius: $marker-diameter;
-      position: absolute;
-      left: 0;
-      display: block;
-      top: ($marker-diameter - $slide-height) / 2 * -1;
-      transition: transform 150ms linear;
-      box-shadow: $box-shadow-small-components;
-    }
-  }
-
-  input:checked + .graphic {
-    .slide {
-      background: $color-orange-dark;
-    }
-
-    .marker {
-      background: $color-orange;
-      transform: translateX($slide-width - $marker-diameter);
-    }
-  }
-
-}