styling for input, toggle, color, select and button.

src/templates/items/color.tpl

@@ -2,12 +2,14 @@
   <span class="label">{{{label}}}</span>
   <input
     data-manipulator-target
-    type="text"
+    type="hidden"
   />
-  <div class="picker">
-    <span class="value"></span>
-    <div class="color-box-wrap">
-      <div class="color-box-container"></div>
+  <span class="value"></span>
+  <div class="picker-wrap">
+    <div class="picker">
+      <div class="color-box-wrap">
+        <div class="color-box-container"></div>
+      </div>
     </div>
   </div>
 </label>

src/templates/items/heading.tpl

@@ -1,3 +1,3 @@
-<div class="item-container-header">
-  <h1 data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h1>
+<div class="item item-heading">
+  <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
 </div>

src/templates/items/input.tpl

@@ -1,9 +1,8 @@
-<label class="item">
+<label class="item item-input">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input
       data-manipulator-target
-      type="text"
       {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
   </span>

src/templates/items/select.tpl

@@ -1,8 +1,9 @@
-<label class="item">
+<label class="item item-select">
   <span class="label">{{{label}}}</span>
-  <select data-manipulator-target class="item-select">
+  <span class="value"></span>
+  <select data-manipulator-target>
     {{each options}}
-      <option value="{{value}}" class="item-select-option">{{{label}}}</option>
+      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
     {{/each}}
   </select>
 </label>

src/templates/items/subheading.tpl

@@ -1,3 +0,0 @@
-<div class="item-container-header">
-  <h2 data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h2>
-</div>

src/templates/items/submit.tpl

@@ -1,9 +1,9 @@
-<div class="button-container">
-  <input
+<div class="item item-button">
+  <button
     data-manipulator-target
     type="submit"
-    class="item-button"
-    value="{{label}}"
     {{each key: attributes}}{{key}}="{{this}}"{{/each}}
   >
+    {{{label}}}
+  </button>
 </div>

src/templates/items/text.tpl

@@ -0,0 +1,3 @@
+<div class="item item-text">
+  <p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
+</div>

src/templates/items/toggle.tpl

@@ -1,4 +1,4 @@
-<label class="item">
+<label class="item item-toggle">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input
@@ -6,5 +6,9 @@
       type="checkbox"
       {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
+    <span class="graphic">
+      <span class="slide"></span>
+      <span class="marker"></span>
+    </span>
   </span>
 </label>