third_party/ot-br-posix/repo/third_party/mdl/repo/src/spinner/_spinner.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 @import "../variables";
  18
  19
  20 .mdl-spinner {
  21   display: inline-block;
  22   position: relative;
  23   width: $spinner-size;
  24   height: $spinner-size;
  25
  26   &:not(.is-upgraded).is-active:after {
  27     content: "Loading...";
  28   }
  29
  30   &.is-upgraded.is-active {
  31     animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
  32   }
  33 }
  34
  35 @keyframes mdl-spinner__container-rotate {
  36   to { transform: rotate(360deg) }
  37 }
  38
  39 .mdl-spinner__layer {
  40   position: absolute;
  41   width: 100%;
  42   height: 100%;
  43   opacity: 0;
  44 }
  45
  46 .mdl-spinner__layer-1 {
  47   border-color: $spinner-color-1;
  48
  49   .mdl-spinner--single-color & {
  50     border-color: $spinner-single-color;
  51   }
  52
  53   .mdl-spinner.is-active & {
  54     animation:
  55         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
  56             $animation-curve-fast-out-slow-in infinite both,
  57         mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
  58             $animation-curve-fast-out-slow-in infinite both;
  59   }
  60 }
  61
  62 .mdl-spinner__layer-2 {
  63   border-color: $spinner-color-2;
  64
  65   .mdl-spinner--single-color & {
  66     border-color: $spinner-single-color;
  67   }
  68
  69   .mdl-spinner.is-active & {
  70     animation:
  71         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
  72             $animation-curve-fast-out-slow-in infinite both,
  73         mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
  74             $animation-curve-fast-out-slow-in infinite both;
  75   }
  76 }
  77
  78 .mdl-spinner__layer-3 {
  79   border-color: $spinner-color-3;
  80
  81   .mdl-spinner--single-color & {
  82     border-color: $spinner-single-color;
  83   }
  84
  85   .mdl-spinner.is-active & {
  86     animation:
  87         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
  88             $animation-curve-fast-out-slow-in infinite both,
  89         mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
  90             $animation-curve-fast-out-slow-in infinite both;
  91   }
  92 }
  93
  94 .mdl-spinner__layer-4 {
  95   border-color: $spinner-color-4;
  96
  97   .mdl-spinner--single-color & {
  98     border-color: $spinner-single-color;
  99   }
 100
 101   .mdl-spinner.is-active & {
 102     animation:
 103         mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
 104             $animation-curve-fast-out-slow-in infinite both,
 105         mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
 106             $animation-curve-fast-out-slow-in infinite both;
 107   }
 108 }
 109
 110 @keyframes mdl-spinner__fill-unfill-rotate {
 111   12.5% { transform: rotate(0.5 * $spinner-arc-size);  }
 112   25%   { transform: rotate($spinner-arc-size);  }
 113   37.5% { transform: rotate(1.5 * $spinner-arc-size);  }
 114   50%   { transform: rotate(2 * $spinner-arc-size);  }
 115   62.5% { transform: rotate(2.5 * $spinner-arc-size);  }
 116   75%   { transform: rotate(3 * $spinner-arc-size);  }
 117   87.5% { transform: rotate(3.5 * $spinner-arc-size); }
 118   to    { transform: rotate(4 * $spinner-arc-size); }
 119 }
 120
 121 /**
 122 * HACK: Even though the intention is to have the current .mdl-spinner__layer-N
 123 * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
 124 * to do proper subpixel rendering for the elements being animated. This is
 125 * especially visible in Chrome 39 on Ubuntu 14.04. See:
 126 *
 127 * - https://github.com/Polymer/paper-spinner/issues/9
 128 * - https://code.google.com/p/chromium/issues/detail?id=436255
 129 */
 130 @keyframes mdl-spinner__layer-1-fade-in-out {
 131   from { opacity: 0.99; }
 132   25% { opacity: 0.99; }
 133   26% { opacity: 0; }
 134   89% { opacity: 0; }
 135   90% { opacity: 0.99; }
 136   100% { opacity: 0.99; }
 137 }
 138
 139 @keyframes mdl-spinner__layer-2-fade-in-out {
 140   from { opacity: 0; }
 141   15% { opacity: 0; }
 142   25% { opacity: 0.99; }
 143   50% { opacity: 0.99; }
 144   51% { opacity: 0; }
 145 }
 146
 147 @keyframes mdl-spinner__layer-3-fade-in-out {
 148   from { opacity: 0; }
 149   40% { opacity: 0; }
 150   50% { opacity: 0.99; }
 151   75% { opacity: 0.99; }
 152   76% { opacity: 0; }
 153 }
 154
 155 @keyframes mdl-spinner__layer-4-fade-in-out {
 156   from { opacity: 0; }
 157   65% { opacity: 0; }
 158   75% { opacity: 0.99; }
 159   90% { opacity: 0.99; }
 160   100% { opacity: 0; }
 161 }
 162
 163 /**
 164 * Patch the gap that appear between the two adjacent
 165 * div.mdl-spinner__circle-clipper while the spinner is rotating
 166 * (appears on Chrome 38, Safari 7.1, and IE 11).
 167 *
 168 * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
 169 * opacity is 0.99, but still does on Safari and IE.
 170 */
 171 .mdl-spinner__gap-patch {
 172   position: absolute;
 173   box-sizing: border-box;
 174   top: 0;
 175   left: 45%;
 176   width: 10%;
 177   height: 100%;
 178   overflow: hidden;
 179   border-color: inherit;
 180
 181   & .mdl-spinner__circle {
 182     width: 1000%;
 183     left: -450%;
 184   }
 185 }
 186
 187 .mdl-spinner__circle-clipper {
 188   display: inline-block;
 189   position: relative;
 190   width: 50%;
 191   height: 100%;
 192   overflow: hidden;
 193   border-color: inherit;
 194
 195   &.mdl-spinner__left {
 196     float: left;
 197   }
 198
 199   &.mdl-spinner__right {
 200     float: right;
 201   }
 202
 203   & .mdl-spinner__circle {
 204     width: 200%;
 205   }
 206 }
 207
 208 .mdl-spinner__circle {
 209   box-sizing: border-box;
 210   height: 100%;
 211   border-width: $spinner-stroke-width;
 212   border-style: solid;
 213   border-color: inherit;
 214   border-bottom-color: transparent !important;
 215   border-radius: 50%;
 216   animation: none;
 217
 218   position: absolute;
 219   top: 0;
 220   right: 0;
 221   bottom: 0;
 222   left: 0;
 223
 224   .mdl-spinner__left & {
 225     border-right-color: transparent !important;
 226     transform: rotate(129deg);
 227
 228     .mdl-spinner.is-active & {
 229       animation: mdl-spinner__left-spin $spinner-arc-time
 230           $animation-curve-fast-out-slow-in infinite both;
 231     }
 232   }
 233
 234   .mdl-spinner__right & {
 235     left: -100%;
 236     border-left-color: transparent !important;
 237     transform: rotate(-129deg);
 238
 239     .mdl-spinner.is-active & {
 240       animation: mdl-spinner__right-spin $spinner-arc-time
 241           $animation-curve-fast-out-slow-in infinite both;
 242     }
 243   }
 244 }
 245
 246 @keyframes mdl-spinner__left-spin {
 247   from { transform: rotate(130deg); }
 248   50% { transform: rotate(-5deg); }
 249   to { transform: rotate(130deg); }
 250 }
 251
 252 @keyframes mdl-spinner__right-spin {
 253   from { transform: rotate(-130deg); }
 254   50% { transform: rotate(5deg); }
 255   to { transform: rotate(-130deg); }
 256 }