update shared components

dashboard-ui/bower_components/material-design-lite/src/menu/_menu.scss

@@ -0,0 +1,200 @@
+/**
+ * Copyright 2015 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
+ *
+ *      http://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.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-menu__container {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: absolute;
+  overflow: visible;
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  z-index: -1;
+
+  &.is-visible,
+  &.is-animating {
+    z-index: 999;
+    visibility: visible;
+  }
+}
+
+.mdl-menu__outline {
+  display: block;
+  background: $default-dropdown-bg-color;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: 0 0;
+  @include shadow-2dp();
+  will-change: transform;
+  transition: transform $menu-expand-duration $animation-curve-default,
+      opacity $menu-fade-duration $animation-curve-default;
+  z-index: -1;
+
+  .mdl-menu__container.is-visible & {
+    opacity: 1;
+    transform: scale(1);
+    z-index: 999;
+  }
+
+  &.mdl-menu--bottom-right {
+    transform-origin: 100% 0;
+  }
+
+  &.mdl-menu--top-left {
+    transform-origin: 0 100%;
+  }
+
+  &.mdl-menu--top-right {
+    transform-origin: 100% 100%;
+  }
+}
+
+.mdl-menu {
+  position: absolute;
+  list-style: none;
+  top: 0;
+  left: 0;
+  height: auto;
+  width: auto;
+  min-width: 124px;
+  padding: 8px 0;
+  margin: 0;
+  opacity: 0;
+  clip: rect(0 0 0 0);
+  z-index: -1;
+
+  .mdl-menu__container.is-visible & {
+    opacity: 1;
+    z-index: 999;
+  }
+
+  &.is-animating {
+    transition: opacity $menu-fade-duration $animation-curve-default,
+        clip $menu-expand-duration $animation-curve-default;
+  }
+
+  &.mdl-menu--bottom-right {
+    left: auto;
+    right: 0;
+  }
+
+  &.mdl-menu--top-left {
+    top: auto;
+    bottom: 0;
+  }
+
+  &.mdl-menu--top-right {
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 0;
+  }
+
+  &.mdl-menu--unaligned {
+    top: auto;
+    left: auto;
+  }
+}
+
+.mdl-menu__item {
+  display: block;
+  border: none;
+  color: $default-item-text-color;
+  background-color: transparent;
+  text-align: left;
+  margin: 0;
+  padding: 0 16px;
+  outline-color: $default-item-outline-color;
+  position: relative;
+  overflow: hidden;
+  @include typo-body-1();
+  text-decoration: none;
+  cursor: pointer;
+  height: 48px;
+  line-height: 48px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity $menu-fade-duration $animation-curve-default;
+  user-select: none;
+
+  .mdl-menu__container.is-visible & {
+    opacity: 1;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &--full-bleed-divider {
+    border-bottom: 1px solid $default-item-divider-color;
+  }
+
+  &[disabled], &[data-mdl-disabled] {
+    color: $disabled-item-text-color;
+    background-color: transparent;
+    cursor: auto;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    &:focus {
+      background-color: transparent;
+    }
+
+    & .mdl-ripple {
+      background: transparent;
+    }
+  }
+
+  &:hover {
+    background-color: $default-item-hover-bg-color;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $default-item-focus-bg-color;
+  }
+
+  &:active {
+    background-color: $default-item-active-bg-color;
+  }
+}
+
+
+.mdl-menu__item--ripple-container {
+  display: block;
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  z-index: 0;
+  overflow: hidden;
+}

dashboard-ui/bower_components/material-design-lite/src/menu/menu.js

@@ -0,0 +1,482 @@
+/**
+ * @license
+ * Copyright 2015 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
+ *
+ *      http://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.
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Class constructor for dropdown MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialMenu = function MaterialMenu(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialMenu'] = MaterialMenu;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+  MaterialMenu.prototype.Constant_ = {
+    // Total duration of the menu animation.
+    TRANSITION_DURATION_SECONDS: 0.3,
+    // The fraction of the total duration we want to use for menu item animations.
+    TRANSITION_DURATION_FRACTION: 0.8,
+    // How long the menu stays open after choosing an option (so the user can see
+    // the ripple).
+    CLOSE_TIMEOUT: 150
+  };
+
+  /**
+   * Keycodes, for code readability.
+   *
+   * @enum {number}
+   * @private
+   */
+  MaterialMenu.prototype.Keycodes_ = {
+    ENTER: 13,
+    ESCAPE: 27,
+    SPACE: 32,
+    UP_ARROW: 38,
+    DOWN_ARROW: 40
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+  MaterialMenu.prototype.CssClasses_ = {
+    CONTAINER: 'mdl-menu__container',
+    OUTLINE: 'mdl-menu__outline',
+    ITEM: 'mdl-menu__item',
+    ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE: 'mdl-ripple',
+    // Statuses
+    IS_UPGRADED: 'is-upgraded',
+    IS_VISIBLE: 'is-visible',
+    IS_ANIMATING: 'is-animating',
+    // Alignment options
+    BOTTOM_LEFT: 'mdl-menu--bottom-left',  // This is the default.
+    BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+    TOP_LEFT: 'mdl-menu--top-left',
+    TOP_RIGHT: 'mdl-menu--top-right',
+    UNALIGNED: 'mdl-menu--unaligned'
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialMenu.prototype.init = function() {
+    if (this.element_) {
+      // Create container for the menu.
+      var container = document.createElement('div');
+      container.classList.add(this.CssClasses_.CONTAINER);
+      this.element_.parentElement.insertBefore(container, this.element_);
+      this.element_.parentElement.removeChild(this.element_);
+      container.appendChild(this.element_);
+      this.container_ = container;
+
+      // Create outline for the menu (shadow and background).
+      var outline = document.createElement('div');
+      outline.classList.add(this.CssClasses_.OUTLINE);
+      this.outline_ = outline;
+      container.insertBefore(outline, this.element_);
+
+      // Find the "for" element and bind events to it.
+      var forElId = this.element_.getAttribute('for') ||
+                      this.element_.getAttribute('data-mdl-for');
+      var forEl = null;
+      if (forElId) {
+        forEl = document.getElementById(forElId);
+        if (forEl) {
+          this.forElement_ = forEl;
+          forEl.addEventListener('click', this.handleForClick_.bind(this));
+          forEl.addEventListener('keydown',
+              this.handleForKeyboardEvent_.bind(this));
+        }
+      }
+
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+      this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this);
+      this.boundItemClick_ = this.handleItemClick_.bind(this);
+      for (var i = 0; i < items.length; i++) {
+        // Add a listener to each menu item.
+        items[i].addEventListener('click', this.boundItemClick_);
+        // Add a tab index to each menu item.
+        items[i].tabIndex = '-1';
+        // Add a keyboard listener to each menu item.
+        items[i].addEventListener('keydown', this.boundItemKeydown_);
+      }
+
+      // Add ripple classes to each item, if the user has enabled ripples.
+      if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+        this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+
+        for (i = 0; i < items.length; i++) {
+          var item = items[i];
+
+          var rippleContainer = document.createElement('span');
+          rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
+
+          var ripple = document.createElement('span');
+          ripple.classList.add(this.CssClasses_.RIPPLE);
+          rippleContainer.appendChild(ripple);
+
+          item.appendChild(rippleContainer);
+          item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+        }
+      }
+
+      // Copy alignment classes to the container, so the outline can use them.
+      if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
+        this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+        this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+        this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+        this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+      }
+      if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        this.outline_.classList.add(this.CssClasses_.UNALIGNED);
+      }
+
+      container.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+  };
+
+  /**
+   * Handles a click on the "for" element, by positioning the menu and then
+   * toggling it.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleForClick_ = function(evt) {
+    if (this.element_ && this.forElement_) {
+      var rect = this.forElement_.getBoundingClientRect();
+      var forRect = this.forElement_.parentElement.getBoundingClientRect();
+
+      if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+        // Do not position the menu automatically. Requires the developer to
+        // manually specify position.
+      } else if (this.element_.classList.contains(
+          this.CssClasses_.BOTTOM_RIGHT)) {
+        // Position below the "for" element, aligned to its right.
+        this.container_.style.right = (forRect.right - rect.right) + 'px';
+        this.container_.style.top =
+            this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+      } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+        // Position above the "for" element, aligned to its left.
+        this.container_.style.left = this.forElement_.offsetLeft + 'px';
+        this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+        // Position above the "for" element, aligned to its right.
+        this.container_.style.right = (forRect.right - rect.right) + 'px';
+        this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+      } else {
+        // Default: position below the "for" element, aligned to its left.
+        this.container_.style.left = this.forElement_.offsetLeft + 'px';
+        this.container_.style.top =
+            this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+      }
+    }
+
+    this.toggle(evt);
+  };
+
+  /**
+   * Handles a keyboard event on the "for" element.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleForKeyboardEvent_ = function(evt) {
+    if (this.element_ && this.container_ && this.forElement_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+        ':not([disabled])');
+
+      if (items && items.length > 0 &&
+          this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+        if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+          evt.preventDefault();
+          items[items.length - 1].focus();
+        } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+          evt.preventDefault();
+          items[0].focus();
+        }
+      }
+    }
+  };
+
+  /**
+   * Handles a keyboard event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleItemKeyboardEvent_ = function(evt) {
+    if (this.element_ && this.container_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+        ':not([disabled])');
+
+      if (items && items.length > 0 &&
+          this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+        var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+
+        if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+          evt.preventDefault();
+          if (currentIndex > 0) {
+            items[currentIndex - 1].focus();
+          } else {
+            items[items.length - 1].focus();
+          }
+        } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+          evt.preventDefault();
+          if (items.length > currentIndex + 1) {
+            items[currentIndex + 1].focus();
+          } else {
+            items[0].focus();
+          }
+        } else if (evt.keyCode === this.Keycodes_.SPACE ||
+              evt.keyCode === this.Keycodes_.ENTER) {
+          evt.preventDefault();
+          // Send mousedown and mouseup to trigger ripple.
+          var e = new MouseEvent('mousedown');
+          evt.target.dispatchEvent(e);
+          e = new MouseEvent('mouseup');
+          evt.target.dispatchEvent(e);
+          // Send click.
+          evt.target.click();
+        } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+          evt.preventDefault();
+          this.hide();
+        }
+      }
+    }
+  };
+
+  /**
+   * Handles a click event on an item.
+   *
+   * @param {Event} evt The event that fired.
+   * @private
+   */
+  MaterialMenu.prototype.handleItemClick_ = function(evt) {
+    if (evt.target.hasAttribute('disabled')) {
+      evt.stopPropagation();
+    } else {
+      // Wait some time before closing menu, so the user can see the ripple.
+      this.closing_ = true;
+      window.setTimeout(function(evt) {
+        this.hide();
+        this.closing_ = false;
+      }.bind(this), /** @type {number} */ (this.Constant_.CLOSE_TIMEOUT));
+    }
+  };
+
+  /**
+   * Calculates the initial clip (for opening the menu) or final clip (for closing
+   * it), and applies it. This allows us to animate from or to the correct point,
+   * that is, the point it's aligned to in the "for" element.
+   *
+   * @param {number} height Height of the clip rectangle
+   * @param {number} width Width of the clip rectangle
+   * @private
+   */
+  MaterialMenu.prototype.applyClip_ = function(height, width) {
+    if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+      // Do not clip.
+      this.element_.style.clip = '';
+    } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+      // Clip to the top right corner of the menu.
+      this.element_.style.clip =
+          'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
+    } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+      // Clip to the bottom left corner of the menu.
+      this.element_.style.clip =
+          'rect(' + height + 'px 0 ' + height + 'px 0)';
+    } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+      // Clip to the bottom right corner of the menu.
+      this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' +
+          height + 'px ' + width + 'px)';
+    } else {
+      // Default: do not clip (same as clipping to the top left corner).
+      this.element_.style.clip = '';
+    }
+  };
+
+  /**
+   * Cleanup function to remove animation listeners.
+   *
+   * @param {Event} evt
+   * @private
+   */
+
+  MaterialMenu.prototype.removeAnimationEndListener_ = function(evt) {
+    evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+  };
+
+  /**
+   * Adds an event listener to clean up after the animation ends.
+   *
+   * @private
+   */
+  MaterialMenu.prototype.addAnimationEndListener_ = function() {
+    this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+    this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
+  };
+
+  /**
+   * Displays the menu.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.show = function(evt) {
+    if (this.element_ && this.container_ && this.outline_) {
+      // Measure the inner element.
+      var height = this.element_.getBoundingClientRect().height;
+      var width = this.element_.getBoundingClientRect().width;
+
+      // Apply the inner element's size to the container and outline.
+      this.container_.style.width = width + 'px';
+      this.container_.style.height = height + 'px';
+      this.outline_.style.width = width + 'px';
+      this.outline_.style.height = height + 'px';
+
+      var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS *
+          this.Constant_.TRANSITION_DURATION_FRACTION;
+
+      // Calculate transition delays for individual menu items, so that they fade
+      // in one at a time.
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+      for (var i = 0; i < items.length; i++) {
+        var itemDelay = null;
+        if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ||
+            this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+          itemDelay = ((height - items[i].offsetTop - items[i].offsetHeight) /
+              height * transitionDuration) + 's';
+        } else {
+          itemDelay = (items[i].offsetTop / height * transitionDuration) + 's';
+        }
+        items[i].style.transitionDelay = itemDelay;
+      }
+
+      // Apply the initial clip to the text before we start animating.
+      this.applyClip_(height, width);
+
+      // Wait for the next frame, turn on animation, and apply the final clip.
+      // Also make it visible. This triggers the transitions.
+      window.requestAnimationFrame(function() {
+        this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+        this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+        this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+      }.bind(this));
+
+      // Clean up after the animation is complete.
+      this.addAnimationEndListener_();
+
+      // Add a click listener to the document, to close the menu.
+      var callback = function(e) {
+        // Check to see if the document is processing the same event that
+        // displayed the menu in the first place. If so, do nothing.
+        // Also check to see if the menu is in the process of closing itself, and
+        // do nothing in that case.
+        // Also check if the clicked element is a menu item
+        // if so, do nothing.
+        if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
+          document.removeEventListener('click', callback);
+          this.hide();
+        }
+      }.bind(this);
+      document.addEventListener('click', callback);
+    }
+  };
+  MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
+
+  /**
+   * Hides the menu.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.hide = function() {
+    if (this.element_ && this.container_ && this.outline_) {
+      var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+
+      // Remove all transition delays; menu items fade out concurrently.
+      for (var i = 0; i < items.length; i++) {
+        items[i].style.removeProperty('transition-delay');
+      }
+
+      // Measure the inner element.
+      var rect = this.element_.getBoundingClientRect();
+      var height = rect.height;
+      var width = rect.width;
+
+      // Turn on animation, and apply the final clip. Also make invisible.
+      // This triggers the transitions.
+      this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+      this.applyClip_(height, width);
+      this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
+
+      // Clean up after the animation is complete.
+      this.addAnimationEndListener_();
+    }
+  };
+  MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
+
+  /**
+   * Displays or hides the menu, depending on current state.
+   *
+   * @public
+   */
+  MaterialMenu.prototype.toggle = function(evt) {
+    if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+      this.hide();
+    } else {
+      this.show(evt);
+    }
+  };
+  MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialMenu,
+    classAsString: 'MaterialMenu',
+    cssClass: 'mdl-js-menu',
+    widget: true
+  });
+})();

dashboard-ui/bower_components/material-design-lite/src/menu/snippets/codepen-lower-buttons.css

@@ -0,0 +1,3 @@
+#demo-menu-lower-left {
+  margin-left: 40%;
+}

dashboard-ui/bower_components/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;
+}

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>

dashboard-ui/bower_components/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>