@tendaui/components 1.2.3 → 1.3.0

package/styles/components/dialog/_index.scss

@@ -1,311 +1,310 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import './_animate.scss';
-
-@import './_mixins.scss';
-
-@import '../../mixins/_reset.scss';
-
-@import '../../mixins/_scrollbar.scss';
-
-// <name> 替换为组件名
-.#{$prefix}-dialog {
-  @include reset;
-
-  width: $dialog-width;
-  background-color: $dialog-bg-color;
-  position: relative;
-  border: $dialog-border;
-  border-radius: $border-radius-large;
-
-  // icon theme
-  .t-icon.#{$prefix}-is-info {
-    color: $dialog-info-icon-color;
-  }
-
-  .t-icon.#{$prefix}-is-success {
-    color: $dialog-success-icon-color;
-  }
-
-  .t-icon.#{$prefix}-is-warning {
-    color: $dialog-warning-icon-color;
-  }
-
-  .t-icon.#{$prefix}-is-error {
-    color: $dialog-error-icon-color;
-  }
-
-  &--lock {
-    overflow: hidden;
-  }
-
-  &__header {
-    color: $dialog-header-text-color;
-    font: $dialog-header-font;
-    font-weight: $dialog-header-weight;
-    display: flex;
-    align-items: center;
-    word-break: break-word;
-    gap: $dialog-header-content-margin-right;
-    box-sizing: border-box;
-
-    .#{$prefix}-dialog__header-content {
-      display: flex;
-      align-items: flex-start;
-      width: 100%;
-    }
-
-    .t-icon:not(.t-icon-close) {
-      font-size: $dialog-icon-size;
-      display: inline-flex;
-      align-items: center;
-      margin-right: $dialog-header-icon-margin-right;
-      flex-shrink: 0;
-    }
-  }
-
-  &__header--fullscreen {
-    background-color: $dialog-header-bg-color-fullscreen;
-    min-height: $dialog-header-height-fullscreen;
-    justify-content: flex-end;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    padding: $dialog-header-padding-fullscreen;
-
-    .#{$prefix}-dialog__header-content {
-      box-sizing: border-box;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  &__body {
-    @include scrollbar();
-
-    color: $dialog-body-text-color;
-    font: $dialog-body-text-font;
-    overflow: auto;
-    padding: $dialog-body-padding;
-    word-break: break-word;
-
-    &__icon,
-    &--icon {
-      padding: $dialog-body-icon-padding;
-    }
-  }
-
-  &__body--fullscreen {
-    @include scrollbar();
-
-    box-sizing: border-box;
-    padding: $dialog-body-padding-fullscreen;
-    height: calc(
-      100% - $dialog-header-height-fullscreen - $dialog-footer-height-fullscreen
-    );
-    overflow: auto;
-  }
-
-  &__body--fullscreen--without-footer {
-    box-sizing: border-box;
-    padding: $dialog-body-padding-fullscreen;
-    height: calc(100% - $dialog-header-height-fullscreen);
-    overflow: auto;
-  }
-
-  &__footer {
-    width: 100%;
-    text-align: right;
-    padding: $dialog-footer-padding;
-    .#{$prefix}-button + .#{$prefix}-button {
-      margin-left: $dialog-footer-button-margin-left;
-    }
-  }
-
-  &__footer--fullscreen {
-    min-height: $dialog-footer-height-fullscreen;
-    padding: $dialog-footer-padding-fullscreen;
-    box-sizing: border-box;
-  }
-
-  &--default {
-    padding: $dialog-default-spacer;
-  }
-
-  &__close {
-    font-size: $dialog-close-icon-size;
-    color: $dialog-close-color;
-    display: flex;
-    width: $dialog-close-icon-size;
-    height: $dialog-close-icon-size;
-    align-items: center;
-    border-radius: $border-radius-default;
-    transition: all $anim-duration-base linear;
-    padding: $dialog-closebtn-padding;
-
-    &:hover {
-      cursor: pointer;
-      background: $dialog-close-icon-hover;
-    }
-
-    &:active {
-      background: $dialog-close-icon-active;
-    }
-  }
-
-  &__close--fullscreen {
-    display: flex;
-    background: transparent;
-
-    &:hover {
-      cursor: pointer;
-      background: $dialog-close-icon-fullscreen-hover;
-    }
-
-    &:active {
-      background: $dialog-close-icon-fullscreen-active;
-    }
-  }
-
-  &.#{$prefix}-dialog--draggable {
-    &:hover {
-      cursor: move;
-    }
-    .#{$prefix}-dialog__header,
-    .#{$prefix}-dialog__body,
-    .#{$prefix}-dialog__footer {
-      &:hover {
-        cursor: auto;
-      }
-    }
-  }
-
-  &__fullscreen {
-    width: 100%;
-    border-radius: 0;
-  }
-}
-
-// t-dialog 组件本身
-.#{$prefix}-dialog__ctx {
-  // dialog内容溢出需要考虑滚动
-  pointer-events: auto;
-  outline: none;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  // modeless 点击穿透 即可以操作背景后的元素
-  &.#{$prefix}-dialog__ctx--modeless {
-    pointer-events: none;
-  }
-
-  &.#{$prefix}-dialog__ctx--fixed {
-    position: fixed;
-    z-index: $z-index-dialog;
-  }
-
-  &.#{$prefix}-dialog__ctx--absolute {
-    position: absolute;
-    // 用于挂载元素 修改定位方式
-    .#{$prefix}-dialog__mask {
-      position: absolute;
-    }
-    .#{$prefix}-dialog__wrap {
-      position: absolute;
-    }
-  }
-
-  &.#{$prefix}-is-visible {
-    visibility: visible;
-  }
-
-  &.#{$prefix}-is-hidden {
-    visibility: hidden;
-  }
-
-  &.#{$prefix}-is-display {
-    display: block;
-  }
-
-  &.#{$prefix}-not-display {
-    display: none;
-  }
-  // 遮罩层
-  .#{$prefix}-dialog__mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    background: $dialog-mask-bg-color;
-    pointer-events: auto;
-  }
-  // wrap 滚动的显示层 固定为页面窗口大小
-  .#{$prefix}-dialog__wrap {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    overflow: auto;
-    @include scrollbar(8px, 2px);
-  }
-  // 定位层 用于实现居中 或者距离顶部 定位
-  .#{$prefix}-dialog__position {
-    // 因为内容会超出 使用flex布局
-    display: flex;
-    justify-content: center;
-    min-height: 100%;
-    width: 100%;
-    // 通过修改position为absolute进行拖拽定位
-    position: relative;
-    // 设置最小距离顶部底部距离
-    padding: 48px 0;
-    box-sizing: border-box;
-    // 居中和距顶部布局
-    &.#{$prefix}-dialog--top {
-      align-items: flex-start;
-      // 这里top api实现 更改padding 因为子元素拖拽定位 如果使用子元素margin 拖拽时需要计算margin 比较麻烦
-      padding-top: $dialog-top-position-top;
-    }
-    // 垂直居中布局
-    &.#{$prefix}-dialog--center {
-      align-items: center;
-    }
-  }
-
-  .#{$prefix}-dialog__position_fullscreen {
-    // 因为内容会超出 使用flex布局
-    display: flex;
-    justify-content: center;
-    min-height: 100%;
-    width: 100%;
-    // 通过修改position为absolute进行拖拽定位
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  .#{$prefix}-is-hidden {
-    background: none;
-  }
-
-  .#{$prefix}-dialog {
-    pointer-events: auto;
-    z-index: $z-index-dialog;
-  }
-
-  &.#{$prefix}-dialog__ctx--modeless {
-    .#{$prefix}-dialog {
-      box-shadow: $shadow-3;
-    }
-  }
-}
+@use "../../_vars.scss" as *;
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use "../../_vars.scss" as *;
+
+@use "./_vars.scss" as *;
+
+@use "./_animate.scss" as *;
+
+@use "./_mixins.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+@use "../../mixins/_scrollbar.scss" as *;
+
+// <name> 替换为组件名
+.#{$prefix}-dialog {
+  @include reset;
+
+  width: $dialog-width;
+  background-color: $dialog-bg-color;
+  position: relative;
+  border: $dialog-border;
+  border-radius: $border-radius-large;
+
+  // icon theme
+  .t-icon.#{$prefix}-is-info {
+    color: $dialog-info-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-success {
+    color: $dialog-success-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-warning {
+    color: $dialog-warning-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-error {
+    color: $dialog-error-icon-color;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &__header {
+    color: $dialog-header-text-color;
+    font: $dialog-header-font;
+    font-weight: $dialog-header-weight;
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+    gap: $dialog-header-content-margin-right;
+    box-sizing: border-box;
+
+    .#{$prefix}-dialog__header-content {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .t-icon:not(.t-icon-close) {
+      font-size: $dialog-icon-size;
+      display: inline-flex;
+      align-items: center;
+      margin-inline-end: $dialog-header-icon-margin-right;
+      flex-shrink: 0;
+    }
+  }
+
+  &__header--fullscreen {
+    background-color: $dialog-header-bg-color-fullscreen;
+    min-height: $dialog-header-height-fullscreen;
+    justify-content: flex-end;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding: $dialog-header-padding-fullscreen;
+
+    .#{$prefix}-dialog__header-content {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__body {
+    @include scrollbar();
+
+    color: $dialog-body-text-color;
+    font: $dialog-body-text-font;
+    overflow: auto;
+    padding: $dialog-body-padding;
+    word-break: break-word;
+
+    &__icon,
+    &--icon {
+      padding: $dialog-body-icon-padding;
+    }
+  }
+
+  &__body--fullscreen {
+    @include scrollbar();
+
+    box-sizing: border-box;
+    padding: $dialog-body-padding-fullscreen;
+    height: calc(100% - $dialog-header-height-fullscreen - $dialog-footer-height-fullscreen);
+    overflow: auto;
+  }
+
+  &__body--fullscreen--without-footer {
+    box-sizing: border-box;
+    padding: $dialog-body-padding-fullscreen;
+    height: calc(100% - $dialog-header-height-fullscreen);
+    overflow: auto;
+  }
+
+  &__footer {
+    width: 100%;
+    text-align: end;
+    padding: $dialog-footer-padding;
+    .#{$prefix}-button + .#{$prefix}-button {
+      margin-inline-start: $dialog-footer-button-margin-left;
+    }
+  }
+
+  &__footer--fullscreen {
+    min-height: $dialog-footer-height-fullscreen;
+    padding: $dialog-footer-padding-fullscreen;
+    box-sizing: border-box;
+  }
+
+  &--default {
+    padding: $dialog-default-spacer;
+  }
+
+  &__close {
+    font-size: $dialog-close-icon-size;
+    color: $dialog-close-color;
+    display: flex;
+    width: $dialog-close-icon-size;
+    height: $dialog-close-icon-size;
+    align-items: center;
+    border-radius: $border-radius-default;
+    transition: all $anim-duration-base linear;
+    padding: $dialog-closebtn-padding;
+
+    &:hover {
+      cursor: pointer;
+      background: $dialog-close-icon-hover;
+    }
+
+    &:active {
+      background: $dialog-close-icon-active;
+    }
+  }
+
+  &__close--fullscreen {
+    display: flex;
+    background: transparent;
+
+    &:hover {
+      cursor: pointer;
+      background: $dialog-close-icon-fullscreen-hover;
+    }
+
+    &:active {
+      background: $dialog-close-icon-fullscreen-active;
+    }
+  }
+
+  &.#{$prefix}-dialog--draggable {
+    &:hover {
+      cursor: move;
+    }
+    .#{$prefix}-dialog__header,
+    .#{$prefix}-dialog__body,
+    .#{$prefix}-dialog__footer {
+      &:hover {
+        cursor: auto;
+      }
+    }
+  }
+
+  &__fullscreen {
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+// t-dialog 组件本身
+.#{$prefix}-dialog__ctx {
+  // dialog内容溢出需要考虑滚动
+  pointer-events: auto;
+  outline: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  // modeless 点击穿�?即可以操作背景后的元�?
+  &.#{$prefix}-dialog__ctx--modeless {
+    pointer-events: none;
+  }
+
+  &.#{$prefix}-dialog__ctx--fixed {
+    position: fixed;
+    z-index: $z-index-dialog;
+  }
+
+  &.#{$prefix}-dialog__ctx--absolute {
+    position: absolute;
+    // 用于挂载元素 修改定位方式
+    .#{$prefix}-dialog__mask {
+      position: absolute;
+    }
+    .#{$prefix}-dialog__wrap {
+      position: absolute;
+    }
+  }
+
+  &.#{$prefix}-is-visible {
+    visibility: visible;
+  }
+
+  &.#{$prefix}-is-hidden {
+    visibility: hidden;
+  }
+
+  &.#{$prefix}-is-display {
+    display: block;
+  }
+
+  &.#{$prefix}-not-display {
+    display: none;
+  }
+  // 遮罩�?
+  .#{$prefix}-dialog__mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: $dialog-mask-bg-color;
+    pointer-events: auto;
+  }
+  // wrap 滚动的显示层 固定为页面窗口大�?
+  .#{$prefix}-dialog__wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: auto;
+    @include scrollbar(8px, 2px);
+  }
+  // 定位�?用于实现居中 或者距离顶�?定位
+  .#{$prefix}-dialog__position {
+    // 因为内容会超�?使用flex布局
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+    // 通过修改position为absolute进行拖拽定位
+    position: relative;
+    // 设置最小距离顶部底部距�?
+    padding: 48px 0;
+    box-sizing: border-box;
+    // 居中和距顶部布局
+    &.#{$prefix}-dialog--top {
+      align-items: flex-start;
+      // 这里top api实现 更改padding 因为子元素拖拽定�?如果使用子元素margin 拖拽时需要计算margin 比较麻烦
+      padding-top: $dialog-top-position-top;
+    }
+    // 垂直居中布局
+    &.#{$prefix}-dialog--center {
+      align-items: center;
+    }
+  }
+
+  .#{$prefix}-dialog__position_fullscreen {
+    // 因为内容会超�?使用flex布局
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+    // 通过修改position为absolute进行拖拽定位
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}-is-hidden {
+    background: none;
+  }
+
+  .#{$prefix}-dialog {
+    pointer-events: auto;
+    z-index: $z-index-dialog;
+  }
+
+  &.#{$prefix}-dialog__ctx--modeless {
+    .#{$prefix}-dialog {
+      box-shadow: $shadow-3;
+    }
+  }
+}