Finish checkbox

src/components/mdCheckbox/mdCheckbox.scss

@@ -28,7 +28,7 @@ $checkbox-ripple-size: 48px;
       border-top: 0;
       border-left: 0;
       opacity: 0;
-      transform: rotate(45deg) scale3D(.2, .2, 1);
+      transform: rotate(45deg) scale3D(.15, .15, 1);
       transition: $swift-ease-in;
       content: " ";
     }

src/components/mdCheckbox/mdCheckbox.theme

@@ -3,12 +3,23 @@
   &.md-checkbox {
     &.md-checked {
       .md-checkbox-container {
-        background-color: PRIMARY-COLOR;
-        border-color: PRIMARY-COLOR;
+        background-color: ACCENT-COLOR;
+        border-color: ACCENT-COLOR;
       }
 
       .md-ink-ripple {
-        color: PRIMARY-COLOR;
+        color: ACCENT-COLOR;
+      }
+
+      .md-ripple {
+        opacity: .38;
+      }
+    }
+
+    &.md-disabled {
+      .md-checkbox-container {
+        border-color: transparent;
+        background-color: rgba(#000, .26);
       }
     }
   }

src/components/mdCheckbox/mdCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="md-checkbox" :class="classes">
-    <div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple>
+    <div class="md-checkbox-container" @mousedown="toggleCheck" v-md-ink-ripple="disabled">
       <input type="checkbox" v-model="model" :name="name" :id="id" :disabled="disabled" :value="value">
     </div>
 
@@ -27,13 +27,16 @@
     computed: {
       classes() {
         return {
-          'md-checked': Boolean(this.model)
+          'md-checked': Boolean(this.model),
+          'md-disabled': this.disabled
         };
       }
     },
     methods: {
       toggleCheck() {
-        this.model = !this.model;
+        if (!this.disabled) {
+          this.model = !this.model;
+        }
       }
     },
     ready() {

src/docs/config.js

@@ -11,15 +11,19 @@ Vue.use(VueMaterial.MdTheme, {
     }
   },
   indigo: {
-    primary: 'indigo'
+    primary: 'indigo',
+    accent: 'blue'
   },
   orange: {
-    primary: 'orange'
+    primary: 'orange',
+    accent: 'green'
   },
   blue: {
-    primary: 'blue'
+    primary: 'blue',
+    accent: 'purple'
   },
   'bottom-bar': {
-    primary: 'teal'
+    primary: 'teal',
+    accent: 'orange'
   }
 });

src/docs/pages/Checkbox.vue

@@ -6,16 +6,24 @@
       <md-checkbox :model.sync="checked0" id="my-test0" name="my-test0">My beautiful checkbox</md-checkbox>
     </div>
 
-    <div>
-      <md-checkbox :model.sync="checked1" id="my-test1" name="my-test1" v-md-theme="'indigo'">My beautiful checkbox</md-checkbox>
+    <div v-md-theme="'indigo'">
+      <md-checkbox :model.sync="checked1" id="my-test1" name="my-test1">Themed</md-checkbox>
     </div>
 
-    <div>
-      <md-checkbox :model.sync="checked2" id="my-test2" name="my-test2" v-md-theme="'blue'">My beautiful checkbox</md-checkbox>
+    <div v-md-theme="'blue'">
+      <md-checkbox :model.sync="checked2" id="my-test2" name="my-test2">Accent Color</md-checkbox>
     </div>
 
-    <div>
-      <md-checkbox :model.sync="checked3" id="my-test3" name="my-test3" v-md-theme="'orange'">My beautiful checkbox</md-checkbox>
+    <div v-md-theme="'orange'">
+      <md-checkbox :model.sync="checked3" id="my-test3" name="my-test3">Fancy colors</md-checkbox>
+    </div>
+
+    <div v-md-theme="'bottom-bar'">
+      <md-checkbox :model.sync="checked4" id="my-test4" name="my-test4">Really simple</md-checkbox>
+    </div>
+
+    <div v-md-theme="'bottom-bar'">
+      <md-checkbox :model.sync="checked5" id="my-test5" name="my-test5" disabled>Disabled</md-checkbox>
     </div>
   </section>
 </template>
@@ -33,7 +41,9 @@
         checked0: true,
         checked1: true,
         checked2: true,
-        checked3: true
+        checked3: true,
+        checked4: true,
+        checked5: true
       };
     }
   };