Adding checkboxes to angular material stuff

angular · Mar 8, 2016 · 4379748 · 4379748
1 parent e3b0cd8
commit 4379748
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/src/components/select/demoOptionGroups/index.html b/src/components/select/demoOptionGroups/index.html
@@ -10,7 +10,7 @@ <h1 class="md-title">Pick your pizza below</h1>
       </md-input-container>
       <md-input-container>
         <label>Topping</label>
-        <md-select ng-model="topping">
+        <md-select ng-model="selectedToppings" multiple>
           <md-optgroup label="Meats">
             <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
           </md-optgroup>
@@ -20,6 +20,6 @@ <h1 class="md-title">Pick your pizza below</h1>
         </md-select>
       </md-input-container>
     </div>
-    <p ng-if="topping">You ordered a {{size.toLowerCase()}} pizza with {{topping.toLowerCase()}}.</p>
+    <p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with {{selectedToppings.join(', ')}}.</p>
   </div>
 </div>
diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss
@@ -75,3 +75,19 @@ md-select-menu.md-THEME_NAME-theme {
     }
   }
 }
+
+md-select-menu.md-THEME_NAME-theme[multiple] {
+    md-option {
+        &:before {
+            color: '{{foreground-2}}';
+        }
+        &[selected] {
+            &:before {
+                background-color: '{{primary-color-0.87}}';
+            }
+            &:after {
+                border-color: '{{primary-contrast-0.87}}';
+            }
+        }
+    }
+}
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -1,3 +1,6 @@
+$select-checkbox-border-radius: 2px !default;
+$select-checkbox-border-width: 2px !default;
+$select-checkbox-width: rem(1.4) !default;
 $select-option-height: 48px;
 $select-option-padding: 16px;
 $select-container-padding: 16px;
@@ -228,3 +231,46 @@ md-optgroup {
     border: 1px solid #fff;
   }
 }
+
+md-select-menu[multiple] {
+    md-option {
+            height: $select-option-height;
+            padding-top: 2px;
+            padding-right: $select-option-padding;
+            padding-bottom: 0;
+            padding-left: ($select-option-padding * 2) + ($select-option-padding / 2);
+
+        &:before {
+            left: $select-option-padding * (2 / 3);
+            height: $select-checkbox-width;
+            width: $select-checkbox-width;
+            border-radius: $select-checkbox-border-radius;
+            top: 50%;
+            transform: translateY(-50%);
+            content: '';
+            position: absolute;
+            border: 2px solid;
+        }
+        &[selected] {
+            &:before {
+                border-color: transparent;
+            }
+            &:after {
+                box-sizing: border-box;
+                transform: rotate(45deg);
+                position: absolute;
+                display: table;
+                top: $select-option-padding + 1;
+                left: $select-option-padding + 1;
+                height: $select-checkbox-width - 1;
+                width:  $select-checkbox-width * (3/7);
+                border-width: $select-checkbox-border-width;
+                border-style: solid;
+                border-top: 0;
+                border-left: 0;
+                content: '';
+                z-index: 2;
+            }
+        }
+    }
+}