@salesforcedevs/dx-components 0.10.0 → 0.10.1-alpha.100

package/src/modules/dx/spinner/spinner.css

@@ -0,0 +1,750 @@
+/* Code extracted and adapted from Lightning Design System 2.16.2 */
+
+:host(.spinner_container) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9050;
+    background-color: rgba(255, 255, 255, 0.75);
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease, visibility 0s;
+    transition: opacity 0.2s ease, visibility 0s;
+    -webkit-transition-delay: 0s, 0.3s;
+    transition-delay: 0s, 0.3s;
+}
+
+.spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 9051;
+    -webkit-transform: translate(-50%, -50%) rotate(90deg);
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.spinner,
+.spinner_dot-a,
+.spinner_dot-b {
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    will-change: transform;
+}
+
+.spinner_dot-a,
+.spinner_dot-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.spinner::before,
+.spinner::after,
+.spinner_dot-a::before,
+.spinner_dot-b::before,
+.spinner_dot-a::after,
+.spinner_dot-b::after {
+    content: "";
+    position: absolute;
+    background: #b0adab;
+    border-radius: 50%;
+    -webkit-animation-duration: 1000ms;
+    animation-duration: 1000ms;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.spinner_dot-a {
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+}
+
+.spinner_dot-b {
+    -webkit-transform: rotate(120deg);
+    transform: rotate(120deg);
+}
+
+.spinner::before {
+    -webkit-animation-delay: -83.33333ms;
+    animation-delay: -83.33333ms;
+}
+
+.spinner_dot-a::before {
+    -webkit-animation-delay: 83.33333ms;
+    animation-delay: 83.33333ms;
+}
+
+.spinner_dot-b::before {
+    -webkit-animation-delay: 250ms;
+    animation-delay: 250ms;
+}
+
+.spinner::after {
+    -webkit-animation-delay: 416.66667ms;
+    animation-delay: 416.66667ms;
+}
+
+.spinner_dot-a::after {
+    -webkit-animation-delay: 583.33333ms;
+    animation-delay: 583.33333ms;
+}
+
+.spinner_dot-b::after {
+    -webkit-animation-delay: 750ms;
+    animation-delay: 750ms;
+}
+
+.spinner_brand.spinner::before,
+.spinner_brand.spinner::after,
+.spinner_brand .spinner_dot-a::before,
+.spinner_brand .spinner_dot-b::before,
+.spinner_brand .spinner_dot-a::after,
+.spinner_brand .spinner_dot-b::after {
+    background-color: #1b96ff;
+}
+
+.spinner_inverse.spinner::before,
+.spinner_inverse.spinner::after,
+.spinner_inverse .spinner_dot-a::before,
+.spinner_inverse .spinner_dot-b::before,
+.spinner_inverse .spinner_dot-a::after,
+.spinner_inverse .spinner_dot-b::after {
+    background-color: white;
+}
+
+.spinner_x-small.spinner::before,
+.spinner_x-small.spinner::after,
+.spinner_x-small .spinner_dot-a::before,
+.spinner_x-small .spinner_dot-b::before,
+.spinner_x-small .spinner_dot-a::after,
+.spinner_x-small .spinner_dot-b::after {
+    width: 0.25rem;
+    height: 0.25rem;
+}
+
+.spinner_x-small.spinner::before,
+.spinner_x-small .spinner_dot-a::before,
+.spinner_x-small .spinner_dot-b::before {
+    top: -0.125rem;
+    left: -0.125rem;
+    -webkit-animation-name: dotsbouncebefore-extrasmall;
+    animation-name: dotsbouncebefore-extrasmall;
+}
+
+.spinner_x-small.spinner::after,
+.spinner_x-small .spinner_dot-a::after,
+.spinner_x-small .spinner_dot-b::after {
+    top: -0.125rem;
+    right: -0.125rem;
+    -webkit-animation-name: dotsbounceafter-extrasmall;
+    animation-name: dotsbounceafter-extrasmall;
+}
+
+.spinner_x-small {
+    width: 1rem;
+}
+
+.spinner_x-small.spinner_inline {
+    height: 1rem;
+}
+
+@-webkit-keyframes dotsbouncebefore-extrasmall {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.25rem, 0, 0);
+        transform: translate3d(-0.25rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes dotsbouncebefore-extrasmall {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.25rem, 0, 0);
+        transform: translate3d(-0.25rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes dotsbounceafter-extrasmall {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.25rem, 0, 0);
+        transform: translate3d(0.25rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes dotsbounceafter-extrasmall {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.25rem, 0, 0);
+        transform: translate3d(0.25rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.spinner_small {
+    width: 1.25rem;
+}
+
+.spinner_small.spinner_inline {
+    height: 1.25rem;
+}
+
+.spinner_small.spinner::before,
+.spinner_small.spinner::after,
+.spinner_small .spinner_dot-a::before,
+.spinner_small .spinner_dot-b::before,
+.spinner_small .spinner_dot-a::after,
+.spinner_small .spinner_dot-b::after {
+    width: 0.25rem;
+    height: 0.25rem;
+}
+
+.spinner_small.spinner::before,
+.spinner_small .spinner_dot-a::before,
+.spinner_small .spinner_dot-b::before {
+    top: -0.125rem;
+    left: -0.125rem;
+    -webkit-animation-name: dotsbouncebefore-small;
+    animation-name: dotsbouncebefore-small;
+}
+
+.spinner_small.spinner::after,
+.spinner_small .spinner_dot-a::after,
+.spinner_small .spinner_dot-b::after {
+    top: -0.125rem;
+    right: -0.125rem;
+    -webkit-animation-name: dotsbounceafter-small;
+    animation-name: dotsbounceafter-small;
+}
+
+@-webkit-keyframes dotsbouncebefore-small {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.375rem, 0, 0);
+        transform: translate3d(-0.375rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes dotsbouncebefore-small {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.375rem, 0, 0);
+        transform: translate3d(-0.375rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes dotsbounceafter-small {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.375rem, 0, 0);
+        transform: translate3d(0.375rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@keyframes dotsbounceafter-small {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.375rem, 0, 0);
+        transform: translate3d(0.375rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+.spinner_medium {
+    width: 2rem;
+}
+
+.spinner_medium.spinner::before,
+.spinner_medium.spinner::after,
+.spinner_medium .spinner_dot-a::before,
+.spinner_medium .spinner_dot-b::before,
+.spinner_medium .spinner_dot-a::after,
+.spinner_medium .spinner_dot-b::after {
+    width: 0.5rem;
+    height: 0.5rem;
+}
+
+.spinner_medium.spinner::before,
+.spinner_medium .spinner_dot-a::before,
+.spinner_medium .spinner_dot-b::before {
+    -webkit-animation-name: dotsbouncebefore-medium;
+    animation-name: dotsbouncebefore-medium;
+    top: -0.25rem;
+    left: -0.25rem;
+}
+
+.spinner_medium.spinner::after,
+.spinner_medium .spinner_dot-a::after,
+.spinner_medium .spinner_dot-b::after {
+    -webkit-animation-name: dotsbounceafter-medium;
+    animation-name: dotsbounceafter-medium;
+    top: -0.25rem;
+    right: -0.25rem;
+}
+
+@-webkit-keyframes dotsbouncebefore-medium {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.5rem, 0, 0);
+        transform: translate3d(-0.5rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes dotsbouncebefore-medium {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.5rem, 0, 0);
+        transform: translate3d(-0.5rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes dotsbounceafter-medium {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.5rem, 0, 0);
+        transform: translate3d(0.5rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@keyframes dotsbounceafter-medium {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.5rem, 0, 0);
+        transform: translate3d(0.5rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+.spinner_large {
+    width: 2.75rem;
+}
+
+.spinner_large.spinner::before,
+.spinner_large.spinner::after,
+.spinner_large .spinner_dot-a::before,
+.spinner_large .spinner_dot-b::before,
+.spinner_large .spinner_dot-a::after,
+.spinner_large .spinner_dot-b::after {
+    width: 0.625rem;
+    height: 0.625rem;
+}
+
+.spinner_large.spinner::before,
+.spinner_large .spinner_dot-a::before,
+.spinner_large .spinner_dot-b::before {
+    -webkit-animation-name: dotsbouncebefore-medium;
+    animation-name: dotsbouncebefore-medium;
+    top: -0.3125rem;
+    left: -0.3125rem;
+}
+
+.spinner_large.spinner::after,
+.spinner_large .spinner_dot-a::after,
+.spinner_large .spinner_dot-b::after {
+    -webkit-animation-name: dotsbounceafter-medium;
+    animation-name: dotsbounceafter-medium;
+    top: -0.3125rem;
+    right: -0.3125rem;
+}
+
+@-webkit-keyframes dotsbouncebefore-large {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.75rem, 0, 0);
+        transform: translate3d(-0.75rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@keyframes dotsbouncebefore-large {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(-0.75rem, 0, 0);
+        transform: translate3d(-0.75rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@-webkit-keyframes dotsbounceafter-large {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.75rem, 0, 0);
+        transform: translate3d(0.75rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@keyframes dotsbounceafter-large {
+    0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    60% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(
+            0.55,
+            0.085,
+            0.68,
+            0.53
+        );
+        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    }
+
+    80% {
+        -webkit-transform: translate3d(0.75rem, 0, 0);
+        transform: translate3d(0.75rem, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+        animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}