material_design_lite-sass 1.0.1

data/vendor/assets/stylesheets/material/_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); }
+}

data/vendor/assets/stylesheets/material/_switch.scss

@@ -0,0 +1,199 @@
+/**
+ * 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-switch {
+  position: relative;
+
+  z-index: 1;
+
+  vertical-align: middle;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: $switch-label-height;
+  margin: 0;
+  padding: 0;
+
+  overflow: visible;
+
+  &.is-upgraded {
+    padding-left: $switch-track-length - 8px;
+  }
+
+  // avoids blue box around switch
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.mdl-switch__input {
+  line-height: $switch-label-height;
+
+  .mdl-switch.is-upgraded & {
+    // Hide input element, while still making it respond to focus.
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+  }
+}
+
+.mdl-switch__track {
+  background: $switch-off-track-color;
+  position: absolute;
+  left: 0;
+  top: $switch-track-top;
+  height: $switch-track-height;
+  width: $switch-track-length;
+  border-radius: $switch-track-height;
+
+  cursor: pointer;
+
+  .mdl-switch.is-checked & {
+    background: $switch-track-color;
+  }
+
+  .mdl-switch.is-disabled & {
+    background: $switch-disabled-track-color;
+    cursor: auto;
+  }
+}
+
+.mdl-switch__thumb {
+  background: $switch-off-thumb-color;
+  position: absolute;
+  left: 0;
+  top: $switch-thumb-top;
+  height: $switch-thumb-size;
+  width: $switch-thumb-size;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  @include shadow-2dp();
+
+  @include material-animation-default(0.28s);
+  transition-property: left;
+
+  .mdl-switch.is-checked & {
+    background: $switch-thumb-color;
+    left: $switch-track-length - $switch-thumb-size;
+
+    @include shadow-3dp();
+  }
+
+  .mdl-switch.is-disabled & {
+    background: $switch-disabled-thumb-color;
+    cursor: auto;
+  }
+}
+
+.mdl-switch__focus-helper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-$switch-helper-size / 2, -$switch-helper-size / 2);
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  width: $switch-helper-size;
+  height: $switch-helper-size;
+  border-radius: 50%;
+
+  background-color: transparent;
+
+  .mdl-switch.is-focused & {
+    box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
+        rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .mdl-switch.is-focused.is-checked & {
+    box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
+        $switch-faded-color;
+    background-color: $switch-faded-color;
+  }
+}
+
+.mdl-switch__label {
+  position: relative;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: $switch-label-height;
+  margin: 0;
+  left: 24px;
+
+  .mdl-switch.is-disabled & {
+    color: $switch-disabled-thumb-color;
+    cursor: auto;
+  }
+}
+
+.mdl-switch__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -($switch-ripple-size - $switch-label-height) / 2;
+  left: $switch-thumb-size / 2 - $switch-ripple-size / 2;
+
+  box-sizing: border-box;
+  width: $switch-ripple-size;
+  height: $switch-ripple-size;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+
+  transition-duration: 0.40s;
+  transition-timing-function: step-end;
+  transition-property: left;
+
+  & .mdl-ripple {
+    background: $switch-color;
+  }
+
+  .mdl-switch.is-disabled & {
+    cursor: auto;
+  }
+
+  .mdl-switch.is-disabled & .mdl-ripple {
+    background: transparent;
+  }
+
+  .mdl-switch.is-checked & {
+    cursor: auto;
+    left: $switch-track-length - $switch-ripple-size / 2 -
+        $switch-thumb-size / 2;
+  }
+}

data/vendor/assets/stylesheets/material/_tabs.scss

@@ -0,0 +1,115 @@
+/**
+ * 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-tabs {
+  display: block;
+  width: 100%;
+}
+
+.mdl-tabs__tab-bar {
+    display         : flex;
+    flex-direction  : row;
+    justify-content : center; // ⇾
+    align-content   : space-between; // ||
+    align-items     : flex-start; // ↓
+
+    height          : 48px;
+    padding         : 0 0 0 0;
+    margin          : 0;
+    border-bottom   : 1px solid $tab-border-color;
+}
+
+.mdl-tabs__tab {
+  margin: 0;
+  border: none;
+  padding: 0 24px 0 24px;
+
+  float: left;
+  position: relative;
+  display: block;
+
+  color: red;
+  text-decoration: none;
+  height: 48px;
+  line-height: 48px;
+
+  text-align: center;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+
+  color: $tab-text-color;
+  overflow: hidden;
+
+  .mdl-tabs.is-upgraded &.is-active {
+    color: $tab-active-text-color;
+  }
+
+  .mdl-tabs.is-upgraded &.is-active:after {
+    height: 2px;
+    width: 100%;
+    display: block;
+    content: " ";
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    background: $tab-highlight-color;
+    animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+    transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+  }
+
+  & .mdl-tabs__ripple-container {
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0px;
+    top: 0px;
+    z-index: 1;
+    overflow: hidden;
+
+    & .mdl-ripple {
+      background: $tab-highlight-color;
+    }
+  }
+}
+
+.mdl-tabs__panel {
+  display: block;
+
+  .mdl-tabs.is-upgraded & {
+    display: none;
+  }
+
+  .mdl-tabs.is-upgraded &.is-active {
+    display: block;
+  }
+}
+
+@keyframes border-expand {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+
+  100% {
+    opacity: 1;
+    width: 100%;
+  }
+}