Merge pull request #625 from google/badge-demo

Use proper demo files for badge demos

docs/_assets/components.css

@@ -174,7 +174,3 @@ mdl-components-dd {
     height: 100%;
   }
 }
-
-#badges-section .snippet-demo .mdl-badge {
-  color: rgba(0, 0, 0, 0.24);
-}

docs/_pages/components.md

@@ -14,13 +14,17 @@ categories:
           - snippet_group:
             - caption: Number
               file: badge-on-icon-text.html
+              demo_file: badge-on-icon-text-demo.html
             - caption: Icon
               file: badge-on-icon-icon.html
+              demo_file: badge-on-icon-icon-demo.html
           - snippet_group:
             - caption: Number
               file: badge-on-text-text.html
+              demo_file: badge-on-text-text-demo.html
             - caption: Icon
               file: badge-on-text-icon.html
+              demo_file: badge-on-text-icon-demo.html
   - name: buttons
     title: Buttons
     description: Variations on Material Design buttons.

src/badge/snippets/badge-on-icon-icon-demo.html

@@ -0,0 +1,6 @@
+<style>
+.badge-demo {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+{% include "badge-on-icon-icon.html" %}

src/badge/snippets/badge-on-icon-text-demo.html

@@ -0,0 +1,6 @@
+<style>
+.badge-demo {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+{% include "badge-on-icon-text.html" %}

src/badge/snippets/badge-on-text-icon-demo.html

@@ -0,0 +1,6 @@
+<style>
+.badge-demo {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+{% include "badge-on-text-icon.html" %}

src/badge/snippets/badge-on-text-text-demo.html

@@ -0,0 +1,6 @@
+<style>
+.badge-demo {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+{% include "badge-on-text-text.html" %}