@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/loading/loading.less

@@ -1,420 +1,505 @@
-@import '../styles/var';
-
-@site-loading-normal-width: 50px;
-@site-loading-normal-height: @site-font-size-md + 2;
-
-@site-loading-large-width: 64px;
-@site-loading-large-height: @site-font-size-lg + 2;
-
-@site-loading-small-width: 36px;
-@site-loading-small-height: @site-font-size-sm + 2;
-
-@site-loading-mini-width: 22px;
-@site-loading-mini-height: @site-font-size-xs + 2;
-
-.var-site-loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &__circle {
-    display: flex;
-
-    &-block {
-      display: inline-block;
-      animation: circle 1.8s linear infinite;
-
-      svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-
-        circle {
-          animation: circular 1.5s ease-in-out infinite;
-          stroke: currentColor;
-          stroke-width: 3;
-          stroke-linecap: round;
-        }
-      }
-    }
-
-    @keyframes circle {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    @keyframes circular {
-      0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-      }
-
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -40;
-      }
-
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -120;
-      }
-    }
-  }
-
-  &__wave {
-    @site-loading-wave-size-item-width: 5px;
-    @site-loading-wave-size-item-margin: 5px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &-large {
-      width: @site-loading-large-width;
-      height: @site-loading-large-height;
-    }
-
-    &-normal {
-      width: @site-loading-normal-width;
-      height: @site-loading-normal-height;
-    }
-
-    &-small {
-      width: @site-loading-small-width;
-      height: @site-loading-small-height;
-    }
-
-    &-mini {
-      width: @site-loading-mini-width;
-      height: @site-loading-mini-height;
-    }
-
-    &-item {
-      height: 100%;
-      display: inline-block;
-      animation: 1.2s ease-in-out infinite wave;
-
-      &:nth-child(1) {
-        animation-delay: -1.2s;
-        margin-left: 0;
-      }
-
-      &:nth-child(2) {
-        animation-delay: -1.1s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: -1s;
-      }
-
-      &:nth-child(4) {
-        animation-delay: -0.9s;
-      }
-
-      &:nth-child(5) {
-        animation-delay: -0.8s;
-      }
-    }
-
-    &-item-large {
-      width: @site-loading-wave-size-item-width;
-      margin-left: @site-loading-wave-size-item-margin;
-    }
-
-    &-item-normal {
-      width: @site-loading-wave-size-item-width - 1;
-      margin-left: @site-loading-wave-size-item-margin - 1;
-    }
-
-    &-item-small {
-      width: @site-loading-wave-size-item-width - 2;
-      margin-left: @site-loading-wave-size-item-margin - 2;
-    }
-
-    &-item-mini {
-      width: @site-loading-wave-size-item-width - 3;
-      margin-left: @site-loading-wave-size-item-margin - 3;
-    }
-
-    @keyframes wave {
-      0%,
-      40%,
-      100% {
-        transform: scaleY(0.4);
-      }
-      20% {
-        transform: scaleY(1);
-      }
-    }
-  }
-
-  &__cube {
-    @site-loading-cube-size-item-width: 10px;
-    @site-loading-cube-size-item-height: 10px;
-    @site-loading-cube-size-item-margin: 5px;
-
-    display: flex;
-    align-items: center;
-
-    &-large {
-      width: @site-loading-large-width;
-      height: @site-loading-large-height;
-    }
-
-    &-normal {
-      width: @site-loading-normal-width;
-      height: @site-loading-normal-height;
-    }
-
-    &-small {
-      width: @site-loading-small-width;
-      height: @site-loading-small-height;
-    }
-
-    &-mini {
-      width: @site-loading-mini-width;
-      height: @site-loading-mini-height;
-    }
-
-    &-item {
-      display: inline-block;
-      transform-origin: right bottom;
-      animation: 1.5s ease infinite cube;
-
-      &:nth-child(1) {
-        animation-delay: 0.2s;
-        margin-left: 0;
-      }
-
-      &:nth-child(2) {
-        animation-delay: 0.4s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 0.6s;
-      }
-
-      &:nth-child(4) {
-        animation-delay: 0.8s;
-      }
-    }
-
-    &-item-large {
-      height: @site-loading-cube-size-item-height;
-      width: @site-loading-cube-size-item-width;
-      margin-left: @site-loading-cube-size-item-margin;
-    }
-
-    &-item-normal {
-      height: @site-loading-cube-size-item-height - 2;
-      width: @site-loading-cube-size-item-width - 2;
-      margin-left: @site-loading-cube-size-item-margin - 1;
-    }
-
-    &-item-small {
-      height: @site-loading-cube-size-item-height - 4;
-      width: @site-loading-cube-size-item-width - 4;
-      margin-left: @site-loading-cube-size-item-margin - 2;
-    }
-
-    &-item-mini {
-      height: @site-loading-cube-size-item-height - 6;
-      width: @site-loading-cube-size-item-width - 6;
-      margin-left: @site-loading-cube-size-item-margin - 3;
-    }
-
-    @keyframes cube {
-      0% {
-        opacity: 1;
-        transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        transform: rotate(90deg) scale(0.3);
-      }
-    }
-  }
-
-  &__rect {
-    @site-loading-rect-size-item-width: 8px;
-    @site-loading-rect-size-item-height: 100%;
-
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-
-    &-large {
-      width: @site-loading-large-width;
-      height: @site-loading-large-height;
-    }
-
-    &-normal {
-      width: @site-loading-normal-width;
-      height: @site-loading-normal-height;
-    }
-
-    &-small {
-      width: @site-loading-small-width;
-      height: @site-loading-small-height;
-    }
-
-    &-mini {
-      width: @site-loading-mini-width;
-      height: @site-loading-mini-height;
-    }
-
-    &-item {
-      animation: 2s ease-in-out infinite rect;
-
-      &:nth-child(1) {
-        animation-delay: 1.75s;
-      }
-
-      &:nth-child(2) {
-        animation-delay: 1.5s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 1.25s;
-      }
-
-      &:nth-child(4) {
-        animation-delay: 1s;
-      }
-
-      &:nth-child(5) {
-        animation-delay: 0.75s;
-      }
-
-      &:nth-child(6) {
-        animation-delay: 0.5s;
-      }
-
-      &:nth-child(7) {
-        animation-delay: 0.25s;
-      }
-
-      &:nth-child(8) {
-        animation-delay: 0s;
-      }
-    }
-
-    &-item-large {
-      height: @site-loading-rect-size-item-height;
-      width: @site-loading-rect-size-item-width;
-    }
-
-    &-item-normal {
-      height: @site-loading-rect-size-item-height * 0.9;
-      width: @site-loading-rect-size-item-width * 0.8;
-    }
-
-    &-item-small {
-      height: @site-loading-rect-size-item-height * 0.8;
-      width: @site-loading-rect-size-item-width * 0.6;
-    }
-
-    &-item-mini {
-      height: @site-loading-rect-size-item-height * 0.7;
-      width: @site-loading-rect-size-item-width * 0.4;
-    }
-
-    @keyframes rect {
-      0% {
-        opacity: 0.3;
-      }
-      25% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.3;
-      }
-      65% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0.3;
-      }
-    }
-  }
-
-  &__disappear {
-    @site-loading-disappear-size-item-width: 15px;
-    @site-loading-disappear-size-item-height: 15px;
-
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-flow: nowrap;
-
-    &-large {
-      width: @site-loading-large-width;
-      height: @site-loading-large-height;
-    }
-
-    &-normal {
-      width: @site-loading-normal-width;
-      height: @site-loading-normal-height;
-    }
-
-    &-small {
-      width: @site-loading-small-width;
-      height: @site-loading-small-height;
-    }
-
-    &-mini {
-      width: @site-loading-mini-width;
-      height: @site-loading-mini-height;
-    }
-
-    &-item {
-      border-radius: 50%;
-      animation: 0.5s ease-in-out infinite alternate disappear;
-
-      &:nth-child(1) {
-        animation-delay: -0.4s;
-      }
-
-      &:nth-child(2) {
-        animation-delay: -0.2s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 0s;
-      }
-    }
-
-    &-item-large {
-      height: @site-loading-disappear-size-item-height;
-      width: @site-loading-disappear-size-item-width;
-    }
-
-    &-item-normal {
-      height: @site-loading-disappear-size-item-height * 0.8;
-      width: @site-loading-disappear-size-item-width * 0.8;
-    }
-
-    &-item-small {
-      height: @site-loading-disappear-size-item-height * 0.6;
-      width: @site-loading-disappear-size-item-width * 0.6;
-    }
-
-    &-item-mini {
-      height: @site-loading-disappear-size-item-height * 0.4;
-      width: @site-loading-disappear-size-item-width * 0.4;
-    }
-
-    @keyframes disappear {
-      0% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-}
+@import '../styles/var';
+
+@site-loading-opacity: 0.38;
+@site-loading-desc-margin: 8px 0 0;
+@site-loading-normal-width: 50px;
+@site-loading-normal-height: @site-font-size-md + 2;
+
+@site-loading-large-width: 64px;
+@site-loading-large-height: @site-font-size-lg + 2;
+
+@site-loading-small-width: 36px;
+@site-loading-small-height: @site-font-size-sm + 2;
+
+@site-loading-mini-width: 22px;
+@site-loading-mini-height: @site-font-size-xs + 2;
+
+:root {
+  --site-loading-opacity: @site-loading-opacity;
+  --site-loading-desc-margin: @site-loading-desc-margin;
+}
+
+.var-site-loading {
+  position: relative;
+
+  &__content {
+    position: relative;
+    transition: opacity 0.3s;
+    opacity: 1;
+
+    &--active {
+      opacity: var(--site-loading-opacity);
+    }
+
+    &-mask {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+
+  &__body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  &__inside {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  &__description {
+    color: @site-color-primary;
+    margin: var(--site-loading-desc-margin);
+
+    &--large {
+      font-size: @site-font-size-lg;
+    }
+
+    &--normal {
+      font-size: @site-font-size-md;
+    }
+
+    &--small {
+      font-size: @site-font-size-sm;
+    }
+
+    &--mini {
+      font-size: @site-font-size-xs;
+    }
+  }
+
+  &__circle {
+    display: flex;
+
+    &-block {
+      display: inline-block;
+      color: @site-color-primary;
+      animation: circle 1.8s linear infinite;
+
+      &--large {
+        width: 36px;
+        height: 36px;
+      }
+
+      &--normal {
+        width: 30px;
+        height: 30px;
+      }
+
+      &--small {
+        width: 24px;
+        height: 24px;
+      }
+
+      &--mini {
+        width: 18px;
+        height: 18px;
+      }
+
+      svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        circle {
+          animation: circular 1.5s ease-in-out infinite;
+          stroke: currentColor;
+          stroke-width: 3;
+          stroke-linecap: round;
+        }
+      }
+    }
+
+    @keyframes circle {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes circular {
+      0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+      }
+
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -40;
+      }
+
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -120;
+      }
+    }
+  }
+
+  &__wave {
+    @site-loading-wave-size-item-width: 5px;
+    @site-loading-wave-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &--normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &--small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &--mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      height: 100%;
+      display: inline-block;
+      animation: 1.2s ease-in-out infinite wave;
+      background-color: @site-color-primary;
+
+      &:nth-child(1) {
+        animation-delay: -1.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -1.1s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: -1s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: -0.9s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: -0.8s;
+      }
+    }
+
+    &-item--large {
+      width: @site-loading-wave-size-item-width;
+      margin-left: @site-loading-wave-size-item-margin;
+    }
+
+    &-item--normal {
+      width: @site-loading-wave-size-item-width - 1;
+      margin-left: @site-loading-wave-size-item-margin - 1;
+    }
+
+    &-item--small {
+      width: @site-loading-wave-size-item-width - 2;
+      margin-left: @site-loading-wave-size-item-margin - 2;
+    }
+
+    &-item--mini {
+      width: @site-loading-wave-size-item-width - 3;
+      margin-left: @site-loading-wave-size-item-margin - 3;
+    }
+
+    @keyframes wave {
+      0%,
+      40%,
+      100% {
+        transform: scaleY(0.4);
+      }
+      20% {
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  &__cube {
+    @site-loading-cube-size-item-width: 10px;
+    @site-loading-cube-size-item-height: 10px;
+    @site-loading-cube-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+
+    &--large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &--normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &--small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &--mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      display: inline-block;
+      transform-origin: right bottom;
+      animation: 1.5s ease infinite cube;
+      background-color: @site-color-primary;
+
+      &:nth-child(1) {
+        animation-delay: 0.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.6s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 0.8s;
+      }
+    }
+
+    &-item--large {
+      height: @site-loading-cube-size-item-height;
+      width: @site-loading-cube-size-item-width;
+      margin-left: @site-loading-cube-size-item-margin;
+    }
+
+    &-item--normal {
+      height: @site-loading-cube-size-item-height - 2;
+      width: @site-loading-cube-size-item-width - 2;
+      margin-left: @site-loading-cube-size-item-margin - 1;
+    }
+
+    &-item--small {
+      height: @site-loading-cube-size-item-height - 4;
+      width: @site-loading-cube-size-item-width - 4;
+      margin-left: @site-loading-cube-size-item-margin - 2;
+    }
+
+    &-item--mini {
+      height: @site-loading-cube-size-item-height - 6;
+      width: @site-loading-cube-size-item-width - 6;
+      margin-left: @site-loading-cube-size-item-margin - 3;
+    }
+
+    @keyframes cube {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: rotate(90deg) scale(0.3);
+      }
+    }
+  }
+
+  &__rect {
+    @site-loading-rect-size-item-width: 8px;
+    @site-loading-rect-size-item-height: 100%;
+
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    &--large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &--normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &--small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &--mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      animation: 2s ease-in-out infinite rect;
+      background-color: @site-color-primary;
+
+      &:nth-child(1) {
+        animation-delay: 1.75s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 1.5s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 1.25s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 1s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 0.75s;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item--large {
+      height: @site-loading-rect-size-item-height;
+      width: @site-loading-rect-size-item-width;
+    }
+
+    &-item--normal {
+      height: @site-loading-rect-size-item-height * 0.9;
+      width: @site-loading-rect-size-item-width * 0.8;
+    }
+
+    &-item--small {
+      height: @site-loading-rect-size-item-height * 0.8;
+      width: @site-loading-rect-size-item-width * 0.6;
+    }
+
+    &-item--mini {
+      height: @site-loading-rect-size-item-height * 0.7;
+      width: @site-loading-rect-size-item-width * 0.4;
+    }
+
+    @keyframes rect {
+      0% {
+        opacity: 0.3;
+      }
+      25% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.3;
+      }
+      65% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.3;
+      }
+    }
+  }
+
+  &__disappear {
+    @site-loading-disappear-size-item-width: 15px;
+    @site-loading-disappear-size-item-height: 15px;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-flow: nowrap;
+
+    &--large {
+      width: @site-loading-large-width;
+      height: @site-loading-large-height;
+    }
+
+    &--normal {
+      width: @site-loading-normal-width;
+      height: @site-loading-normal-height;
+    }
+
+    &--small {
+      width: @site-loading-small-width;
+      height: @site-loading-small-height;
+    }
+
+    &--mini {
+      width: @site-loading-mini-width;
+      height: @site-loading-mini-height;
+    }
+
+    &-item {
+      border-radius: 50%;
+      animation: 0.5s ease-in-out infinite alternate disappear;
+      background-color: @site-color-primary;
+
+      &:nth-child(1) {
+        animation-delay: -0.4s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item--large {
+      height: @site-loading-disappear-size-item-height;
+      width: @site-loading-disappear-size-item-width;
+    }
+
+    &-item--normal {
+      height: @site-loading-disappear-size-item-height * 0.8;
+      width: @site-loading-disappear-size-item-width * 0.8;
+    }
+
+    &-item--small {
+      height: @site-loading-disappear-size-item-height * 0.6;
+      width: @site-loading-disappear-size-item-width * 0.6;
+    }
+
+    &-item--mini {
+      height: @site-loading-disappear-size-item-height * 0.4;
+      width: @site-loading-disappear-size-item-width * 0.4;
+    }
+
+    @keyframes disappear {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+}