feat(MdCheckbox): add indeterminate variant (#1597)

* feat(MdCheckbox): add `indeterminate` look, prop

* docs(MdCheckbox): indeterminate option

* docs(MdCheckbox): add indeterminate example

* style(MdCheckbox): improve css styles to maintain the correct pattern

Author: Samuell1

docs/app/pages/Components/Checkbox/Checkbox.vue

@@ -52,6 +52,12 @@
             type: 'String',
             description: 'The checkbox unique id.',
             defaults: 'a random string'
+          },
+          {
+            name: 'indeterminate',
+            type: 'Boolean',
+            description: 'Enables the indeterminate look of the checkbox.',
+            defaults: 'false'
           }
         ]
       },

docs/app/pages/Components/Checkbox/examples/RegularCheckboxes.vue

@@ -9,6 +9,8 @@
     <md-checkbox v-model="obj" :value="obj1">Object 1</md-checkbox>
     <md-checkbox v-model="obj" :value="obj2">Object 2</md-checkbox>
 
+    <md-checkbox v-model="indeterminate" indeterminate>Indeterminate</md-checkbox>
+
     <table>
       <tr>
         <th>Array</th>
@@ -40,7 +42,8 @@
       disabled: true,
       obj1: {name: 'obj1'},
       obj2: {name: 'obj2'},
-      obj: null
+      obj: null,
+      indeterminate: true
     })
   }
 </script>

src/components/MdCheckbox/MdCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="md-checkbox" :class="[$mdActiveTheme, checkClasses]">
     <div class="md-checkbox-container" @click.stop="toggleCheck">
       <md-ripple md-centered :md-active.sync="rippleActive" :md-disabled="disabled">
-        <input type="checkbox" v-bind="{ id, name, disabled, required, value }">
+        <input type="checkbox" v-bind="{ id, name, disabled, required, value }" :indeterminate.prop="indeterminate">
       </md-ripple>
     </div>
 
@@ -115,6 +115,22 @@
     }
   }
 
+  .md-checkbox.md-indeterminate {
+    .md-checkbox-container {
+      &:after {
+        width: 12px;
+        height: 2px;
+        top: 50%;
+        left: 50%;
+        z-index: 7;
+        border-style: solid;
+        border-width: 0 0 2px;
+        opacity: 0;
+        transform: translate(-50%, -50%) !important;
+      }
+    }
+  }
+
   .md-checkbox.md-checked {
     .md-checkbox-container {
       &:after {

src/components/MdCheckbox/MdCheckboxMixin.js

@@ -12,7 +12,8 @@ export default {
     },
     name: [String, Number],
     required: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    indeterminate: Boolean
   },
   model: {
     prop: 'model',
@@ -43,7 +44,8 @@ export default {
       return {
         'md-checked': this.isSelected,
         'md-disabled': this.disabled,
-        'md-required': this.required
+        'md-required': this.required,
+        'md-indeterminate': this.indeterminate
       }
     }
   },

src/components/MdCheckbox/theme.scss

@@ -15,6 +15,19 @@
       }
     }
 
+    &.md-indeterminate {
+      .md-checkbox-container {
+        border-color: rgba(#000, .54);
+        background-color: rgba(#fff, .3);
+        &:after {
+          border-color: rgba(#000, .54);
+        }
+      }
+      .md-ripple {
+        color: rgba(#000, .54);
+      }
+    }
+
     &.md-checked.md-primary {
       .md-checkbox-container {
         @include md-theme-property(background-color, primary);
@@ -27,6 +40,18 @@
     }
 
     @if md-get-theme-mode() == light {
+      &.md-indeterminate {
+        .md-checkbox-container {
+          border-color: rgba(#000, .54);
+          background-color: transparent;
+          &:after {
+            border-color: rgba(#000, .54);
+          }
+        }
+        .md-ripple {
+          color: rgba(#000, .54);
+        }
+      }
       .md-checkbox-container {
         border-color: rgba(#000, .54);
       }
@@ -44,6 +69,19 @@
         }
       }
     } @else {
+      &.md-indeterminate {
+        .md-checkbox-container {
+          border-color: rgba(#fff, .7);
+          background-color: transparent;
+          &:after {
+            border-color: rgba(#fff, .7);
+          }
+        }
+        .md-ripple {
+          color: rgba(#fff, .7);
+        }
+      }
+
       .md-checkbox-container {
         border-color: rgba(#fff, .7);
       }