make Clay work with phone apps

src/styles/clay/_base.scss

@@ -1,6 +1,5 @@
 @import "bourbon";
-@import "vars";
-@import "mixins";
+@import "clay";
 
 html, body {
   @include font-pfdin(regular);

src/styles/clay/components/color.scss

@@ -0,0 +1,91 @@
+@import "clay";
+
+.component-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/clay/components/input.scss

@@ -0,0 +1,41 @@
+@import "clay";
+
+.component-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/clay/components/select.scss

@@ -0,0 +1,36 @@
+@import "bourbon";
+@import "clay";
+
+.component-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/clay/components/toggle.scss

@@ -0,0 +1,51 @@
+@import "clay";
+
+.component-toggle {
+
+  $slide-height: $base-height * 0.75;
+  $slide-width: $small-component-width;
+  $marker-diameter: $base-height;
+
+  input {
+    display: none; // @todo make sure this doesn't 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);
+    }
+  }
+
+}

src/styles/clay/elements/_button.scss

@@ -1,5 +1,4 @@
-@import "../vars";
-@import "../mixins";
+@import "clay";
 
 button,
 .button {