From 43797484c8adfa45ff1eaae128cb9a33931c0f77 Mon Sep 17 00:00:00 2001
From: Derek Louie <louied@google.com>
Date: Tue, 8 Mar 2016 14:28:51 -0800
Subject: [PATCH] Adding checkboxes to angular material stuff

---
 .../select/demoOptionGroups/index.html        |  4 +-
 src/components/select/select-theme.scss       | 16 +++++++
 src/components/select/select.scss             | 46 +++++++++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/components/select/demoOptionGroups/index.html b/src/components/select/demoOptionGroups/index.html
index daa5570f4eb..56c6ad96106 100644
--- 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
index ee704ff5e55..beeb184336b 100644
--- 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
index 28fdc20104b..3419d76e51a 100755
--- 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;
+            }
+        }
+    }
+}