@teselagen/ui 0.7.36 → 0.8.2

package/src/DNALoader/style.css

@@ -0,0 +1,251 @@
+.dna-loader {
+  display: inline-block;
+  position: relative;
+  transform: scale(0.45);
+}
+
+.nucleobase {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.nucleobase:not(:last-child) {
+  margin-right: 4.86vh;
+}
+
+.nucleobase:before,
+.nucleobase:after {
+  content: "";
+  display: inline-block;
+  width: 3vh;
+  height: 3vh;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.nucleobase:nth-child(10) {
+  animation-delay: -1.869s;
+}
+
+.nucleobase:nth-child(10):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(10):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(9) {
+  animation-delay: -3.738s;
+}
+
+.nucleobase:nth-child(9):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(9):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(8) {
+  animation-delay: -5.607s;
+}
+
+.nucleobase:nth-child(8):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(8):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(7) {
+  animation-delay: -7.476s;
+}
+
+.nucleobase:nth-child(7):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(7):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(6) {
+  animation-delay: -9.345s;
+}
+
+.nucleobase:nth-child(6):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(6):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(5) {
+  animation-delay: -11.214s;
+}
+
+.nucleobase:nth-child(5):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(5):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(4) {
+  animation-delay: -13.083s;
+}
+
+.nucleobase:nth-child(4):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(4):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(3) {
+  animation-delay: -14.952s;
+}
+
+.nucleobase:nth-child(3):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(3):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(2) {
+  animation-delay: -16.821s;
+}
+
+.nucleobase:nth-child(2):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(2):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(1) {
+  animation-delay: -18.69s;
+}
+
+.nucleobase:nth-child(1):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(1):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #006cab;
+}
+
+@keyframes animBefore {
+  0% {
+    top: -6vh;
+    z-index: 1;
+  }
+  25% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  50% {
+    top: 6vh;
+    z-index: -1;
+  }
+  75% {
+    background-color: #5bc0de;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  100% {
+    top: -6vh;
+    z-index: -1;
+  }
+}
+
+@keyframes animAfter {
+  0% {
+    top: 6vh;
+    z-index: -1;
+  }
+  25% {
+    background-color: #055e75;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  50% {
+    top: -6vh;
+    z-index: 1;
+  }
+  75% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  100% {
+    top: 6vh;
+    z-index: 1;
+  }
+}
+
+@keyframes animDotBar {
+  0% {
+    height: 8.25vh;
+  }
+  25% {
+    height: 0;
+  }
+  50% {
+    height: 8.25vh;
+  }
+  75% {
+    height: 0;
+  }
+  100% {
+    height: 8.25vh;
+  }
+}