lit-litelements 2.3.6 → 2.3.7

package/dist/styles/spinner-styles.d.ts

@@ -1,14 +0,0 @@
-export declare const SpinnerName: {
-    spinner1: string;
-    spinner2: string;
-    spinner3: string;
-    spinner4: string;
-    spinner5: string;
-    spinner6: string;
-    spinner7: string;
-    spinner8: string;
-    spinner9: string;
-    spinner10: string;
-    spinner11: string;
-};
-export declare const SpinnerStyle: import("lit").CSSResult;

package/dist/styles/spinner-styles.js

@@ -1,493 +0,0 @@
-import { css } from "lit";
-export const SpinnerName = {
-    spinner1: "lds-dual-ring",
-    spinner2: "lds-circle",
-    spinner3: "loader",
-    spinner4: "lds-hourglass",
-    spinner5: "loader-3rd",
-    spinner6: "loader-ying-yang",
-    spinner7: "loader-in-out-circle",
-    spinner8: "loader-arrow",
-    spinner9: "loader-jump-stair",
-    spinner10: "loader-yin-yang-2",
-    spinner11: "loader-sent-email",
-};
-export const SpinnerStyle = css `
-  .spin-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--lds-backgroundColor, rgb(153, 153, 153));
-    z-index: 99999;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-  }
-
-  .lds-dual-ring,
-  .lds-dual-ring:after {
-    box-sizing: border-box;
-  }
-  .lds-dual-ring {
-    display: inline-block;
-    width: 80px;
-    height: 80px;
-  }
-  .lds-dual-ring:after {
-    content: " ";
-    display: block;
-    width: var(--lds-dual-ring-size, 64px);
-    height: var(--lds-dual-ring-size, 64px);
-    margin: 8px;
-    border-radius: 50%;
-    border: 6.4px solid currentColor;
-    border-color: currentColor transparent currentColor transparent;
-    animation: lds-dual-ring 1.2s linear infinite;
-  }
-  @keyframes lds-dual-ring {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loader {
-    width: var(--lds-dual-ring-size, 64px);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    border: 8px solid;
-    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
-  }
-  @keyframes l20-1 {
-    0% {
-      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-    }
-    12.5% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%
-      );
-    }
-    25% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        100% 100%,
-        100% 100%
-      );
-    }
-    50% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    62.5% {
-      clip-path: polygon(
-        50% 50%,
-        100% 0,
-        100% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    75% {
-      clip-path: polygon(
-        50% 50%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-    100% {
-      clip-path: polygon(
-        50% 50%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-  }
-  @keyframes l20-2 {
-    0% {
-      transform: scaleY(1) rotate(0deg);
-    }
-    49.99% {
-      transform: scaleY(1) rotate(135deg);
-    }
-    50% {
-      transform: scaleY(-1) rotate(0deg);
-    }
-    100% {
-      transform: scaleY(-1) rotate(-135deg);
-    }
-  }
-
-  .lds-circle,
-  .lds-circle {
-    box-sizing: border-box;
-  }
-  .lds-circle {
-    display: inline-block;
-    transform: translateZ(1px);
-  }
-  .lds-circle {
-    display: inline-block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
-    background: currentColor;
-    border-radius: 50%;
-    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  }
-  @keyframes lds-circle {
-    0%,
-    100% {
-      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
-    }
-    0% {
-      transform: rotateY(0deg);
-    }
-    50% {
-      transform: rotateY(1800deg);
-      animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-    }
-    100% {
-      transform: rotateY(3600deg);
-    }
-  }
-
-  .lds-hourglass,
-  .lds-hourglass:after {
-    box-sizing: border-box;
-  }
-  .lds-hourglass {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-  }
-  .lds-hourglass:after {
-    content: " ";
-    display: block;
-    border-radius: 50%;
-    width: 0;
-    height: 0;
-    margin: 8px;
-    box-sizing: border-box;
-    border: 32px solid currentColor;
-    border-color: currentColor transparent currentColor transparent;
-    animation: lds-hourglass 1.2s infinite;
-  }
-  @keyframes lds-hourglass {
-    0% {
-      transform: rotate(0);
-      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    }
-    50% {
-      transform: rotate(900deg);
-      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-    100% {
-      transform: rotate(1800deg);
-    }
-  }
-
-  .loader-3rd {
-    width: var(--lds-dual-ring-size, 64px);
-    aspect-ratio: 1;
-    display: grid;
-    border: 4px solid #0000;
-    border-radius: 50%;
-    border-right-color: inherit;
-    animation: l15 1s infinite linear;
-  }
-  .loader-3rd::before,
-  .loader-3rd::after {
-    content: "";
-    grid-area: 1/1;
-    margin: 2px;
-    border: inherit;
-    border-radius: 50%;
-    animation: l15 2s infinite;
-  }
-  .loader-3rd::after {
-    margin: 8px;
-    animation-duration: 3s;
-  }
-  @keyframes l15 {
-    100% {
-      transform: rotate(1turn);
-    }
-  }
-
-  .loader-ying-yang {
-    width: var(--lds-dual-ring-size, 64px);
-    height: var(--lds-dual-ring-size, 64px);
-    border-radius: 50%;
-    display: inline-block;
-    border-top: 4px solid #fff;
-    border-right: 4px solid transparent;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-  }
-  .loader-ying-yang::after {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: var(--lds-dual-ring-size, 64px);
-    height: var(--lds-dual-ring-size, 64px);
-    border-radius: 50%;
-    border-left: 4px solid #ff3d00;
-    border-bottom: 4px solid transparent;
-    animation: rotation 0.5s linear infinite reverse;
-  }
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loader-in-out-circle {
-    width: var(--lds-dual-ring-size, 64px);
-    height: var(--lds-dual-ring-size, 64px);
-    border-radius: 50%;
-    display: inline-block;
-    position: relative;
-    border: 4px solid #ff3d00;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-  }
-  .loader-in-out-circle::after {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    left: 4px;
-    top: 4px;
-    border: 4px solid #fff;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-  }
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loader-arrow {
-    width: 48px;
-    height: 48px;
-    display: inline-block;
-    position: relative;
-    border: 3px solid;
-    border-color: #de3500 #0000 #fff #0000;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: 1s rotate linear infinite;
-  }
-  .loader-arrow:before,
-  .loader-arrow:after {
-    content: "";
-    top: 0;
-    left: 0;
-    position: absolute;
-    border: 10px solid transparent;
-    border-bottom-color: #fff;
-    transform: translate(-10px, 19px) rotate(-35deg);
-  }
-  .loader-arrow:after {
-    border-color: #de3500 #0000 #0000 #0000;
-    transform: translate(32px, 3px) rotate(-35deg);
-  }
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loader-jump-stair {
-    position: relative;
-    width: 120px;
-    height: 90px;
-    margin: 0 auto;
-  }
-  .loader-jump-stair:before {
-    content: "";
-    position: absolute;
-    bottom: 30px;
-    left: 50px;
-    height: 30px;
-    width: 30px;
-    border-radius: 50%;
-    background: #ff3d00;
-    animation: loading-bounce 0.5s ease-in-out infinite alternate;
-  }
-  .loader-jump-stair:after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 7px;
-    width: 45px;
-    border-radius: 4px;
-    box-shadow: 0 5px 0 #fff, -35px 50px 0 #fff, -70px 95px 0 #fff;
-    animation: loading-step 1s ease-in-out infinite;
-  }
-
-  @keyframes loading-bounce {
-    0% {
-      transform: scale(1, 0.7);
-    }
-    40% {
-      transform: scale(0.8, 1.2);
-    }
-    60% {
-      transform: scale(1, 1);
-    }
-    100% {
-      bottom: 140px;
-    }
-  }
-  @keyframes loading-step {
-    0% {
-      box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #fff, -35px 50px 0 #fff,
-        -70px 90px 0 #fff;
-    }
-    100% {
-      box-shadow: 0 10px 0 #fff, -35px 50px 0 #fff, -70px 90px 0 #fff,
-        -70px 90px 0 rgba(0, 0, 0, 0);
-    }
-  }
-
-  .loader-yin-yang-2 {
-    width: 96px;
-    box-sizing: content-box;
-    height: 48px;
-    background: #fff;
-    border-color: #de3500;
-    border-style: solid;
-    border-width: 2px 2px 50px 2px;
-    border-radius: 100%;
-    position: relative;
-    animation: 3s yinYang linear infinite;
-  }
-  .loader-yin-yang-2:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 0;
-    background: #fff;
-    border: 18px solid #de3500;
-    border-radius: 100%;
-    width: 12px;
-    height: 12px;
-    box-sizing: content-box;
-  }
-  .loader-yin-yang-2:after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    background: #de3500;
-    border: 18px solid #fff;
-    border-radius: 100%;
-    width: 12px;
-    height: 12px;
-    box-sizing: content-box;
-  }
-  @keyframes yinYang {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loader-sent-email {
-    position: relative;
-    border-style: solid;
-    box-sizing: border-box;
-    border-width: 40px 60px 30px 60px;
-    border-color: #3760c9 #96ddfc #96ddfc #36bbf7;
-    animation: envFloating 1s ease-in infinite alternate;
-  }
-
-  .loader-sent-email:after {
-    content: "";
-    position: absolute;
-    right: 62px;
-    top: -40px;
-    height: 70px;
-    width: 50px;
-    background-image: linear-gradient(#fff 45px, transparent 0),
-      linear-gradient(#fff 45px, transparent 0),
-      linear-gradient(#fff 45px, transparent 0);
-    background-repeat: no-repeat;
-    background-size: 30px 4px;
-    background-position: 0px 11px, 8px 35px, 0px 60px;
-    animation: envDropping 0.75s linear infinite;
-  }
-
-  @keyframes envFloating {
-    0% {
-      transform: translate(-2px, -5px);
-    }
-    100% {
-      transform: translate(0, 5px);
-    }
-  }
-
-  @keyframes envDropping {
-    0% {
-      background-position: 100px 11px, 115px 35px, 105px 60px;
-      opacity: 1;
-    }
-    50% {
-      background-position: 0px 11px, 20px 35px, 5px 60px;
-    }
-    60% {
-      background-position: -30px 11px, 0px 35px, -10px 60px;
-    }
-    75%,
-    100% {
-      background-position: -30px 11px, -30px 35px, -30px 60px;
-      opacity: 0;
-    }
-  }
-`;