more concistent disable function

src/scripts/lib/manipulators.js

@@ -4,6 +4,7 @@
  * @returns {ClayEvents}
  */
 function disable() {
+  this.$element.set('+disabled');
   this.$manipulatorTarget.set('disabled', true);
   return this.trigger('disabled');
 }
@@ -12,6 +13,7 @@ function disable() {
  * @returns {ClayEvents}
  */
 function enable() {
+  this.$element.set('-disabled');
   this.$manipulatorTarget.set('disabled', false);
   return this.trigger('enabled');
 }

src/styles/clay/_base.scss

@@ -86,6 +86,11 @@ label {
 .component {
   padding-bottom: $item-spacing-v;
   @include tap-highlight();
+
+  &.disabled {
+    opacity: 0.25;
+    pointer-events: none;
+  }
 }
 
 .section {

src/styles/clay/components/color.scss

@@ -9,15 +9,9 @@
     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;
@@ -47,7 +41,7 @@
     height: 0;
     width: 100%;
     padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0em;
+    margin: 0.6em 0 0;
 
     .color-box-container {
       position: absolute;