@tendaui/components 1.2.4 → 1.3.0

package/styles/components/popup/_mixin.scss

@@ -1,149 +1,149 @@
-@use "../../_vars.scss" as *;
-@use "./_vars.scss" as *;
-@mixin content-placement-top {
-  .#{$prefix}-popup[data-popper-placement^="top"] {
-    .#{$prefix}-popup__content {
-      margin-bottom: $popup-content-margin;
-
-      &--arrow {
-        margin-bottom: $popup-content-arrow-spacer;
-      }
-    }
-  }
-}
-
-@mixin content-placement-bottom {
-  .#{$prefix}-popup[data-popper-placement^="bottom"] {
-    .#{$prefix}-popup__content {
-      margin-top: $popup-content-margin;
-
-      &--arrow {
-        margin-top: $popup-content-arrow-spacer;
-      }
-    }
-  }
-}
-
-@mixin content-placement-left {
-  .#{$prefix}-popup[data-popper-placement^="left"] {
-    .#{$prefix}-popup__content {
-      margin-right: $popup-content-margin;
-
-      &--arrow {
-        margin-right: $popup-content-arrow-spacer;
-      }
-
-      &--text {
-        max-width: 480px;
-      }
-    }
-  }
-}
-
-@mixin content-placement-right {
-  .#{$prefix}-popup[data-popper-placement^="right"] {
-    .#{$prefix}-popup__content {
-      margin-left: $popup-content-margin;
-
-      &--arrow {
-        margin-left: $popup-content-arrow-spacer;
-      }
-
-      &--text {
-        max-width: 480px;
-      }
-    }
-  }
-}
-
-@mixin arrow-placement-top() {
-  .#{$prefix}-popup[data-popper-placement^="top"] .#{$prefix}-popup__arrow {
-    &::before {
-      border-top-left-radius: 100%;
-      box-shadow: $popup-top-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top-start"] .#{$prefix}-popup__arrow {
-    left: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top"] .#{$prefix}-popup__arrow {
-    left: 50%;
-    margin-left: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top-end"] .#{$prefix}-popup__arrow {
-    left: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin arrow-placement-bottom() {
-  .#{$prefix}-popup[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow {
-    top: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      border-bottom-right-radius: 100%;
-      box-shadow: $popup-bottom-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom-start"] .#{$prefix}-popup__arrow {
-    left: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom"] .#{$prefix}-popup__arrow {
-    left: 50%;
-    margin-left: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom-end"] .#{$prefix}-popup__arrow {
-    left: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin arrow-placement-left() {
-  .#{$prefix}-popup[data-popper-placement^="left"] .#{$prefix}-popup__arrow {
-    right: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      box-shadow: $popup-left-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left-start"] .#{$prefix}-popup__arrow {
-    top: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left"] .#{$prefix}-popup__arrow {
-    top: 50%;
-    margin-top: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left-end"] .#{$prefix}-popup__arrow {
-    top: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin arrow-placement-right() {
-  .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
-    left: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      box-shadow: $popup-right-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right-start"] .#{$prefix}-popup__arrow {
-    top: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right"] .#{$prefix}-popup__arrow {
-    top: 50%;
-    margin-top: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right-end"] .#{$prefix}-popup__arrow {
-    top: calc(100% - $popup-arrow-width * 2);
-  }
-}
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@mixin content-placement-top {
+  .#{$prefix}-popup[data-popper-placement^="top"] {
+    .#{$prefix}-popup__content {
+      margin-bottom: $popup-content-margin;
+
+      &--arrow {
+        margin-bottom: $popup-content-arrow-spacer;
+      }
+    }
+  }
+}
+
+@mixin content-placement-bottom {
+  .#{$prefix}-popup[data-popper-placement^="bottom"] {
+    .#{$prefix}-popup__content {
+      margin-top: $popup-content-margin;
+
+      &--arrow {
+        margin-top: $popup-content-arrow-spacer;
+      }
+    }
+  }
+}
+
+@mixin content-placement-left {
+  .#{$prefix}-popup[data-popper-placement^="left"] {
+    .#{$prefix}-popup__content {
+      margin-right: $popup-content-margin;
+
+      &--arrow {
+        margin-right: $popup-content-arrow-spacer;
+      }
+
+      &--text {
+        max-width: 480px;
+      }
+    }
+  }
+}
+
+@mixin content-placement-right {
+  .#{$prefix}-popup[data-popper-placement^="right"] {
+    .#{$prefix}-popup__content {
+      margin-left: $popup-content-margin;
+
+      &--arrow {
+        margin-left: $popup-content-arrow-spacer;
+      }
+
+      &--text {
+        max-width: 480px;
+      }
+    }
+  }
+}
+
+@mixin arrow-placement-top() {
+  .#{$prefix}-popup[data-popper-placement^="top"] .#{$prefix}-popup__arrow {
+    &::before {
+      border-top-left-radius: 100%;
+      box-shadow: $popup-top-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top-start"] .#{$prefix}-popup__arrow {
+    left: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top"] .#{$prefix}-popup__arrow {
+    left: 50%;
+    margin-left: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top-end"] .#{$prefix}-popup__arrow {
+    left: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-bottom() {
+  .#{$prefix}-popup[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow {
+    top: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      border-bottom-right-radius: 100%;
+      box-shadow: $popup-bottom-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom-start"] .#{$prefix}-popup__arrow {
+    left: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom"] .#{$prefix}-popup__arrow {
+    left: 50%;
+    margin-left: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom-end"] .#{$prefix}-popup__arrow {
+    left: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-left() {
+  .#{$prefix}-popup[data-popper-placement^="left"] .#{$prefix}-popup__arrow {
+    right: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      box-shadow: $popup-left-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left-start"] .#{$prefix}-popup__arrow {
+    top: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left"] .#{$prefix}-popup__arrow {
+    top: 50%;
+    margin-top: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left-end"] .#{$prefix}-popup__arrow {
+    top: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-right() {
+  .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
+    left: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      box-shadow: $popup-right-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right-start"] .#{$prefix}-popup__arrow {
+    top: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right"] .#{$prefix}-popup__arrow {
+    top: 50%;
+    margin-top: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right-end"] .#{$prefix}-popup__arrow {
+    top: calc(100% - $popup-arrow-width * 2);
+  }
+}

package/styles/components/popup/_vars.scss

@@ -1,33 +1,33 @@
-@use "../../_vars.scss" as *;
-// 颜色
-$popup-bg: $bg-color-container;
-$arrow-bg: $bg-color-container;
-$popup-text-color: $text-color-primary;
-
-// 间距
-$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
-$popup-content-line-height: $text-line-height-base;
-$popup-arrow-width: 8px;
-$popup-arrow-height: 8px;
-$popup-content-arrow-spacer: $comp-margin-l;
-$popup-content-margin: $comp-margin-s;
-
-// 箭头位置偏移
-$popup-arrow-position: $popup-arrow-width;
-$popup-content-font-size: $font-size-base;
-
-// 阴影
-$popup-shadow: $shadow-2-inset;
-$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
-$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
-$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
-$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
-
-// 动画
-$popup-flow: "#{prefix}-popup--animation";
-$popup-flow-duration: $anim-duration-base;
-$popup-flow-fn: $anim-time-fn-ease-in;
-$popup-flow-transition-enter: opacity $popup-flow-duration linear;
-$popup-flow-transition-leave:
-  opacity $popup-flow-duration $anim-time-fn-ease-out,
-  visibility $popup-flow-duration $popup-flow-fn;
+@use "../../_vars.scss" as *;
+// 颜色
+$popup-bg: $bg-color-container;
+$arrow-bg: $bg-color-container;
+$popup-text-color: $text-color-primary;
+
+// 间距
+$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
+$popup-content-line-height: $text-line-height-base;
+$popup-arrow-width: 8px;
+$popup-arrow-height: 8px;
+$popup-content-arrow-spacer: $comp-margin-l;
+$popup-content-margin: $comp-margin-s;
+
+// 箭头位置偏移
+$popup-arrow-position: $popup-arrow-width;
+$popup-content-font-size: $font-size-base;
+
+// 阴影
+$popup-shadow: $shadow-2-inset;
+$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
+$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
+$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
+$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
+
+// 动画
+$popup-flow: "#{prefix}-popup--animation";
+$popup-flow-duration: $anim-duration-base;
+$popup-flow-fn: $anim-time-fn-ease-in;
+$popup-flow-transition-enter: opacity $popup-flow-duration linear;
+$popup-flow-transition-leave:
+  opacity $popup-flow-duration $anim-time-fn-ease-out,
+  visibility $popup-flow-duration $popup-flow-fn;