vxe-pc-ui 3.13.11 → 3.13.13

package/styles/components/image-group.scss

@@ -1,3 +1,3 @@
-.vxe-image-group {
-  display: inline-block;
+.vxe-image-group {
+  display: inline-block;
 }

package/styles/components/image-preview.scss

@@ -1,216 +1,216 @@
-@use '../helpers/baseMixin.scss';
-
-.vxe-image-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  &:not(.is--pct11) {
-    .vxe-image-preview--img-item {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-  &:not(.is--move) {
-    .vxe-image-preview--img-item {
-      @include baseMixin.createAnimationTransition(transform, 0.3s);
-    }
-  }
-  &:hover {
-    .vxe-image-preview--close-wrapper,
-    .vxe-image-preview--previous-btn,
-    .vxe-image-preview--next-btn,
-    .vxe-image-preview--operation-info,
-    .vxe-image-preview--operation-wrapper {
-      opacity: 1;
-    }
-    .vxe-image-preview--operation-info {
-      transform: translate(0, 0);
-    }
-    .vxe-image-preview--previous-btn,
-    .vxe-image-preview--next-btn {
-      transform: translate(0, -50%);
-      &:hover {
-        color: var(--vxe-ui-font-primary-color);
-        transform: translate(0, -50%) scale(1.2);
-      }
-      &:active {
-        transform: translate(0, -50%) scale(0.9);
-      }
-    }
-    .vxe-image-preview--operation-wrapper {
-      transform: translate(-50%, 0);
-      &:hover {
-        transform: translateX(-50%) scale(1.1);
-      }
-    }
-  }
-}
-.vxe-image-preview--img-list {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.vxe-image-preview--img-item {
-  display: none;
-  cursor: grab;
-  &:active {
-    cursor: grabbing;
-  }
-  &.is--active {
-    display: block;
-  }
-}
-.vxe-image-preview--close-btn {
-  top: 0;
-  right: 0;
-  z-index: 99;
-  padding: 1em;
-  font-size: 1.5em;
-  transform: scale(1);
-  border-radius: 50%;
-  cursor: pointer;
-  @include baseMixin.createAnimationTransition(all, 0.2s);
-}
-.vxe-image-preview--close-bg {
-  position: absolute;
-  top: -7em;
-  right: -12em;
-  z-index: 99;
-  width: 30em;
-  height: 10em;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: var(--vxe-ui-status-error-color);
-  transform: rotate(45deg);
-  cursor: pointer;
-  z-index: 88;
-  @include baseMixin.createAnimationTransition(all, 0.2s);
-}
-.vxe-image-preview--close-wrapper {
-  opacity: 0;
-  @include baseMixin.createAnimationTransition(all, 0.2s);
-  &:hover {
-    .vxe-image-preview--close-btn {
-      top: 0.2em;
-      right: 0.2em;
-      transform: scale(1.2);
-      color: var(--vxe-ui-status-error-color);
-    }
-    .vxe-image-preview--close-bg {
-      top: -5em;
-    }
-  }
-}
-.vxe-image-preview--operation-info,
-.vxe-image-preview--close-btn,
-.vxe-image-preview--previous-btn,
-.vxe-image-preview--next-btn,
-.vxe-image-preview--operation-wrapper {
-  position: absolute;
-  z-index: 99;
-}
-
-.vxe-image-preview--previous-btn,
-.vxe-image-preview--next-btn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  top: 50%;
-  border-radius: 50%;
-  font-size: 1.6em;
-  width: 2.2em;
-  height: 2.2em;
-  line-height: 2.2em;
-  background-color: rgba(0, 0, 0, 0.7);
-  cursor: pointer;
-  @include baseMixin.createAnimationTransition(all, 0.1s);
-}
-.vxe-image-preview--previous-btn {
-  left: 1vw;
-  transform: translate(-2em, -50%);
-}
-.vxe-image-preview--next-btn {
-  right: 1vw;
-  transform: translate(2em, -50%);
-}
-
-.vxe-image-preview--operation-info {
-  right: 0.2em;
-  bottom: 0.2em;
-  font-size: 1em;
-  padding: 0.3em 0;
-  width: 4.6em;
-  opacity: 0;
-  border-radius: var(--vxe-ui-base-border-radius);
-  text-align: center;
-  transform: translate(2em, 2em);
-  background-color: rgba(0, 0, 0, 0.7);
-  @include baseMixin.createAnimationTransition(all, 0.2s);
-}
-.vxe-image-preview--operation-wrapper {
-  opacity: 0;
-  display: flex;
-  flex-direction: row;
-  bottom: 3vh;
-  left: 50%;
-  transform: translate(-50%, 3em);
-  padding: 0 1.5em;
-  border-radius: 3em;
-  background-color: rgba(0, 0, 0, 0.7);
-  @include baseMixin.createAnimationTransition(all, 0.2s);
-}
-.vxe-image-preview--operation-active-count {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-  min-width: 2.5em;
-  .vxe-image-preview--operation-active-current,
-  .vxe-image-preview--operation-active-total {
-    display: inline-block;
-    height: 1.4em;
-  }
-  .vxe-image-preview--operation-active-current {
-    font-size: 2em;
-    line-height: 1.2em;
-    font-weight: 700;
-    padding-right: 0.1em;
-    min-width: 1.4em;
-    text-align: right;
-  }
-}
-.vxe-image-preview--operation-btn {
-  font-size: 1.6em;
-  padding: 0.5em;
-  cursor: pointer;
-  @include baseMixin.createAnimationTransition(all, 0.1s);
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
-    transform: scale(1.2);
-  }
-  &:active {
-    transform: scale(0.9);
-  }
-}
-
-.vxe-image-preview-popup-wrapper {
-  user-select: none;
-  &.vxe-modal--wrapper {
-    &.type--modal {
-      .vxe-modal--box {
-        border: 0;
-        background-color: rgba(0, 0, 0, 0.1);
-        box-shadow: none;
-      }
-      .vxe-modal--content {
-        padding: 0;
-      }
-    }
-  }
+@use '../helpers/baseMixin.scss';
+
+.vxe-image-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  &:not(.is--pct11) {
+    .vxe-image-preview--img-item {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  &:not(.is--move) {
+    .vxe-image-preview--img-item {
+      @include baseMixin.createAnimationTransition(transform, 0.3s);
+    }
+  }
+  &:hover {
+    .vxe-image-preview--close-wrapper,
+    .vxe-image-preview--previous-btn,
+    .vxe-image-preview--next-btn,
+    .vxe-image-preview--operation-info,
+    .vxe-image-preview--operation-wrapper {
+      opacity: 1;
+    }
+    .vxe-image-preview--operation-info {
+      transform: translate(0, 0);
+    }
+    .vxe-image-preview--previous-btn,
+    .vxe-image-preview--next-btn {
+      transform: translate(0, -50%);
+      &:hover {
+        color: var(--vxe-ui-font-primary-color);
+        transform: translate(0, -50%) scale(1.2);
+      }
+      &:active {
+        transform: translate(0, -50%) scale(0.9);
+      }
+    }
+    .vxe-image-preview--operation-wrapper {
+      transform: translate(-50%, 0);
+      &:hover {
+        transform: translateX(-50%) scale(1.1);
+      }
+    }
+  }
+}
+.vxe-image-preview--img-list {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-image-preview--img-item {
+  display: none;
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+  &.is--active {
+    display: block;
+  }
+}
+.vxe-image-preview--close-btn {
+  top: 0;
+  right: 0;
+  z-index: 99;
+  padding: 1em;
+  font-size: 1.5em;
+  transform: scale(1);
+  border-radius: 50%;
+  cursor: pointer;
+  @include baseMixin.createAnimationTransition(all, 0.2s);
+}
+.vxe-image-preview--close-bg {
+  position: absolute;
+  top: -7em;
+  right: -12em;
+  z-index: 99;
+  width: 30em;
+  height: 10em;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: var(--vxe-ui-status-error-color);
+  transform: rotate(45deg);
+  cursor: pointer;
+  z-index: 88;
+  @include baseMixin.createAnimationTransition(all, 0.2s);
+}
+.vxe-image-preview--close-wrapper {
+  opacity: 0;
+  @include baseMixin.createAnimationTransition(all, 0.2s);
+  &:hover {
+    .vxe-image-preview--close-btn {
+      top: 0.2em;
+      right: 0.2em;
+      transform: scale(1.2);
+      color: var(--vxe-ui-status-error-color);
+    }
+    .vxe-image-preview--close-bg {
+      top: -5em;
+    }
+  }
+}
+.vxe-image-preview--operation-info,
+.vxe-image-preview--close-btn,
+.vxe-image-preview--previous-btn,
+.vxe-image-preview--next-btn,
+.vxe-image-preview--operation-wrapper {
+  position: absolute;
+  z-index: 99;
+}
+
+.vxe-image-preview--previous-btn,
+.vxe-image-preview--next-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  top: 50%;
+  border-radius: 50%;
+  font-size: 1.6em;
+  width: 2.2em;
+  height: 2.2em;
+  line-height: 2.2em;
+  background-color: rgba(0, 0, 0, 0.7);
+  cursor: pointer;
+  @include baseMixin.createAnimationTransition(all, 0.1s);
+}
+.vxe-image-preview--previous-btn {
+  left: 1vw;
+  transform: translate(-2em, -50%);
+}
+.vxe-image-preview--next-btn {
+  right: 1vw;
+  transform: translate(2em, -50%);
+}
+
+.vxe-image-preview--operation-info {
+  right: 0.2em;
+  bottom: 0.2em;
+  font-size: 1em;
+  padding: 0.3em 0;
+  width: 4.6em;
+  opacity: 0;
+  border-radius: var(--vxe-ui-base-border-radius);
+  text-align: center;
+  transform: translate(2em, 2em);
+  background-color: rgba(0, 0, 0, 0.7);
+  @include baseMixin.createAnimationTransition(all, 0.2s);
+}
+.vxe-image-preview--operation-wrapper {
+  opacity: 0;
+  display: flex;
+  flex-direction: row;
+  bottom: 3vh;
+  left: 50%;
+  transform: translate(-50%, 3em);
+  padding: 0 1.5em;
+  border-radius: 3em;
+  background-color: rgba(0, 0, 0, 0.7);
+  @include baseMixin.createAnimationTransition(all, 0.2s);
+}
+.vxe-image-preview--operation-active-count {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  min-width: 2.5em;
+  .vxe-image-preview--operation-active-current,
+  .vxe-image-preview--operation-active-total {
+    display: inline-block;
+    height: 1.4em;
+  }
+  .vxe-image-preview--operation-active-current {
+    font-size: 2em;
+    line-height: 1.2em;
+    font-weight: 700;
+    padding-right: 0.1em;
+    min-width: 1.4em;
+    text-align: right;
+  }
+}
+.vxe-image-preview--operation-btn {
+  font-size: 1.6em;
+  padding: 0.5em;
+  cursor: pointer;
+  @include baseMixin.createAnimationTransition(all, 0.1s);
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+    transform: scale(1.2);
+  }
+  &:active {
+    transform: scale(0.9);
+  }
+}
+
+.vxe-image-preview-popup-wrapper {
+  user-select: none;
+  &.vxe-modal--wrapper {
+    &.type--modal {
+      .vxe-modal--box {
+        border: 0;
+        background-color: rgba(0, 0, 0, 0.1);
+        box-shadow: none;
+      }
+      .vxe-modal--content {
+        padding: 0;
+      }
+    }
+  }
 }

package/styles/components/image.scss

@@ -1,17 +1,17 @@
-.vxe-image {
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  vertical-align: middle;
-  &.is--circle {
-    border-radius: 50%;
-    .vxe-image-img {
-      border-radius: 50%;
-    }
-  }
-}
-
-.vxe-image-img {
-  border-style: none;
+.vxe-image {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  &.is--circle {
+    border-radius: 50%;
+    .vxe-image-img {
+      border-radius: 50%;
+    }
+  }
+}
+
+.vxe-image-img {
+  border-style: none;
 }