bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner {
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   width: $spinner-size;
bsw/jbe@1309:   height: $spinner-size;
bsw/jbe@1309: 
bsw/jbe@1309:   &:not(.is-upgraded).is-active:after {
bsw/jbe@1309:     content: "Loading...";
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-upgraded.is-active {
bsw/jbe@1309:     animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__container-rotate {
bsw/jbe@1309:   to { transform: rotate(360deg) }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__layer {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   opacity: 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__layer-1 {
bsw/jbe@1309:   border-color: $spinner-color-1;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner--single-color & {
bsw/jbe@1309:     border-color: $spinner-single-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner.is-active & {
bsw/jbe@1309:     animation:
bsw/jbe@1309:         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both,
bsw/jbe@1309:         mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__layer-2 {
bsw/jbe@1309:   border-color: $spinner-color-2;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner--single-color & {
bsw/jbe@1309:     border-color: $spinner-single-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner.is-active & {
bsw/jbe@1309:     animation:
bsw/jbe@1309:         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both,
bsw/jbe@1309:         mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__layer-3 {
bsw/jbe@1309:   border-color: $spinner-color-3;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner--single-color & {
bsw/jbe@1309:     border-color: $spinner-single-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner.is-active & {
bsw/jbe@1309:     animation:
bsw/jbe@1309:         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both,
bsw/jbe@1309:         mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__layer-4 {
bsw/jbe@1309:   border-color: $spinner-color-4;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner--single-color & {
bsw/jbe@1309:     border-color: $spinner-single-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner.is-active & {
bsw/jbe@1309:     animation:
bsw/jbe@1309:         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both,
bsw/jbe@1309:         mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
bsw/jbe@1309:             $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__fill-unfill-rotate {
bsw/jbe@1309:   12.5% { transform: rotate(0.5 * $spinner-arc-size);  }
bsw/jbe@1309:   25%   { transform: rotate($spinner-arc-size);  }
bsw/jbe@1309:   37.5% { transform: rotate(1.5 * $spinner-arc-size);  }
bsw/jbe@1309:   50%   { transform: rotate(2 * $spinner-arc-size);  }
bsw/jbe@1309:   62.5% { transform: rotate(2.5 * $spinner-arc-size);  }
bsw/jbe@1309:   75%   { transform: rotate(3 * $spinner-arc-size);  }
bsw/jbe@1309:   87.5% { transform: rotate(3.5 * $spinner-arc-size); }
bsw/jbe@1309:   to    { transform: rotate(4 * $spinner-arc-size); }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /**
bsw/jbe@1309: * HACK: Even though the intention is to have the current .mdl-spinner__layer-N
bsw/jbe@1309: * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
bsw/jbe@1309: * to do proper subpixel rendering for the elements being animated. This is
bsw/jbe@1309: * especially visible in Chrome 39 on Ubuntu 14.04. See:
bsw/jbe@1309: *
bsw/jbe@1309: * - https://github.com/Polymer/paper-spinner/issues/9
bsw/jbe@1309: * - https://code.google.com/p/chromium/issues/detail?id=436255
bsw/jbe@1309: */
bsw/jbe@1309: @keyframes mdl-spinner__layer-1-fade-in-out {
bsw/jbe@1309:   from { opacity: 0.99; }
bsw/jbe@1309:   25% { opacity: 0.99; }
bsw/jbe@1309:   26% { opacity: 0; }
bsw/jbe@1309:   89% { opacity: 0; }
bsw/jbe@1309:   90% { opacity: 0.99; }
bsw/jbe@1309:   100% { opacity: 0.99; }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__layer-2-fade-in-out {
bsw/jbe@1309:   from { opacity: 0; }
bsw/jbe@1309:   15% { opacity: 0; }
bsw/jbe@1309:   25% { opacity: 0.99; }
bsw/jbe@1309:   50% { opacity: 0.99; }
bsw/jbe@1309:   51% { opacity: 0; }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__layer-3-fade-in-out {
bsw/jbe@1309:   from { opacity: 0; }
bsw/jbe@1309:   40% { opacity: 0; }
bsw/jbe@1309:   50% { opacity: 0.99; }
bsw/jbe@1309:   75% { opacity: 0.99; }
bsw/jbe@1309:   76% { opacity: 0; }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__layer-4-fade-in-out {
bsw/jbe@1309:   from { opacity: 0; }
bsw/jbe@1309:   65% { opacity: 0; }
bsw/jbe@1309:   75% { opacity: 0.99; }
bsw/jbe@1309:   90% { opacity: 0.99; }
bsw/jbe@1309:   100% { opacity: 0; }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /**
bsw/jbe@1309: * Patch the gap that appear between the two adjacent
bsw/jbe@1309: * div.mdl-spinner__circle-clipper while the spinner is rotating
bsw/jbe@1309: * (appears on Chrome 38, Safari 7.1, and IE 11).
bsw/jbe@1309: *
bsw/jbe@1309: * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
bsw/jbe@1309: * opacity is 0.99, but still does on Safari and IE.
bsw/jbe@1309: */
bsw/jbe@1309: .mdl-spinner__gap-patch {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   top: 0;
bsw/jbe@1309:   left: 45%;
bsw/jbe@1309:   width: 10%;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309:   border-color: inherit;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-spinner__circle {
bsw/jbe@1309:     width: 1000%;
bsw/jbe@1309:     left: -450%;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__circle-clipper {
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   width: 50%;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309:   border-color: inherit;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-spinner__circle {
bsw/jbe@1309:     width: 200%;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-spinner__circle {
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   border-width: $spinner-stroke-width;
bsw/jbe@1309:   border-style: solid;
bsw/jbe@1309:   border-color: inherit;
bsw/jbe@1309:   border-bottom-color: transparent !important;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309:   animation: none;
bsw/jbe@1309: 
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: 0;
bsw/jbe@1309:   right: 0;
bsw/jbe@1309:   bottom: 0;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner__left & {
bsw/jbe@1309:     border-right-color: transparent !important;
bsw/jbe@1309:     transform: rotate(129deg);
bsw/jbe@1309: 
bsw/jbe@1309:     .mdl-spinner.is-active & {
bsw/jbe@1309:       animation: mdl-spinner__left-spin $spinner-arc-time
bsw/jbe@1309:           $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-spinner__right & {
bsw/jbe@1309:     left: -100%;
bsw/jbe@1309:     border-left-color: transparent !important;
bsw/jbe@1309:     transform: rotate(-129deg);
bsw/jbe@1309: 
bsw/jbe@1309:     .mdl-spinner.is-active & {
bsw/jbe@1309:       animation: mdl-spinner__right-spin $spinner-arc-time
bsw/jbe@1309:           $animation-curve-fast-out-slow-in infinite both;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__left-spin {
bsw/jbe@1309:   from { transform: rotate(130deg); }
bsw/jbe@1309:   50% { transform: rotate(-5deg); }
bsw/jbe@1309:   to { transform: rotate(130deg); }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @keyframes mdl-spinner__right-spin {
bsw/jbe@1309:   from { transform: rotate(-130deg); }
bsw/jbe@1309:   50% { transform: rotate(5deg); }
bsw/jbe@1309:   to { transform: rotate(-130deg); }
bsw/jbe@1309: }