Merge remote-tracking branch 'origin/master' into #6/show-hide-items

# Conflicts:
#	dev/custom-fn.js
#	src/styles/clay/_base.scss

src/styles/clay/_base.scss

@@ -100,6 +100,10 @@ label {
   display: none;
 }
 
+.tap-highlight {
+  @include tap-highlight();
+}
+
 .component {
   padding-bottom: $item-spacing-v;
 
@@ -124,10 +128,10 @@ label {
     &:last-child,
     &:first-child {
       padding-bottom: $item-spacing-v;
-      
-      &:after {
-        display: none;
-      }
+    }
+
+    &:last-child:after {
+      display: none;
     }
 
     &:after {
@@ -146,6 +150,10 @@ label {
   .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
+
+    &:after {
+      display: none;
+    }
   }
 
 }
@@ -163,7 +171,7 @@ label {
     .input {
       display: table-cell;
     }
-    
+
     .input {
       text-align: right;
     }

src/styles/clay/components/checkboxgroup.scss

@@ -3,10 +3,8 @@
 
 .component-checkbox {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
@@ -39,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       background: $color-orange;
       

src/styles/clay/components/color.scss

@@ -7,6 +7,7 @@
     height: $base-height;
     border-radius: $base-height / 2;
     box-shadow: $box-shadow-small-components;
+    display: block;
   }
 
   .picker-wrap {

src/styles/clay/components/radiogroup.scss

@@ -3,10 +3,8 @@
 
 .component-radio {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
@@ -39,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       
       &:after {

src/styles/clay/components/select.scss

@@ -8,6 +8,7 @@
     $triangle-size: 0.85rem;
     position: relative;
     padding-right: $triangle-size + 0.25rem;
+    display: block;
 
     &:after {
       content: "";

src/styles/clay/components/submit.scss

@@ -0,0 +1,3 @@
+.component-submit {
+  text-align: center;
+}

src/styles/clay/elements/_button.scss

@@ -9,7 +9,7 @@ button,
   font-size: 1rem;
   line-height: 1;
   border: none;
-  display: block;
+  display: inline-block;
 
   color: $color-white;
   min-width: 12rem;