@vixcom/ui 1.1.0 → 1.2.0

package/{styles → src/styles}/animations.scss

@@ -1,191 +1,191 @@
-.loading {
-  overflow: hidden;
-}
-
-.loading::before,
-.loading::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  border-radius: inherit;
-}
-
-.loading::before {
-  content: '';
-  background-color: inherit;
-  /* opacity: 0.75; */
-  backdrop-filter: blur(5px);
-  animation: fade-out-half 5s linear infinite alternate;
-}
-
-.loading::after {
-  content: '\f110' !important;
-  /* font-size: 200%; */
-  font-family: 'FontAwesome';
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1 !important;
-  background-color: unset !important;
-  animation: rotate-clockwise 0.25s linear infinite;
-}
-
-.loading-anim {
-  position: relative;
-  display: block;
-  text-align: center;
-  min-width: 100%;
-  opacity: 0.75;
-  font-size: 75%;
-
-  .animi {
-    width: 50%;
-    height: 50%;
-    object-fit: contain;
-  }
-
-  &.has-logo::after {
-    content: '';
-    background-image: url('/assets/img/icon.png');
-    background-size: contain;
-    background-clip: border-box;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .ani-logo,
-  &.has-logo::after {
-    position: absolute;
-    display: block;
-    object-fit: contain;
-    top: 50%;
-    left: 50%;
-    width: 25%;
-    height: 25%;
-    transform-origin: center;
-    transform: translate(-50%, -50%);
-    // transition: transform 1s linear 1s;
-    animation: fade-out-half 5s linear infinite alternate;
-  }
-}
-
-.list-loading {
-  width: 100%;
-  height: 5rem;
-}
-
-.loading-anim-list {
-  height: 5rem;
-  text-align: center;
-
-  img {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.drop-down {
-  animation: drop-down 1.2s linear;
-}
-
-.ind-x {
-  animation: x-ind-move 1.2s ease-out backwards infinite;
-}
-
-.spin {
-  animation: rotate-clockwise 1.2s linear infinite;
-}
-
-.pulse {
-  animation: rotate-clockwise 1.2s steps(6) infinite;
-}
-
-.rotate-clockwise {
-  animation: rotate-clockwise 1.2s linear;
-}
-
-.infinite {
-  animation-iteration-count: infinite
-}
-
-@keyframes fade-out-half {
-  from {
-    opacity: 0.5;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes x-ind-move {
-  from {
-    transform: translateX(1rem)
-  }
-}
-
-@keyframes drop-down {
-  from {
-    transform: translateY(0)
-  }
-}
-
-@keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg)
-  }
-
-  to {
-    transform: rotate(1turn)
-  }
-}
-
-@-webkit-keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg)
-  }
-
-  to {
-    transform: rotate(1turn)
-  }
-}
-
-@keyframes zoom-in-logo {
-  from {
-    transform-origin: center;
-    transform: scale(0)
-  }
-
-  to {
-    transform: scale(1)
-  }
-}
-
-.page-loading {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: #ffffffb0;
-  z-index: 1;
-
-  &.show {
-    display: flex
-  }
-}
-
-.show,
-.collapsed {
-
-  &[class*="collapse-icon"],
-  [class*="collapse-icon"] {
-    transform: rotateX(-0.5turn);
-  }
+.loading {
+  overflow: hidden;
+}
+
+.loading::before,
+.loading::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+.loading::before {
+  content: '';
+  background-color: inherit;
+  /* opacity: 0.75; */
+  backdrop-filter: blur(5px);
+  animation: fade-out-half 5s linear infinite alternate;
+}
+
+.loading::after {
+  content: '\f110' !important;
+  /* font-size: 200%; */
+  font-family: 'FontAwesome';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1 !important;
+  background-color: unset !important;
+  animation: rotate-clockwise 0.25s linear infinite;
+}
+
+.loading-anim {
+  position: relative;
+  display: block;
+  text-align: center;
+  min-width: 100%;
+  opacity: 0.75;
+  font-size: 75%;
+
+  .animi {
+    width: 50%;
+    height: 50%;
+    object-fit: contain;
+  }
+
+  &.has-logo::after {
+    content: '';
+    background-image: url('/assets/img/icon.png');
+    background-size: contain;
+    background-clip: border-box;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .ani-logo,
+  &.has-logo::after {
+    position: absolute;
+    display: block;
+    object-fit: contain;
+    top: 50%;
+    left: 50%;
+    width: 25%;
+    height: 25%;
+    transform-origin: center;
+    transform: translate(-50%, -50%);
+    // transition: transform 1s linear 1s;
+    animation: fade-out-half 5s linear infinite alternate;
+  }
+}
+
+.list-loading {
+  width: 100%;
+  height: 5rem;
+}
+
+.loading-anim-list {
+  height: 5rem;
+  text-align: center;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.drop-down {
+  animation: drop-down 1.2s linear;
+}
+
+.ind-x {
+  animation: x-ind-move 1.2s ease-out backwards infinite;
+}
+
+.spin {
+  animation: rotate-clockwise 1.2s linear infinite;
+}
+
+.pulse {
+  animation: rotate-clockwise 1.2s steps(6) infinite;
+}
+
+.rotate-clockwise {
+  animation: rotate-clockwise 1.2s linear;
+}
+
+.infinite {
+  animation-iteration-count: infinite
+}
+
+@keyframes fade-out-half {
+  from {
+    opacity: 0.5;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes x-ind-move {
+  from {
+    transform: translateX(1rem)
+  }
+}
+
+@keyframes drop-down {
+  from {
+    transform: translateY(0)
+  }
+}
+
+@keyframes rotate-clockwise {
+  from {
+    transform: rotate(0deg)
+  }
+
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@-webkit-keyframes rotate-clockwise {
+  from {
+    transform: rotate(0deg)
+  }
+
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes zoom-in-logo {
+  from {
+    transform-origin: center;
+    transform: scale(0)
+  }
+
+  to {
+    transform: scale(1)
+  }
+}
+
+.page-loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #ffffffb0;
+  z-index: 1;
+
+  &.show {
+    display: flex
+  }
+}
+
+.show,
+.collapsed {
+
+  &[class*="collapse-icon"],
+  [class*="collapse-icon"] {
+    transform: rotateX(-0.5turn);
+  }
 }