make the tap-highlight not highlight the description

dev/config.js

@@ -97,15 +97,6 @@ module.exports = [
         "description": "Some arbitrary text explaining how this all works. " +
                        "It's cool if this wraps across multiple lines"
       },
-      {
-        "type": "input",
-        "appKey": "date",
-        "defaultValue": "",
-        "label": "Range",
-        "attributes": {
-          type: "range"
-        }
-      },
       {
         "type": "select",
         "appKey": "flavor",

src/styles/clay/_base.scss

@@ -54,6 +54,7 @@ label {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: $item-spacing-v $item-spacing-h;
 
   .input {
     white-space: nowrap;
@@ -103,15 +104,13 @@ label {
   box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 
   .component {
-    padding-top: $item-spacing-v;
-    padding-right: $item-spacing-h;
-    padding-left: $item-spacing-h;
     position: relative;
+    padding: $item-spacing-v $item-spacing-h;
 
-    &:last-child,
-    &:first-child {
-      padding-bottom: $item-spacing-v;
-    }
+    //&:last-child,
+    //&:first-child {
+    //  padding-bottom: $item-spacing-v;
+    //}
 
     &:last-child:after {
       display: none;
@@ -155,7 +154,7 @@ a {
 }
 
 .description {
-  padding-top: $item-spacing-v;
+  padding: 0 $item-spacing-h $item-spacing-v ;
   @include font-size(0.9);
   color: $color-gray-9;
 }

src/styles/clay/components/checkboxgroup.scss

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +16,14 @@
 
   .checkbox-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -56,6 +61,10 @@
 
       }
     }
+  }
 
+  .description {
+    padding-left: 0;
+    padding-right: 0;
   }
 }

src/styles/clay/components/color.scss

@@ -2,6 +2,10 @@
 
 .component-color {
 
+  .section & {
+    padding: 0;
+  }
+
   .value {
     width: $small-component-width;
     height: $base-height;

src/styles/clay/components/input.scss

@@ -2,7 +2,13 @@
 
 .component-input {
 
-  display: block;
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    display: block;
+  }
 
   .label {
     padding-bottom: $item-spacing-v;

src/styles/clay/components/radiogroup.scss

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +16,14 @@
 
   .radio-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -55,4 +60,9 @@
     }
 
   }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

src/styles/clay/components/select.scss

@@ -3,6 +3,10 @@
 
 .component-select {
 
+  .section & {
+    padding: 0;
+  }
+
   label {
     position: relative;
   }
@@ -19,7 +23,7 @@
       right: 0;
       top: 50%;
       margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-gray-10, down);
+      @include triangle($triangle-size, $color-orange, down);
     }
   }
 

src/styles/clay/components/toggle.scss

@@ -6,6 +6,10 @@
   $slide-width: $small-component-width;
   $marker-diameter: $base-height;
 
+  .section & {
+    padding: 0;
+  }
+
   input {
     display: none; // @todo make sure this doesn't mess up interactivity on iOS
   }

src/templates/components/color.tpl

@@ -1,5 +1,5 @@
-<div class="component component-color tap-highlight">
-  <label>
+<div class="component component-color">
+  <label class="tap-highlight">
     <input
       data-manipulator-target
       type="hidden"

src/templates/components/input.tpl

@@ -1,12 +1,15 @@
-<label class="component component-input tap-highlight">
-  <span class="label">{{{label}}}</span>
-  <span class="input">
-    <input
+<div class="component component-input">
+  <label class="tap-highlight">
+    <span class="label">{{{label}}}</span>
+    <span class="input">
+      <input
       data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
-  </span>
+    </span>
+  </label>
+
   {{if description}}
     <div class="description">{{{description}}}</div>
   {{/if}}
-</label>
+</div>

src/templates/components/select.tpl

@@ -1,5 +1,5 @@
-<div class="component component-select tap-highlight">
-  <label>
+<div class="component component-select">
+  <label class="tap-highlight">
     <span class="label">{{{label}}}</span>
     <span class="value"></span>
     <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>