1 files changed, 32 insertions, 2 deletions
diff --git a/material/material.css b/material/material.css
index cf66a8e..0a762f2 100644
--- a/material/material.css
+++ b/material/material.css
@@ -19,6 +19,11 @@ html, body {
   font-family: Roboto;
 }
 
+.Material_stackingContext {
+  position: absolute;
+  z-index: 0;
+}
+
 .Material_AppBar_bar {
   background: #9c27b0;
   height: 56px;
@@ -50,18 +55,36 @@ html, body {
 
 .Material_Checkbox_checkbox {
   display: block;
-  width: 24px;
-  height: 24px;
   box-sizing: border-box;
   border: 2px solid #9c27b0;
   border-radius: 2px;
   transition: background 300ms;
+
+  /* These must match the width and height defined in Material.Checkbox. */
+  width: 24px;
+  height: 24px;
 }
 
 .Material_Checkbox_checked {
   background: #9c27b0 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
 }
 
+.Material_Checkbox_ink {
+  display: block;
+  position: fixed;
+  transform: scale(0);
+  background: #9c27b0;  /* TODO(bbaren): Is this the correct color? */
+  border-radius: 100%;
+  animation: ripple 300ms linear;
+
+  /* These must match the width and height defined in Material.Checkbox. */
+  width: 24px;
+  height: 24px;
+
+  /* Place the ripple effect underneath the checkmark. */
+  z-index: -1;
+}
+
 .Material_List_SingleLine_element {
   list-style-type: none;
   height: 48px;
@@ -81,3 +104,10 @@ html, body {
   margin: 8px 16px;
   padding: 0;
 }
+
+@keyframes ripple {
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}