ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html

<!-- Copyright 2015 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<link rel="import" href="chrome://resources/html/polymer.html">

<dom-module id="files-toggle-ripple">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
        position: relative;
        width: 100%;
      }

      .ripple-container {
        align-items: center;
        display: flex;
        height: 200%;
        left: -50%;
        pointer-events: none;
        position: absolute;
        top: -50%;
        width: 200%;
      }

      .ripple {
        background-color: var(--files-toggle-ripple-bg-color, white);
        height: 0;
        margin: 0 auto;
        opacity: 0;
        width: 0;
        @apply(--files-toggle-ripple);
      }

      .ripple.activated {
        background-color: var(--files-toggle-ripple-activated-bg-color, white);
        border-radius: 2px;
        height: 50%;
        opacity: var(--files-toggle-ripple-activated-opacity, 0.2);
        width: 50%;
        @apply(--files-toggle-ripple-activated);
      }
    </style>
    <div class="ripple-container">
      <div class="ripple" id="ripple"></div>
    </div>
  </template>
</dom-module>

<script src="files_toggle_ripple.js"></script>