@tendaui/components 1.0.0 → 1.2.3

package/styles/components/color-picker/_vars.scss

@@ -0,0 +1,84 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button，
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius等
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+$color-picker-panel-width: 256px;
+$color-picker-panel-padding: $pop-padding-xl;
+$color-picker-panel-radius: $border-radius-medium;
+$color-picker-icon-radius: $border-radius-default;
+$color-picker-saturation-height: 160px;
+$color-picker-saturation-radius: $border-radius-default;
+$color-picker-saturation-thumb-size: calc($comp-size-xxxs + $size-1);
+$color-picker-margin: $comp-margin-m;
+$color-picker-slider-height: 8px;
+$color-picker-slider-wrapper-radius: calc($color-picker-slider-height / 2);
+$color-picker-slider-wrapper-padding: 0 calc($color-picker-saturation-thumb-size / 2);
+$color-picker-slider-thumb-size: calc($comp-size-xxxs + $size-1);
+$color-picker-slider-thumb-transform-x: calc($color-picker-slider-thumb-size * -0.5);
+$color-picker-slider-thumb-padding: 2px;
+$color-picker-input-format-margin-left: $comp-margin-s;
+$color-picker-select-format-margin-right: $comp-margin-xs;
+$color-picker-select-format-width: 72px;
+$color-picker-font: $font-body-small;
+$color-picker-icon-radius: $border-radius-default;
+$color-picker-swatch-icon-size: $comp-size-xxxs;
+
+$color-picker-icon-font-size: $color-picker-swatch-icon-size;
+$color-picker-degree-width: $comp-size-xxl;
+$color-picker-gradient-preview-width: $comp-size-s;
+$color-picker-gradient-preview-height: $comp-size-s;
+$color-picker-gradient-preview-radius: $border-radius-default;
+$color-picker-swatch-action-margin-left: $comp-margin-s;
+$color-picker-swatch-width: $comp-size-xxxs;
+$color-picker-swatch-height: $comp-size-xxxs;
+$color-picker-swatch-radius: $border-radius-circle;
+$color-picker-swatch-padding: 0;
+$color-picker-swatch-border-size: 1px;
+$color-picker-swatch-columns: 10;
+$color-picker-swatch-item-padding: calc($color-picker-panel-padding - 8px); //make sure swatchItem scale
+$color-picker-swatch-item-left-negative-padding: calc(0px - $color-picker-swatch-item-padding);
+// columnGap = (panelWidth - (panelPadding * 2) + (swatchColor * columnsItem)) / 9
+$color-picker-swatch-row-gap: calc(
+  calc(
+      $color-picker-panel-width - calc(
+          calc($color-picker-panel-padding * 2) + calc($color-picker-swatch-height * $color-picker-swatch-columns)
+        )
+    ) / 9
+);
+$color-picker-swatch-column-gap: calc(
+  calc(
+      $color-picker-panel-width - calc(
+          calc($color-picker-panel-padding * 2) + calc($color-picker-swatch-width * $color-picker-swatch-columns)
+        )
+    ) / 9
+);
+$color-picker-swatch-wrap-margin-left: ($color-picker-swatch-padding + $color-picker-swatch-border-size) * -1;
+// 右边往外伸出一点，让滚动条居外侧
+$color-picker-swatch-wrap-margin-right: $color-picker-swatch-wrap-margin-left - 10px;
+$color-picker-swatch-wrap-margin: 0 $color-picker-swatch-wrap-margin-right 0 $color-picker-swatch-wrap-margin-left;
+$color-picker-swatch-max-rows: 4; // 最大显示行数
+
+// shadow
+$color-picker-panel-shadow: $shadow-2-inset;
+$color-picker-thumbs-shadow: $shadow-1;
+$colot-picker-swatch-item-color-inset-shadow: $shadow-inset;
+
+// 最大高度 = 行数 * (itemHeight + itemMarginTop)m;
+$color-picker-swatch-rows-max-height: calc(
+  $color-picker-swatch-max-rows * calc($color-picker-swatch-height + $color-picker-swatch-row-gap)
+);
+
+// trigger-input
+$color-picker-trigger-input-padding: 0 $comp-paddingLR-s 0 $comp-paddingLR-xs;
+$color-picker-trigger-input-color-inner-size: calc($comp-size-xs - 2px);
+$color-picker-trigger-input-color-inner-size-s: calc($comp-size-xxs - 2px);
+$color-picker-trigger-input-color-inner-size-l: calc($comp-size-s - 2px);

package/styles/components/dialog/_animate.scss

