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;

test/spec/lib/manipulators.js

@@ -40,8 +40,15 @@ describe('manipulators', function() {
         var handlerSpy = sinon.spy();
         var clayItem = fixture.clayItem(itemType);
         clayItem.on('disabled', handlerSpy);
-
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          false
+        );
         clayItem.disable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          true
+        );
         assert.strictEqual(clayItem.$manipulatorTarget.get('disabled'), true);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');
@@ -54,13 +61,22 @@ describe('manipulators', function() {
    * @return {void}
    */
   function testEnable(itemType) {
-    describe('.disable()', function() {
+    describe('.enable()', function() {
-      it('disables the field then triggers an "enabled" event', function() {
+      it('enables the field then triggers an "enabled" event', function() {
         var handlerSpy = sinon.spy();
         var clayItem = fixture.clayItem(itemType);
         clayItem.on('enabled', handlerSpy);
 
+        clayItem.disable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          true
+        );
         clayItem.enable();
+        assert.strictEqual(
+          clayItem.$element[0].classList.contains('disabled'),
+          false
+        );
         assert.strictEqual(clayItem.$manipulatorTarget.get('disabled'), false);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
         assert(handlerSpy.calledOn(clayItem), 'handler not called on clayItem');