liquid_feedback_frontend

annotate style/mdl/spinner/_spinner.scss @ 1641:ab837b075cf7

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

Impressum / About Us