Add material design toggle ripple element.

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

Index: ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
diff --git a/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html b/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd830a006bca5648e6430026f81d15b39ee93867
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
@@ -0,0 +1,49 @@
+<!-- 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/polymer/v1_0/polymer/polymer.html">
+
+<dom-module id="files-toggle-ripple">
+  <style>
+    :host {
+      display: block;
+      height: 100%;
+      position: relative;
+      width: 100%;
+    }
+
+    .ripple-container {
+      -webkit-margin-start: -50%;
+      align-items: center;
+      display: flex;
+      height: 200%;
+      margin-top: -50%;
+      position: absolute;
+      width: 200%;
+    }
+
+    .ripple {
+      background-color: white;
+      height: 0;
+      margin: 0 auto;
+      opacity: 0;
+      width: 0;
+    }
+
+    .ripple.activated {
+      border-radius: 2px;
+      height: 50%;
+      opacity: 0.2;
+      width: 50%;
+    }
+  </style>
+  <template>
+    <div class="ripple-container">
+      <div class="ripple" id="ripple"></div>
+    </div>
+  </template>
+</dom-module>
+
+<script src="files_toggle_ripple.js"></script>