chore(demos): Remove ripple examples from theme page (#1954)

Ripple isn't an actual component, and other components on the page already have ripples, so there's no need for separate ripple examples on the page.
material-components · Jan 12, 2018 · d62beff · d62beff
1 parent 145217c
commit d62beff
Show file tree

Hide file tree

Showing 2 changed files with 0 additions and 116 deletions.
diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -586,52 +586,6 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
         </figure>
       </section>
 
-      <section class="demo-component-section">
-        <i id="ripple" class="demo-anchor-with-toolbar-offset"></i>
-        <h3 class="mdc-typography--headline demo-component-section__heading">
-          Ripple
-          <a href="#ripple" class="demo-component-section__permalink" title="Permalink to the theme demo for the ripple component">#</a>
-        </h3>
-
-        <figure class="demo-ripple__row">
-          <figcaption class="mdc-typography--subheading2">Bounded</figcaption>
-          <div class="mdc-ripple-surface mdc-elevation--z2 demo-ripple-box demo-ripple-surface" tabindex="0">
-            Default
-          </div>
-          <div class="mdc-ripple-surface mdc-elevation--z2 demo-ripple-box demo-ripple-box--primary demo-ripple-surface demo-ripple-surface--primary" tabindex="0">
-            Primary Color
-          </div>
-          <div class="mdc-ripple-surface mdc-elevation--z2 demo-ripple-box demo-ripple-box--secondary demo-ripple-surface demo-ripple-surface--secondary" tabindex="0">
-            Secondary Color
-          </div>
-        </figure>
-
-        <figure class="demo-ripple__row">
-          <figcaption class="mdc-typography--subheading2">Unbounded</figcaption>
-          <div class="demo-ripple-box">
-            Default
-            <div class="mdc-ripple-surface material-icons demo-ripple-surface" data-mdc-ripple-is-unbounded
-                 aria-label="Favorite" tabindex="0">
-              favorite
-            </div>
-          </div>
-          <div class="demo-ripple-box demo-ripple-box--primary">
-            Primary Color
-            <div class="mdc-ripple-surface material-icons demo-ripple-surface demo-ripple-surface--primary" data-mdc-ripple-is-unbounded
-                 aria-label="Favorite" tabindex="0">
-              favorite
-            </div>
-          </div>
-          <div class="demo-ripple-box demo-ripple-box--secondary">
-            Secondary Color
-            <div class="mdc-ripple-surface material-icons demo-ripple-surface demo-ripple-surface--secondary" data-mdc-ripple-is-unbounded
-                 aria-label="Favorite" tabindex="0">
-              favorite
-            </div>
-          </div>
-        </figure>
-      </section>
-
       <section class="demo-component-section">
         <i id="select" class="demo-anchor-with-toolbar-offset"></i>
         <h3 class="mdc-typography--headline demo-component-section__heading">
@@ -995,14 +949,6 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             }
           }
 
-          /*
-           * Ripple
-           */
-
-          getAll('.mdc-ripple-surface:not([data-demo-no-js])').forEach(function(surface) {
-            mdc.ripple.MDCRipple.attachTo(surface);
-          });
-
           /*
            * Select
            */

diff --git a/demos/theme/index.scss b/demos/theme/index.scss
@@ -432,68 +432,6 @@ $high-luminance-color: #fff8e1;
   @include demo-radio-color($mdc-theme-secondary);
 }
 
-//
-// Ripple demo
-//
-
-.demo-ripple__row {
-  margin: 32px 0;
-}
-
-.demo-ripple-box,
-.demo-ripple-surface {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.demo-ripple-box {
-  vertical-align: top;
-  width: 200px;
-  height: 100px;
-  padding: 1rem;
-  margin: 16px 16px 0 0;
-  font-weight: 500;
-}
-
-.demo-ripple-box--primary {
-  @include mdc-theme-prop(color, primary);
-}
-
-.demo-ripple-box--secondary {
-  @include mdc-theme-prop(color, secondary);
-}
-
-.demo-ripple-surface {
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.demo-ripple-surface--primary {
-  @include mdc-states(primary);
-}
-
-.demo-ripple-surface--secondary {
-  @include mdc-states(secondary);
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border-radius: 50%;
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::before,
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::after {
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
-}
-
 //
 // Switch demo
 //