update shared components

dashboard-ui/bower_components/material-design-lite/src/spinner/_spinner.scss

@@ -0,0 +1,248 @@
+/**
+ * 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";
+
+
+.mdl-spinner {
+  display: inline-block;
+  position: relative;
+  width: $spinner-size;
+  height: $spinner-size;
+
+  &:not(.is-upgraded).is-active:after {
+    content: "Loading...";
+  }
+
+  &.is-upgraded.is-active {
+    animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
+  }
+}
+
+@keyframes mdl-spinner__container-rotate {
+  to { transform: rotate(360deg) }
+}
+
+.mdl-spinner__layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.mdl-spinner__layer-1 {
+  border-color: $spinner-color-1;
+
+  .mdl-spinner--single-color & {
+    border-color: $spinner-single-color;
+  }
+
+  .mdl-spinner.is-active & {
+    animation:
+        mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both,
+        mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both;
+  }
+}
+
+.mdl-spinner__layer-2 {
+  border-color: $spinner-color-2;
+
+  .mdl-spinner--single-color & {
+    border-color: $spinner-single-color;
+  }
+
+  .mdl-spinner.is-active & {
+    animation:
+        mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both,
+        mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both;
+  }
+}
+
+.mdl-spinner__layer-3 {
+  border-color: $spinner-color-3;
+
+  .mdl-spinner--single-color & {
+    border-color: $spinner-single-color;
+  }
+
+  .mdl-spinner.is-active & {
+    animation:
+        mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both,
+        mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both;
+  }
+}
+
+.mdl-spinner__layer-4 {
+  border-color: $spinner-color-4;
+
+  .mdl-spinner--single-color & {
+    border-color: $spinner-single-color;
+  }
+
+  .mdl-spinner.is-active & {
+    animation:
+        mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both,
+        mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
+            $animation-curve-fast-out-slow-in infinite both;
+  }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+  12.5% { transform: rotate(0.5 * $spinner-arc-size);  }
+  25%   { transform: rotate($spinner-arc-size);  }
+  37.5% { transform: rotate(1.5 * $spinner-arc-size);  }
+  50%   { transform: rotate(2 * $spinner-arc-size);  }
+  62.5% { transform: rotate(2.5 * $spinner-arc-size);  }
+  75%   { transform: rotate(3 * $spinner-arc-size);  }
+  87.5% { transform: rotate(3.5 * $spinner-arc-size); }
+  to    { transform: rotate(4 * $spinner-arc-size); }
+}
+
+/**
+* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
+* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+* to do proper subpixel rendering for the elements being animated. This is
+* especially visible in Chrome 39 on Ubuntu 14.04. See:
+*
+* - https://github.com/Polymer/paper-spinner/issues/9
+* - https://code.google.com/p/chromium/issues/detail?id=436255
+*/
+@keyframes mdl-spinner__layer-1-fade-in-out {
+  from { opacity: 0.99; }
+  25% { opacity: 0.99; }
+  26% { opacity: 0; }
+  89% { opacity: 0; }
+  90% { opacity: 0.99; }
+  100% { opacity: 0.99; }
+}
+
+@keyframes mdl-spinner__layer-2-fade-in-out {
+  from { opacity: 0; }
+  15% { opacity: 0; }
+  25% { opacity: 0.99; }
+  50% { opacity: 0.99; }
+  51% { opacity: 0; }
+}
+
+@keyframes mdl-spinner__layer-3-fade-in-out {
+  from { opacity: 0; }
+  40% { opacity: 0; }
+  50% { opacity: 0.99; }
+  75% { opacity: 0.99; }
+  76% { opacity: 0; }
+}
+
+@keyframes mdl-spinner__layer-4-fade-in-out {
+  from { opacity: 0; }
+  65% { opacity: 0; }
+  75% { opacity: 0.99; }
+  90% { opacity: 0.99; }
+  100% { opacity: 0; }
+}
+
+/**
+* Patch the gap that appear between the two adjacent
+* div.mdl-spinner__circle-clipper while the spinner is rotating
+* (appears on Chrome 38, Safari 7.1, and IE 11).
+*
+* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
+* opacity is 0.99, but still does on Safari and IE.
+*/
+.mdl-spinner__gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+
+  & .mdl-spinner__circle {
+    width: 1000%;
+    left: -450%;
+  }
+}
+
+.mdl-spinner__circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+
+  & .mdl-spinner__circle {
+    width: 200%;
+  }
+}
+
+.mdl-spinner__circle {
+  box-sizing: border-box;
+  height: 100%;
+  border-width: $spinner-stroke-width;
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+  animation: none;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  .mdl-spinner__left & {
+    border-right-color: transparent !important;
+    transform: rotate(129deg);
+
+    .mdl-spinner.is-active & {
+      animation: mdl-spinner__left-spin $spinner-arc-time
+          $animation-curve-fast-out-slow-in infinite both;
+    }
+  }
+
+  .mdl-spinner__right & {
+    left: -100%;
+    border-left-color: transparent !important;
+    transform: rotate(-129deg);
+
+    .mdl-spinner.is-active & {
+      animation: mdl-spinner__right-spin $spinner-arc-time
+          $animation-curve-fast-out-slow-in infinite both;
+    }
+  }
+}
+
+@keyframes mdl-spinner__left-spin {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@keyframes mdl-spinner__right-spin {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}

dashboard-ui/bower_components/material-design-lite/src/spinner/snippets/spinner-default.html

@@ -0,0 +1,2 @@
+<!-- MDL Spinner Component -->
+<div class="mdl-spinner mdl-js-spinner is-active"></div>

dashboard-ui/bower_components/material-design-lite/src/spinner/snippets/spinner-single-color.html

@@ -0,0 +1,2 @@
+<!-- MDL Spinner Component with Single Color -->
+<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

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

@@ -0,0 +1,147 @@
+/**
+ * @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 Spinner MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   * @constructor
+   */
+  var MaterialSpinner = function MaterialSpinner(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialSpinner'] = MaterialSpinner;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+  MaterialSpinner.prototype.Constant_ = {
+    MDL_SPINNER_LAYER_COUNT: 4
+  };
+
+  /**
+   * 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
+   */
+  MaterialSpinner.prototype.CssClasses_ = {
+    MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+    MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+    MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+    MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+    MDL_SPINNER_LEFT: 'mdl-spinner__left',
+    MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+  };
+
+  /**
+   * Auxiliary method to create a spinner layer.
+   *
+   * @param {number} index Index of the layer to be created.
+   * @public
+   */
+  MaterialSpinner.prototype.createLayer = function(index) {
+    var layer = document.createElement('div');
+    layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+    layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+
+    var leftClipper = document.createElement('div');
+    leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+    leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+
+    var gapPatch = document.createElement('div');
+    gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+
+    var rightClipper = document.createElement('div');
+    rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+    rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+
+    var circleOwners = [leftClipper, gapPatch, rightClipper];
+
+    for (var i = 0; i < circleOwners.length; i++) {
+      var circle = document.createElement('div');
+      circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+      circleOwners[i].appendChild(circle);
+    }
+
+    layer.appendChild(leftClipper);
+    layer.appendChild(gapPatch);
+    layer.appendChild(rightClipper);
+
+    this.element_.appendChild(layer);
+  };
+  MaterialSpinner.prototype['createLayer'] =
+      MaterialSpinner.prototype.createLayer;
+
+  /**
+   * Stops the spinner animation.
+   * Public method for users who need to stop the spinner for any reason.
+   *
+   * @public
+   */
+  MaterialSpinner.prototype.stop = function() {
+    this.element_.classList.remove('is-active');
+  };
+  MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+
+  /**
+   * Starts the spinner animation.
+   * Public method for users who need to manually start the spinner for any reason
+   * (instead of just adding the 'is-active' class to their markup).
+   *
+   * @public
+   */
+  MaterialSpinner.prototype.start = function() {
+    this.element_.classList.add('is-active');
+  };
+  MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+
+  /**
+   * Initialize element.
+   */
+  MaterialSpinner.prototype.init = function() {
+    if (this.element_) {
+      for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+        this.createLayer(i);
+      }
+
+      this.element_.classList.add('is-upgraded');
+    }
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialSpinner,
+    classAsString: 'MaterialSpinner',
+    cssClass: 'mdl-js-spinner',
+    widget: true
+  });
+})();