@@ -1,135 +1,135 @@
-@import '../../_vars.scss';
-
-.#{$prefix}-dialog-zoom {
-  @keyframes tDialogZoomIn {
-    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
-    0% {
-      opacity: 0;
-      transform: scale(0.01);
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes tDialogZoomOut {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(0.01);
-    }
-  }
-
-  @keyframes tDialogMaskIn {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes tDialogMaskOut {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  @mixin animation-enter {
-    animation-duration: $dialog-anim-duration;
-    animation-fill-mode: both;
-    animation-timing-function: $anim-time-fn-ease-out;
-    animation-play-state: paused;
-  }
-
-  @mixin animation-exit {
-    animation-duration: $dialog-anim-duration;
-    animation-fill-mode: both;
-    animation-timing-function: $dialog-anim-time-fn-exit;
-    animation-play-state: paused;
-  }
-
-  @mixin animation-active {
-    animation-play-state: running;
-    animation-fill-mode: both;
-  }
-
-  &-enter,
-  &-enter-from,
-  &-appear {
-    @include animation-enter;
-  }
-
-  &-exit {
-    @include animation-exit;
-  }
-
-  &-enter-active,
-  &-appear-active {
-    animation-name: tDialogZoomIn;
-    @include animation-active;
-  }
-
-  &-exit-active {
-    animation-name: tDialogZoomOut;
-    @include animation-active;
-  }
-
-
-}
-
-.#{$prefix}-dialog-fade-enter,
-.#{$prefix}-dialog-fade-appear {
-  opacity: 0;
-  animation-duration: $dialog-anim-duration;
-  animation-fill-mode: both;
-  animation-timing-function: $anim-time-fn-ease-out;
-  animation-play-state: paused;
-}
-
-.#{$prefix}-dialog-fade-exit {
-  animation-duration: $dialog-anim-duration;
-  animation-fill-mode: both;
-  animation-timing-function: $anim-time-fn-ease-out;
-  animation-play-state: paused;
-}
-
-.#{$prefix}-dialog-fade-enter.#{$prefix}-dialog-fade-enter-active,
-.#{$prefix}-dialog-fade-appear.#{$prefix}-dialog-fade-appear-active {
-  animation-name: tDialogFadeIn;
-  animation-play-state: running;
-}
-
-.#{$prefix}-dialog-fade-exit.#{$prefix}-dialog-fade-exit-active {
-  animation-name: tDialogFadeOut;
-  animation-play-state: running;
-}
-
-@keyframes tDialogFadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes tDialogFadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
+@import '../../_vars.scss';
+
+.#{$prefix}-dialog-zoom {
+  @keyframes tDialogZoomIn {
+    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
+    0% {
+      opacity: 0;
+      transform: scale(0.01);
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tDialogZoomOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.01);
+    }
+  }
+
+  @keyframes tDialogMaskIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tDialogMaskOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @mixin animation-enter {
+    animation-duration: $dialog-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: $anim-time-fn-ease-out;
+    animation-play-state: paused;
+  }
+
+  @mixin animation-exit {
+    animation-duration: $dialog-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: $dialog-anim-time-fn-exit;
+    animation-play-state: paused;
+  }
+
+  @mixin animation-active {
+    animation-play-state: running;
+    animation-fill-mode: both;
+  }
+
+  &-enter,
+  &-enter-from,
+  &-appear {
+    @include animation-enter;
+  }
+
+  &-exit {
+    @include animation-exit;
+  }
+
+  &-enter-active,
+  &-appear-active {
+    animation-name: tDialogZoomIn;
+    @include animation-active;
+  }
+
+  &-exit-active {
+    animation-name: tDialogZoomOut;
+    @include animation-active;
+  }
+
+
+}
+
+.#{$prefix}-dialog-fade-enter,
+.#{$prefix}-dialog-fade-appear {
+  opacity: 0;
+  animation-duration: $dialog-anim-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $anim-time-fn-ease-out;
+  animation-play-state: paused;
+}
+
+.#{$prefix}-dialog-fade-exit {
+  animation-duration: $dialog-anim-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $anim-time-fn-ease-out;
+  animation-play-state: paused;
+}
+
+.#{$prefix}-dialog-fade-enter.#{$prefix}-dialog-fade-enter-active,
+.#{$prefix}-dialog-fade-appear.#{$prefix}-dialog-fade-appear-active {
+  animation-name: tDialogFadeIn;
+  animation-play-state: running;
+}
+
+.#{$prefix}-dialog-fade-exit.#{$prefix}-dialog-fade-exit-active {
+  animation-name: tDialogFadeOut;
+  animation-play-state: running;
+}
+
+@keyframes tDialogFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes tDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}