@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha0.4

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

@@ -1,750 +0,0 @@
-/* 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);
-    }
-}