Create first draft of checkboxes

src/components/mdButton/mdButton.scss

@@ -120,6 +120,13 @@ $button-icon-size: 40px;
 
     .md-ink-ripple {
       border-radius: 50%;
+
+      .md-ripple {
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+      }
     }
 
     .md-ripple.md-active {

src/components/mdCheckbox/mdCheckbox.scss

@@ -1,5 +1,73 @@
 @import '../../core/variables.scss';
 
-.md-checkbox {
+$checkbox-size: 20px;
+$checkbox-ripple-size: 48px;
 
+.md-checkbox {
+  width: auto;
+  margin: 16px 0 16px;
+  display: inline-flex;
+  position: relative;
+
+  .md-checkbox-container {
+    width: $checkbox-size;
+    height: $checkbox-size;
+    margin-right: 8px;
+    position: relative;
+    border-radius: 2px;
+    border: 2px solid rgba(#000, .54);
+
+    input {
+      position: absolute;
+      left: -999em;
+    }
+
+    .md-ink-ripple {
+      top: -16px;
+      right: -16px;
+      bottom: -16px;
+      left: -16px;
+      border-radius: 50%;
+
+      .md-ripple {
+        width: $checkbox-ripple-size !important;
+        height: $checkbox-ripple-size !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+      }
+    }
+  }
+
+  .md-checkbox-label {
+    height: $checkbox-size;
+    line-height: $checkbox-size;
+  }
+
+  .md-icon {
+    width: $checkbox-size;
+    min-width: 0;
+    height: $checkbox-size;
+    min-height: 0;
+    position: absolute;
+    top: 4px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transform: scale(.5);
+    color: #fff;
+    font-size: $checkbox-size - 4px;
+    transition: $swift-ease-out;
+  }
+}
+
+.md-checkbox.md-checked {
+
+
+  .md-icon {
+    opacity: 1;
+    transform: scale(1);
+  }
 }

src/components/mdCheckbox/mdCheckbox.theme

@@ -1,6 +1,11 @@
 .THEME_NAME {
   .md-checkbox,
   &.md-checkbox {
-
+    &.md-checked {
+      .md-checkbox-container {
+        background-color: PRIMARY-COLOR;
+        border-color: PRIMARY-COLOR;
+      }
+    }
   }
 }

src/components/mdCheckbox/mdCheckbox.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="md-checkbox">
-    <input type="checkbox" id="temp">
-    <label for="temp">
+  <div class="md-checkbox md-checked">
+    <div class="md-checkbox-container" v-md-ink-ripple>
+      <input type="checkbox" id="temp">
+      <md-icon>check</md-icon>
+    </div>
+
+    <label class="md-checkbox-label" for="temp">
       <slot></slot>
     </label>
   </div>

src/components/mdInputContainer/mdInputContainer.scss

@@ -164,6 +164,10 @@ $input-size: 32px;
     right: 0;
     bottom: -2px;
     color: rgba(#000, .38);
+
+    .md-ink-ripple {
+      color: rgba(#000, .87);
+    }
   }
 }
 

src/docs/pages/Checkbox.vue

@@ -6,6 +6,12 @@
   </section>
 </template>
 
+<style lang="scss" scoped>
+  section {
+    padding: 0 24px;
+  }
+</style>
+
 <script>
   export default {