demos/ripple.html

<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html class="mdc-typography">
  <head>
    <meta charset="utf-8">
    <title>MDC Ripple Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="assets/material-components-web.css.js" charset="utf-8"></script>
    <script>
      if (!window.CSS || !window.CSS.supports ||
        !window.CSS.supports('--css-vars', 'yes') && !(window.CSS.supports('color', '#00000000'))) {
        document.documentElement.classList.add('unsupported');
      }
    </script>
    <style type="text/css">
      .demo-surface {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 100px;
        padding: 1rem;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
      }

      .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%;
      }

      button.demo-surface {
        display: inline-block; /* Safari does not center button text otherwise :( */
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }

      section {
        align-items: center;
        display: flex;
        margin-left: 10px;
      }

      section > div {
        margin: 48px 0;
        width: 400px;
      }

      body {
        font-family: sans-serif;
      }

      #unsupported-msg {
        padding: 1rem;
        border: 1px solid red;
        color: red;
        border-radius: 4px;
        display: none;
      }

      .unsupported #unsupported-msg {
        display: block;
      }

      .unsupported main {
        opacity: .2;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
      }

      @media (max-width: 565px) {
        section {
          flex-direction: column;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <aside id="unsupported-msg">
      It appears your browser does not support custom properties, or has a broken implementation.
      Please try this in Desktop Chrome or Desktop Firefox.
    </aside>
    <main>
      <h1>MDC Ripple</h1>
      <section>
        <div>
          <h2>Bounded</h2>
          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
            Interact with me!
          </div>
        </div>
        <div>
          <h2>Bounded - CSS Only</h2>
          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
            Interact with me!
          </div>
        </div>
      </section>
      <section>
        <div>
          <h2>Unbounded</h2>
          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
               aria-label="Favorite" tabindex="0">
            favorite
          </div>
        </div>
        <div>
          <h2>Unbounded - CSS Only</h2>
          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
               aria-label="Favorite" data-demo-no-js tabindex="0">
            favorite
          </div>
        </div>
      </section>
      <section>
        <div>
          <h2>Theme Styles</h2>
          <div
            class="mdc-ripple-surface mdc-ripple-surface--primary
                   mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
            Primary
          </div>
          <div
            class="mdc-ripple-surface mdc-ripple-surface--accent
                   mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
            Accent
          </div>
        </div>
        <div>
          <h2>Theme Styles - CSS Only</h2>
          <div
            class="mdc-ripple-surface mdc-ripple-surface--primary
                   mdc-theme--primary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
            Primary
          </div>
          <div
            class="mdc-ripple-surface mdc-ripple-surface--accent
                   mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
            Accent
          </div>
        </div>

      </section>
      <section>
        <div>
          <h2>Applied to <code>&lt;button&gt;</code> element</h2>
          <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface">button</button>
        </div>
        <div>
          <h2>Applied to <code>&lt;button&gt;</code> element - CSS Only</h2>
          <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface" data-demo-no-js>button</button>
        </div>

      </section>
    </main>
    <script src="assets/material-components-web.js" charset="utf-8"></script>
    <script>
      (function(global) {
        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js])'), function(surface) {
          mdc.ripple.MDCRipple.attachTo(surface);
        });
      })(this);
    </script>
  </body>
</html>