| Index: third_party/polymer/components/paper-spinner/paper-spinner-styles.html
|
| diff --git a/third_party/polymer/components/paper-spinner/paper-spinner-styles.html b/third_party/polymer/components/paper-spinner/paper-spinner-styles.html
|
| index e0d2044d1ae35c5264a3491d6a794ad39e9e0c8c..083292937552d2fa79bff5a702ce434e824c7be1 100644
|
| --- a/third_party/polymer/components/paper-spinner/paper-spinner-styles.html
|
| +++ b/third_party/polymer/components/paper-spinner/paper-spinner-styles.html
|
| @@ -25,15 +25,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| * 5 pointed star shape (it's 360/5 * 3).
|
| * For a 7 pointed star, we might do
|
| * 360/7 * 3 = 154.286)
|
| - * CONTAINERWIDTH = 28px
|
| * SHRINK_TIME = 400ms
|
| */
|
|
|
| :host {
|
| display: inline-block;
|
| position: relative;
|
| - width: 28px; /* CONTAINERWIDTH */
|
| - height: 28px; /* CONTAINERWIDTH */
|
| + width: 28px;
|
| + height: 28px;
|
| +
|
| + /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
| + --paper-spinner-container-rotation-duration: 1568ms;
|
| +
|
| + /* ARCTIME */
|
| + --paper-spinner-expand-contract-duration: 1333ms;
|
| +
|
| + /* 4 * ARCTIME */
|
| + --paper-spinner-full-cycle-duration: 5332ms;
|
| +
|
| + /* SHRINK_TIME */
|
| + --paper-spinner-cooldown-duration: 400ms;
|
| }
|
|
|
| #spinnerContainer {
|
| @@ -47,9 +58,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| }
|
|
|
| #spinnerContainer.active {
|
| - /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
| - -webkit-animation: container-rotate 1568ms linear infinite;
|
| - animation: container-rotate 1568ms linear infinite;
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| }
|
|
|
| @-webkit-keyframes container-rotate {
|
| @@ -92,161 +102,129 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| * guarantee that the animation will start _exactly_ after that value. So we avoid using
|
| * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
| * seems).
|
| - *
|
| - * We write out each animation in full (instead of separating animation-name,
|
| - * animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
| - * specific properties properly, treats them as -webkit-animation, and overrides the
|
| - * other animation rules. See https://github.com/Polymer/platform/issues/53.
|
| */
|
| .active .spinner-layer {
|
| - /* durations: 4 * ARCTIME */
|
| - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + -webkit-animation-name: fill-unfill-rotate;
|
| + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + animation-name: fill-unfill-rotate;
|
| + animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation-iteration-count: infinite;
|
| opacity: 1;
|
| }
|
|
|
| .active .spinner-layer.layer-1 {
|
| - /* durations: 4 * ARCTIME */
|
| - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| }
|
|
|
| .active .spinner-layer.layer-2 {
|
| - /* durations: 4 * ARCTIME */
|
| - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| }
|
|
|
| .active .spinner-layer.layer-3 {
|
| - /* durations: 4 * ARCTIME */
|
| - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| }
|
|
|
| .active .spinner-layer.layer-4 {
|
| - /* durations: 4 * ARCTIME */
|
| - -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| }
|
|
|
| @-webkit-keyframes fill-unfill-rotate {
|
| - 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
| - 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
| - 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
| - 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
| - 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
| - 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
| - 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
| - to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
| + 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| + 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| + 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| + 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| + 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| + 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| + 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| + to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| }
|
|
|
| @keyframes fill-unfill-rotate {
|
| - 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
| - 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
| - 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
| - 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
| - 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
| - 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
| - 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
| - to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
| + 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| + 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| + 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| + 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| + 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| + 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| + 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| + to { transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| }
|
|
|
| - /**
|
| - * HACK: Even though the intention is to have the current .spinner-layer 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
|
| - */
|
| @-webkit-keyframes 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; }
|
| + 0% { opacity: 1 }
|
| + 25% { opacity: 1 }
|
| + 26% { opacity: 0 }
|
| + 89% { opacity: 0 }
|
| + 90% { opacity: 1 }
|
| + to { opacity: 1 }
|
| }
|
|
|
| @keyframes 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; }
|
| + 0% { opacity: 1 }
|
| + 25% { opacity: 1 }
|
| + 26% { opacity: 0 }
|
| + 89% { opacity: 0 }
|
| + 90% { opacity: 1 }
|
| + to { opacity: 1 }
|
| }
|
|
|
| @-webkit-keyframes layer-2-fade-in-out {
|
| - from { opacity: 0; }
|
| - 15% { opacity: 0; }
|
| - 25% { opacity: 0.99; }
|
| - 50% { opacity: 0.99; }
|
| - 51% { opacity: 0; }
|
| + 0% { opacity: 0 }
|
| + 15% { opacity: 0 }
|
| + 25% { opacity: 1 }
|
| + 50% { opacity: 1 }
|
| + 51% { opacity: 0 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @keyframes layer-2-fade-in-out {
|
| - from { opacity: 0; }
|
| - 15% { opacity: 0; }
|
| - 25% { opacity: 0.99; }
|
| - 50% { opacity: 0.99; }
|
| - 51% { opacity: 0; }
|
| + 0% { opacity: 0 }
|
| + 15% { opacity: 0 }
|
| + 25% { opacity: 1 }
|
| + 50% { opacity: 1 }
|
| + 51% { opacity: 0 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @-webkit-keyframes layer-3-fade-in-out {
|
| - from { opacity: 0; }
|
| - 40% { opacity: 0; }
|
| - 50% { opacity: 0.99; }
|
| - 75% { opacity: 0.99; }
|
| - 76% { opacity: 0; }
|
| + 0% { opacity: 0 }
|
| + 40% { opacity: 0 }
|
| + 50% { opacity: 1 }
|
| + 75% { opacity: 1 }
|
| + 76% { opacity: 0 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @keyframes layer-3-fade-in-out {
|
| - from { opacity: 0; }
|
| - 40% { opacity: 0; }
|
| - 50% { opacity: 0.99; }
|
| - 75% { opacity: 0.99; }
|
| - 76% { opacity: 0; }
|
| + 0% { opacity: 0 }
|
| + 40% { opacity: 0 }
|
| + 50% { opacity: 1 }
|
| + 75% { opacity: 1 }
|
| + 76% { opacity: 0 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @-webkit-keyframes layer-4-fade-in-out {
|
| - from { opacity: 0; }
|
| - 65% { opacity: 0; }
|
| - 75% { opacity: 0.99; }
|
| - 90% { opacity: 0.99; }
|
| - 100% { opacity: 0; }
|
| + 0% { opacity: 0 }
|
| + 65% { opacity: 0 }
|
| + 75% { opacity: 1 }
|
| + 90% { opacity: 1 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @keyframes 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.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 .spinner-layer's opacity is 0.99,
|
| - * but still does on Safari and IE.
|
| - */
|
| - .gap-patch {
|
| - position: absolute;
|
| - box-sizing: border-box;
|
| - top: 0;
|
| - left: 45%;
|
| - width: 10%;
|
| - height: 100%;
|
| - overflow: hidden;
|
| - border-color: inherit;
|
| - }
|
| -
|
| - .gap-patch .circle {
|
| - width: 1000%;
|
| - left: -450%;
|
| + 0% { opacity: 0 }
|
| + 65% { opacity: 0 }
|
| + 75% { opacity: 1 }
|
| + 90% { opacity: 1 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| .circle-clipper {
|
| @@ -258,87 +236,105 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| border-color: inherit;
|
| }
|
|
|
| - .circle-clipper .circle {
|
| - width: 200%;
|
| + /**
|
| + * Patch the gap that appear between the two adjacent div.circle-clipper while the
|
| + * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
|
| + */
|
| + .spinner-layer::after {
|
| + left: 45%;
|
| + width: 10%;
|
| + border-top-style: solid;
|
| }
|
|
|
| - .circle {
|
| + .spinner-layer::after,
|
| + .circle-clipper::after {
|
| + content: '';
|
| box-sizing: border-box;
|
| - height: 100%;
|
| - border-width: var(--paper-spinner-stroke-width, 3px); /* STROKEWIDTH */
|
| - border-style: solid;
|
| + position: absolute;
|
| + top: 0;
|
| + border-width: var(--paper-spinner-stroke-width, 3px);
|
| border-color: inherit;
|
| - border-bottom-color: transparent !important;
|
| border-radius: 50%;
|
| - -webkit-animation: none;
|
| - animation: none;
|
| + }
|
|
|
| - @apply(--layout-fit);
|
| + .circle-clipper::after {
|
| + bottom: 0;
|
| + width: 200%;
|
| + border-style: solid;
|
| + border-bottom-color: transparent !important;
|
| }
|
|
|
| - .circle-clipper.left .circle {
|
| + .circle-clipper.left::after {
|
| + left: 0;
|
| border-right-color: transparent !important;
|
| -webkit-transform: rotate(129deg);
|
| transform: rotate(129deg);
|
| }
|
|
|
| - .circle-clipper.right .circle {
|
| + .circle-clipper.right::after {
|
| left: -100%;
|
| border-left-color: transparent !important;
|
| -webkit-transform: rotate(-129deg);
|
| transform: rotate(-129deg);
|
| }
|
|
|
| - .active .circle-clipper.left .circle {
|
| - /* duration: ARCTIME */
|
| - -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + .active .gap-patch::after,
|
| + .active .circle-clipper::after {
|
| + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + animation-duration: var(--paper-spinner-expand-contract-duration);
|
| + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation-iteration-count: infinite;
|
| + }
|
| +
|
| + .active .circle-clipper.left::after {
|
| + -webkit-animation-name: left-spin;
|
| + animation-name: left-spin;
|
| }
|
|
|
| - .active .circle-clipper.right .circle {
|
| - /* duration: ARCTIME */
|
| - -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| - animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
| + .active .circle-clipper.right::after {
|
| + -webkit-animation-name: right-spin;
|
| + animation-name: right-spin;
|
| }
|
|
|
| @-webkit-keyframes left-spin {
|
| - from { -webkit-transform: rotate(130deg); }
|
| - 50% { -webkit-transform: rotate(-5deg); }
|
| - to { -webkit-transform: rotate(130deg); }
|
| + 0% { -webkit-transform: rotate(130deg) }
|
| + 50% { -webkit-transform: rotate(-5deg) }
|
| + to { -webkit-transform: rotate(130deg) }
|
| }
|
|
|
| @keyframes left-spin {
|
| - from { transform: rotate(130deg); }
|
| - 50% { transform: rotate(-5deg); }
|
| - to { transform: rotate(130deg); }
|
| + 0% { transform: rotate(130deg) }
|
| + 50% { transform: rotate(-5deg) }
|
| + to { transform: rotate(130deg) }
|
| }
|
|
|
| @-webkit-keyframes right-spin {
|
| - from { -webkit-transform: rotate(-130deg); }
|
| - 50% { -webkit-transform: rotate(5deg); }
|
| - to { -webkit-transform: rotate(-130deg); }
|
| + 0% { -webkit-transform: rotate(-130deg) }
|
| + 50% { -webkit-transform: rotate(5deg) }
|
| + to { -webkit-transform: rotate(-130deg) }
|
| }
|
|
|
| @keyframes right-spin {
|
| - from { transform: rotate(-130deg); }
|
| - 50% { transform: rotate(5deg); }
|
| - to { transform: rotate(-130deg); }
|
| + 0% { transform: rotate(-130deg) }
|
| + 50% { transform: rotate(5deg) }
|
| + to { transform: rotate(-130deg) }
|
| }
|
|
|
| #spinnerContainer.cooldown {
|
| - /* duration: SHRINK_TIME */
|
| - -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
| - animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| }
|
|
|
| @-webkit-keyframes fade-out {
|
| - from { opacity: 0.99; }
|
| - to { opacity: 0; }
|
| + 0% { opacity: 1 }
|
| + to { opacity: 0 }
|
| }
|
|
|
| @keyframes fade-out {
|
| - from { opacity: 0.99; }
|
| - to { opacity: 0; }
|
| + 0% { opacity: 1 }
|
| + to { opacity: 0 }
|
| }
|
| </style>
|
| </template>
|
|
|
Chromium Code Reviews
Issue 2113853002:
Run bower update (Closed)
Base URL: https://github.com/catapult-project/catapult@polymer10-migration