vxe-pc-ui 3.14.4 → 3.14.6

package/styles/components/modal.scss

@@ -1,481 +1,481 @@
-@use '../helpers/baseMixin.scss';
-
-html[data-vxe-lock-scroll] {
-  overflow: hidden;
-  body {
-    overflow: hidden;
-    width: var(--vxe-ui-modal-lock-scroll-view-width);
-  }
-}
-
-.vxe-modal--box {
-  visibility: hidden;
-  width: 420px;
-  background-color: var(--vxe-ui-layout-background-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  border: 1px solid var(--vxe-ui-base-popup-border-color);
-  text-align: left;
-  pointer-events: auto;
-  opacity: 0;
-  outline: 0;
-  &.is--drag {
-    cursor: move;
-   .vxe-modal--body,
-   .vxe-modal--footer {
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .vxe-modal--body {
-      overflow: hidden;
-      .vxe-modal--content {
-        overflow: hidden;
-      }
-    }
-  }
-}
-.vxe-modal--aside {
-  flex-shrink: 0;
-  overflow: auto;
-}
-.vxe-modal--container {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-}
-.vxe-modal--status-wrapper {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  font-size: 1.6em;
-}
-.vxe-modal--content {
-  flex-grow: 1;
-  white-space: pre-line;
-}
-.vxe-modal--header,
-.vxe-modal--body,
-.vxe-modal--footer {
-  position: relative;
-}
-.vxe-modal--body {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  outline: 0;
-}
-.vxe-modal--body-left,
-.vxe-modal--body-right {
-  flex-shrink: 0;
-  overflow: auto;
-  outline: 0;
-}
-.vxe-modal--body-default {
-  display: flex;
-  flex-grow: 1;
-  overflow: auto;
-  outline: 0;
-}
-.vxe-modal--header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 2.8em;
-  flex-shrink: 0;
-  font-size: 1.1em;
-  font-weight: 700;
-  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
-  user-select: none;
-  &.is--ellipsis {
-    .vxe-modal--header-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-.vxe-modal--footer-wrapper {
-  display: flex;
-  flex-direction: row;
-  .vxe-modal--footer-left {
-    flex-grow: 1;
-    text-align: left
-  }
-  .vxe-modal--footer-right {
-    flex-shrink: 0;
-  }
-}
-.vxe-modal--header-title {
-  flex-grow: 1;
-  padding: 0.8em 0 0.8em 0.6em;
-}
-.vxe-modal--header-right {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  padding: 0 0.6em 0 0;
-}
-.vxe-modal--zoom-btn,
-.vxe-modal--close-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.6em;
-  height: 1.6em;
-  margin-left: 0.5em;
-  cursor: pointer;
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
-  }
-}
-.vxe-modal--footer {
-  flex-shrink: 0;
-  text-align: right;
-  padding: 0.4em 1em 0.8em 1em;
-}
-.vxe-modal--resize {
-  $SpaceSize: 8px;
-  $SpaceWidth: 5px;
-  .wl-resize,
-  .wr-resize,
-  .swst-resize,
-  .sest-resize,
-  .st-resize,
-  .swlb-resize,
-  .selb-resize,
-  .sb-resize {
-    position: absolute;
-    z-index: 100;
-  }
-  .wl-resize,
-  .wr-resize {
-    width: $SpaceSize;
-    height: 100%;
-    top: 0;
-    cursor: w-resize;
-  }
-  .wl-resize {
-    left: -$SpaceWidth;
-  }
-  .wr-resize {
-    right: -$SpaceWidth;
-  }
-  .swst-resize,
-  .sest-resize,
-  .swlb-resize,
-  .selb-resize {
-    width: $SpaceSize + 2;
-    height: $SpaceSize + 2;
-    z-index: 101;
-  }
-  .swst-resize,
-  .sest-resize {
-    top: -$SpaceSize;
-  }
-  .swlb-resize,
-  .selb-resize {
-    bottom: -$SpaceSize;
-  }
-  .sest-resize,
-  .swlb-resize {
-    cursor: sw-resize;
-  }
-  .swst-resize,
-  .selb-resize {
-    cursor: se-resize;
-  }
-  .swst-resize,
-  .swlb-resize {
-    left: -$SpaceSize;
-  }
-  .sest-resize,
-  .selb-resize {
-    right: -$SpaceSize;
-  }
-  .st-resize,
-  .sb-resize {
-    width: 100%;
-    height: $SpaceSize;
-    left: 0;
-    cursor: s-resize;
-  }
-  .st-resize {
-    top: -$SpaceWidth;
-  }
-  .sb-resize {
-    bottom: -$SpaceWidth;
-  }
-}
-
-.vxe-modal--wrapper {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  line-height: 1.5;
-  width: calc(100% + 18px);
-  height: calc(100% + 18px);
-  color: var(--vxe-ui-font-color);
-  font-family: var(--vxe-ui-font-family);
-  outline: 0;
-  &.is--active {
-    display: block;
-  }
-  &.is--visible {
-    &.is--mask {
-      &:before {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-    }
-    .vxe-modal--box {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-  &:not(.lock--view) {
-    pointer-events: none;
-  }
-  &.is--draggable {
-    &.zoom--revert,
-    &.zoom--minimize {
-      .vxe-modal--header-title {
-        cursor: move;
-      }
-    }
-  }
-  &.zoom--minimize,
-  &.zoom--maximize {
-    & > .vxe-modal--box {
-      & > .vxe-modal--container {
-        & > .vxe-modal--resize {
-          .wl-resize,
-          .wr-resize,
-          .swst-resize,
-          .sest-resize,
-          .st-resize,
-          .swlb-resize,
-          .selb-resize,
-          .sb-resize {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-  &.zoom--maximize {
-    & > .vxe-modal--box {
-      border-radius: 0;
-      & > .vxe-modal--container {
-        & > .vxe-modal--header {
-          border-radius: 0;
-          cursor: default;
-        }
-      }
-    }
-  }
-  &.zoom--minimize {
-    & > .vxe-modal--box {
-      & > .vxe-modal--container {
-        & > .vxe-modal--body,
-        & > .vxe-modal--footer {
-          display: none;
-        }
-      }
-    }
-  }
-  &.type--modal,
-  &.type--alert,
-  &.type--confirm {
-    &.lock--scroll {
-      overflow: hidden;
-    }
-    &:not(.lock--scroll) {
-      overflow: auto;
-    }
-  }
-  &.lock--view,
-  &.is--mask {
-    &:before {
-      content: "";
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -1;
-      pointer-events: auto;
-    }
-  }
-  &.is--mask {
-    &:before {
-      background-color: rgba(0, 0, 0, 0);
-    }
-  }
-  &.is--animat {
-    &.is--mask {
-      &:before {
-        @include baseMixin.createAnimationTransition(background-color, .2s);
-      }
-    }
-  }
-  &.type--message,
-  &.type--notification,
-  &.type--alert,
-  &.type--confirm {
-    .vxe-modal--body {
-      white-space: normal;
-      word-break: break-word;
-    }
-  }
-  &.type--message {
-    .vxe-modal--box {
-      opacity: 0;
-      transform: translate(0, -100%);
-    }
-    &.is--visible {
-      .vxe-modal--box {
-        opacity: 1;
-        transform: translate(0, 0);
-      }
-    }
-  }
-  &.type--notification {
-    &.pos--top-right {
-      .vxe-modal--box {
-        opacity: 0;
-        transform: translate(100%, 0);
-      }
-      &.is--visible {
-        .vxe-modal--box {
-          opacity: 1;
-          transform: translate(0, 0);
-        }
-      }
-    }
-  }
-  &.type--message,
-  &.type--notification {
-    width: 100%;
-    height: 100%;
-    padding: 0 var(--vxe-ui-layout-padding-double);
-    text-align: center;
-    transition: top .3s ease-in-out;
-    &.pos--top-left {
-      text-align: left;
-    }
-    &.pos--top-right {
-      text-align: right;
-    }
-    .vxe-modal--box {
-      display: inline-flex;
-      flex-direction: row;
-      margin-top: 0;
-      width: auto;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-      @include baseMixin.createAnimationTransition(all, .3s, ease-out);
-      .vxe-modal--body {
-        &:after {
-          content: '';
-          display: block;
-          clear: both;
-          height: 0;
-          overflow: hidden;
-          visibility: hidden;
-        }
-      }
-      .vxe-modal--content {
-        max-width: 800px;
-        float: left;
-      }
-    }
-  }
-  &.type--modal,
-  &.type--alert,
-  &.type--confirm {
-    .vxe-modal--box {
-      display: flex;
-      flex-direction: row;
-      position: fixed;
-      left: 50%;
-      top: 0;
-      box-shadow: var(--vxe-ui-base-popup-box-shadow);
-    }
-    .vxe-modal--header {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-      background-color: var(--vxe-ui-modal-header-background-color);
-    }
-    .vxe-modal--body {
-      overflow: auto;
-      .vxe-modal--content {
-        overflow: auto;
-      }
-    }
-  }
-
-  &.status--info {
-    .vxe-modal--status-wrapper {
-      color: var(--vxe-ui-status-info-color);
-    }
-  }
-  &.status--warning,
-  &.status--question {
-    .vxe-modal--status-wrapper {
-      color: var(--vxe-ui-status-warning-color);
-    }
-  }
-  &.status--success {
-    .vxe-modal--status-wrapper {
-      color: var(--vxe-ui-status-success-color);
-    }
-  }
-  &.status--error {
-    .vxe-modal--status-wrapper {
-      color: var(--vxe-ui-status-danger-color);
-    }
-  }
-  &.status--loading {
-    .vxe-modal--status-wrapper {
-      color: var(--vxe-ui-font-disabled-color);
-    }
-  }
-  &.is--padding {
-    .vxe-modal--aside {
-      padding: 0.8em 0.6em;
-    }
-    .vxe-modal--body-default {
-      padding: 0.8em 0.6em;
-      .vxe-modal--status-wrapper {
-        padding-right: 0.6em;
-      }
-    }
-    &.type--notification {
-      .vxe-modal--body-default {
-        padding-top: 0;
-      }
-    }
-  }
-  &.type--message {
-    .vxe-modal--body-default {
-      padding-right: 1.2em;
-    }
-  }
-}
-
-.vxe-modal--wrapper {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
+@use '../helpers/baseMixin.scss';
+
+html[data-vxe-lock-scroll] {
+  overflow: hidden;
+  body {
+    overflow: hidden;
+    width: var(--vxe-ui-modal-lock-scroll-view-width);
+  }
+}
+
+.vxe-modal--box {
+  visibility: hidden;
+  width: 420px;
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  text-align: left;
+  pointer-events: auto;
+  opacity: 0;
+  outline: 0;
+  &.is--drag {
+    cursor: move;
+   .vxe-modal--body,
+   .vxe-modal--footer {
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .vxe-modal--body {
+      overflow: hidden;
+      .vxe-modal--content {
+        overflow: hidden;
+      }
+    }
+  }
+}
+.vxe-modal--aside {
+  flex-shrink: 0;
+  overflow: auto;
+}
+.vxe-modal--container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+.vxe-modal--status-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  font-size: 1.6em;
+}
+.vxe-modal--content {
+  flex-grow: 1;
+  white-space: pre-line;
+}
+.vxe-modal--header,
+.vxe-modal--body,
+.vxe-modal--footer {
+  position: relative;
+}
+.vxe-modal--body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  outline: 0;
+}
+.vxe-modal--body-left,
+.vxe-modal--body-right {
+  flex-shrink: 0;
+  overflow: auto;
+  outline: 0;
+}
+.vxe-modal--body-default {
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  outline: 0;
+}
+.vxe-modal--header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 2.8em;
+  flex-shrink: 0;
+  font-size: 1.1em;
+  font-weight: 700;
+  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
+  user-select: none;
+  &.is--ellipsis {
+    .vxe-modal--header-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+.vxe-modal--footer-wrapper {
+  display: flex;
+  flex-direction: row;
+  .vxe-modal--footer-left {
+    flex-grow: 1;
+    text-align: left
+  }
+  .vxe-modal--footer-right {
+    flex-shrink: 0;
+  }
+}
+.vxe-modal--header-title {
+  flex-grow: 1;
+  padding: 0.8em 0 0.8em 0.6em;
+}
+.vxe-modal--header-right {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  padding: 0 0.6em 0 0;
+}
+.vxe-modal--zoom-btn,
+.vxe-modal--close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  margin-left: 0.5em;
+  cursor: pointer;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
+}
+.vxe-modal--footer {
+  flex-shrink: 0;
+  text-align: right;
+  padding: 0.4em 1em 0.8em 1em;
+}
+.vxe-modal--resize {
+  $SpaceSize: 8px;
+  $SpaceWidth: 5px;
+  .wl-resize,
+  .wr-resize,
+  .swst-resize,
+  .sest-resize,
+  .st-resize,
+  .swlb-resize,
+  .selb-resize,
+  .sb-resize {
+    position: absolute;
+    z-index: 100;
+  }
+  .wl-resize,
+  .wr-resize {
+    width: $SpaceSize;
+    height: 100%;
+    top: 0;
+    cursor: w-resize;
+  }
+  .wl-resize {
+    left: -$SpaceWidth;
+  }
+  .wr-resize {
+    right: -$SpaceWidth;
+  }
+  .swst-resize,
+  .sest-resize,
+  .swlb-resize,
+  .selb-resize {
+    width: $SpaceSize + 2;
+    height: $SpaceSize + 2;
+    z-index: 101;
+  }
+  .swst-resize,
+  .sest-resize {
+    top: -$SpaceSize;
+  }
+  .swlb-resize,
+  .selb-resize {
+    bottom: -$SpaceSize;
+  }
+  .sest-resize,
+  .swlb-resize {
+    cursor: sw-resize;
+  }
+  .swst-resize,
+  .selb-resize {
+    cursor: se-resize;
+  }
+  .swst-resize,
+  .swlb-resize {
+    left: -$SpaceSize;
+  }
+  .sest-resize,
+  .selb-resize {
+    right: -$SpaceSize;
+  }
+  .st-resize,
+  .sb-resize {
+    width: 100%;
+    height: $SpaceSize;
+    left: 0;
+    cursor: s-resize;
+  }
+  .st-resize {
+    top: -$SpaceWidth;
+  }
+  .sb-resize {
+    bottom: -$SpaceWidth;
+  }
+}
+
+.vxe-modal--wrapper {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  line-height: 1.5;
+  width: calc(100% + 18px);
+  height: calc(100% + 18px);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  outline: 0;
+  &.is--active {
+    display: block;
+  }
+  &.is--visible {
+    &.is--mask {
+      &:before {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
+    .vxe-modal--box {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+  &:not(.lock--view) {
+    pointer-events: none;
+  }
+  &.is--draggable {
+    &.zoom--revert,
+    &.zoom--minimize {
+      .vxe-modal--header-title {
+        cursor: move;
+      }
+    }
+  }
+  &.zoom--minimize,
+  &.zoom--maximize {
+    & > .vxe-modal--box {
+      & > .vxe-modal--container {
+        & > .vxe-modal--resize {
+          .wl-resize,
+          .wr-resize,
+          .swst-resize,
+          .sest-resize,
+          .st-resize,
+          .swlb-resize,
+          .selb-resize,
+          .sb-resize {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  &.zoom--maximize {
+    & > .vxe-modal--box {
+      border-radius: 0;
+      & > .vxe-modal--container {
+        & > .vxe-modal--header {
+          border-radius: 0;
+          cursor: default;
+        }
+      }
+    }
+  }
+  &.zoom--minimize {
+    & > .vxe-modal--box {
+      & > .vxe-modal--container {
+        & > .vxe-modal--body,
+        & > .vxe-modal--footer {
+          display: none;
+        }
+      }
+    }
+  }
+  &.type--modal,
+  &.type--alert,
+  &.type--confirm {
+    &.lock--scroll {
+      overflow: hidden;
+    }
+    &:not(.lock--scroll) {
+      overflow: auto;
+    }
+  }
+  &.lock--view,
+  &.is--mask {
+    &:before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      pointer-events: auto;
+    }
+  }
+  &.is--mask {
+    &:before {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+  &.is--animat {
+    &.is--mask {
+      &:before {
+        @include baseMixin.createAnimationTransition(background-color, .2s);
+      }
+    }
+  }
+  &.type--message,
+  &.type--notification,
+  &.type--alert,
+  &.type--confirm {
+    .vxe-modal--body {
+      white-space: normal;
+      word-break: break-word;
+    }
+  }
+  &.type--message {
+    .vxe-modal--box {
+      opacity: 0;
+      transform: translate(0, -100%);
+    }
+    &.is--visible {
+      .vxe-modal--box {
+        opacity: 1;
+        transform: translate(0, 0);
+      }
+    }
+  }
+  &.type--notification {
+    &.pos--top-right {
+      .vxe-modal--box {
+        opacity: 0;
+        transform: translate(100%, 0);
+      }
+      &.is--visible {
+        .vxe-modal--box {
+          opacity: 1;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+  &.type--message,
+  &.type--notification {
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--vxe-ui-layout-padding-double);
+    text-align: center;
+    transition: top .3s ease-in-out;
+    &.pos--top-left {
+      text-align: left;
+    }
+    &.pos--top-right {
+      text-align: right;
+    }
+    .vxe-modal--box {
+      display: inline-flex;
+      flex-direction: row;
+      margin-top: 0;
+      width: auto;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+      @include baseMixin.createAnimationTransition(all, .3s, ease-out);
+      .vxe-modal--body {
+        &:after {
+          content: '';
+          display: block;
+          clear: both;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+      .vxe-modal--content {
+        max-width: 800px;
+        float: left;
+      }
+    }
+  }
+  &.type--modal,
+  &.type--alert,
+  &.type--confirm {
+    .vxe-modal--box {
+      display: flex;
+      flex-direction: row;
+      position: fixed;
+      left: 50%;
+      top: 0;
+      box-shadow: var(--vxe-ui-base-popup-box-shadow);
+    }
+    .vxe-modal--header {
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+      background-color: var(--vxe-ui-modal-header-background-color);
+    }
+    .vxe-modal--body {
+      overflow: auto;
+      .vxe-modal--content {
+        overflow: auto;
+      }
+    }
+  }
+
+  &.status--info {
+    .vxe-modal--status-wrapper {
+      color: var(--vxe-ui-status-info-color);
+    }
+  }
+  &.status--warning,
+  &.status--question {
+    .vxe-modal--status-wrapper {
+      color: var(--vxe-ui-status-warning-color);
+    }
+  }
+  &.status--success {
+    .vxe-modal--status-wrapper {
+      color: var(--vxe-ui-status-success-color);
+    }
+  }
+  &.status--error {
+    .vxe-modal--status-wrapper {
+      color: var(--vxe-ui-status-danger-color);
+    }
+  }
+  &.status--loading {
+    .vxe-modal--status-wrapper {
+      color: var(--vxe-ui-font-disabled-color);
+    }
+  }
+  &.is--padding {
+    .vxe-modal--aside {
+      padding: 0.8em 0.6em;
+    }
+    .vxe-modal--body-default {
+      padding: 0.8em 0.6em;
+      .vxe-modal--status-wrapper {
+        padding-right: 0.6em;
+      }
+    }
+    &.type--notification {
+      .vxe-modal--body-default {
+        padding-top: 0;
+      }
+    }
+  }
+  &.type--message {
+    .vxe-modal--body-default {
+      padding-right: 1.2em;
+    }
+  }
+}
+
+.vxe-modal--wrapper {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
 }