insert styles from component on registration

src/scripts/lib/clay-config.js

@@ -208,6 +208,13 @@ ClayConfig.registerComponent = function(component) {
     throw new Error('The manipulator must have both a `get` and `set` method');
   }
 
+  if (_component.style) {
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(_component.style));
+    document.head.appendChild(style);
+  }
+
   componentStore[_component.name] = _component;
 };
 

src/styles/_base.scss

@@ -51,7 +51,7 @@ h6 {
   @include font-size(0.8);
 }
 
-.item {
+.component {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -92,7 +92,7 @@ h6 {
   margin-bottom: 1rem;
   box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 
-  .item {
+  .component {
     padding-top: $item-spacing-v;
     padding-right: $item-spacing-h;
     padding-left: $item-spacing-h;
@@ -120,14 +120,14 @@ h6 {
     }
   }
 
-  .item-heading:first-child {
+  .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
   }
 
 }
 
-label.item{
+label.component{
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
 
   &:active {
@@ -153,7 +153,7 @@ a {
   width:100%;
   border-collapse: collapse;
 
-  .section & .item {
+  .section & .component {
     display: table;
     width:100%;
 

src/styles/config-page.scss

@@ -3,3 +3,4 @@
 @import "partials/reset";
 @import "fonts";
 @import "base";
+@import "elements/button";

src/styles/elements/_button.scss

@@ -0,0 +1,58 @@
+@import "../partials/vars";
+@import "../partials/mixins";
+
+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;
+}