Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
new file mode 100644
index 0000000..ce22b7c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
@@ -0,0 +1,3 @@
+#demo-menu-lower-left {
+ margin-left: 40%;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
new file mode 100644
index 0000000..9cd7e66
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
@@ -0,0 +1,8 @@
+#demo-menu-top-left {
+ margin-left: 40%;
+}
+
+#demo-menu-top-left,
+#demo-menu-top-right {
+ margin-top: 250px;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
new file mode 100644
index 0000000..ee3b3fc
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+ .demo-menu.demo-menu__lower-left .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__lower-left .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__lower-left .bar {
+ box-sizing: border-box;
+ background: #3F51B5;
+ color: white;
+ width: 100%;
+ padding: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="bar">
+ {% include "lower-left.html" %}
+ </div>
+ <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left.html b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
new file mode 100644
index 0000000..71bc922
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu below button -->
+<button id="demo-menu-lower-left"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-lower-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
new file mode 100644
index 0000000..d8ad651
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+ .demo-menu.demo-menu__lower-right .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__lower-right .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__lower-right .bar {
+ box-sizing: border-box;
+ position: relative;
+ background: #3F51B5;
+ color: white;
+ height: 64px;
+ width: 100%;
+ padding: 16px;
+ }
+ .demo-menu.demo-menu__lower-right .wrapper {
+ box-sizing: border-box;
+ position: absolute;
+ right: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="bar">
+ <div class="wrapper">
+ {% include "lower-right.html" %}
+ </div>
+ </div>
+ <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right.html b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
new file mode 100644
index 0000000..1ce8f9c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu below button -->
+<button id="demo-menu-lower-right"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-lower-right">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
new file mode 100644
index 0000000..3ad0e33
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+ .demo-menu.demo-menu__top-left .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__top-left .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__top-left .bar {
+ box-sizing: border-box;
+ background: #3F51B5;
+ color: white;
+ width: 100%;
+ padding: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="background"></div>
+ <div class="bar">
+ {% include "top-left.html" %}
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left.html b/node_modules/material-design-lite/src/menu/snippets/top-left.html
new file mode 100644
index 0000000..19a38aa
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu on top of button -->
+<button id="demo-menu-top-left"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
+ data-mdl-for="demo-menu-top-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
new file mode 100644
index 0000000..6087bff
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+ .demo-menu.demo-menu__top-right .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__top-right .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__top-right .bar {
+ box-sizing: border-box;
+ position: relative;
+ background: #3F51B5;
+ color: white;
+ height: 64px;
+ width: 100%;
+ padding: 16px;
+ }
+ .demo-menu.demo-menu__top-right .wrapper {
+ box-sizing: border-box;
+ position: absolute;
+ right: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="background"></div>
+ <div class="bar">
+ <div class="wrapper">
+ {% include "top-right.html" %}
+ </div>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right.html b/node_modules/material-design-lite/src/menu/snippets/top-right.html
new file mode 100644
index 0000000..803668e
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu on top of button -->
+<button id="demo-menu-top-right"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
+ data-mdl-for="demo-menu-top-right">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>