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>Ripple - Material Components Catalog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png" />
    <script src="assets/material-components-web.css.js" charset="utf-8"></script>
    <link href="demos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <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;
      }


      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) {
        .example {
          flex-direction: column;
          width: 100%;
        }
      }

      .example {
        margin: 24px;
        padding: 24px;
        align-items: center;
        display: flex;
        margin-left: 10px;
      }

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

      .example h2 {
        font-size: 1.2em;
        margin-bottom: 0.8em;
      }
    </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>
    <header class="mdc-toolbar mdc-toolbar--fixed">
      <div class="mdc-toolbar__row">
        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
          <span class="catalog-back">
            <a href="/"><i class="material-icons">&#xE5C4;</i></a>
          </span>
          <span class="mdc-toolbar__title catalog-title">Ripple</span>
        </section>
      </div>
    </header>
    <main>
      <div class="mdc-toolbar-fixed-adjust"></div>
      <section class="hero mdc-ripple-surface">
      </section>

      <section class="example">
        <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 class="example">
        <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 class="example">
        <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 class="example">
        <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>