@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/button/iconButton.css

@@ -0,0 +1,160 @@
+/* shadow */
+/* sizing */
+/* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.semi-button.semi-button-with-icon {
+  display: inline-flex;
+  align-items: center;
+}
+.semi-button.semi-button-with-icon .semi-button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.semi-button.semi-button-loading {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.semi-button.semi-button-loading .semi-button-content > svg {
+  width: 16px;
+  height: 16px;
+  animation: 0.6s linear infinite semi-animation-rotate;
+}
+.semi-button.semi-button-with-icon-only {
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  justify-content: center;
+  align-items: center;
+}
+.semi-button.semi-button-with-icon-only.semi-button-size-small {
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.semi-button.semi-button-with-icon-only.semi-button-size-large {
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.semi-button-content-left {
+  margin-right: 8px;
+}
+.semi-button-content-right {
+  margin-left: 8px;
+}
+
+.semi-rtl .semi-button,
+.semi-portal-rtl .semi-button {
+  direction: rtl;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-size-small,
+.semi-portal-rtl .semi-button-size-small {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-size-large,
+.semi-portal-rtl .semi-button-size-large {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-rtl .semi-button-group,
+.semi-portal-rtl .semi-button-group {
+  direction: rtl;
+}
+.semi-rtl .semi-button-group > .semi-button,
+.semi-portal-rtl .semi-button-group > .semi-button {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button:first-child,
+.semi-portal-rtl .semi-button-group > .semi-button:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+}
+.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
+  border-left: 1px var(--semi-color-border) solid;
+  border-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button:last-child,
+.semi-portal-rtl .semi-button-group > .semi-button:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-rtl .semi-button.semi-button-with-icon-only,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-content-left,
+.semi-portal-rtl .semi-button-content-left {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.semi-rtl .semi-button-content-right,
+.semi-portal-rtl .semi-button-content-right {
+  margin-right: 8px;
+  margin-left: 0;
+}

package/lib/cjs/button/iconButton.scss

@@ -0,0 +1,70 @@
+@import "./variables.scss";
+@import "../keyframes/rotate.scss";
+
+$module: #{$prefix}-button;
+
+.#{$module} {
+    &.#{$module}-with-icon {
+        display: inline-flex;
+        align-items: center;
+
+        .#{$module}-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    &.#{$module}-loading {
+        pointer-events: none;
+        cursor: not-allowed;
+
+        .#{$module}-content {
+
+            &>svg {
+                width: 16px;
+                height: 16px;
+                animation: .6s linear infinite #{$prefix}-animation-rotate;
+            }
+        }
+    }
+
+    &.#{$module}-with-icon-only {
+        padding-left: $spacing-button_iconOnly_default-paddingLeft;
+        padding-right: $spacing-button_iconOnly_default-paddingRight;
+        padding-top: $spacing-button_iconOnly_default-paddingTop;
+        padding-bottom: $spacing-button_iconOnly_default-paddingRight;
+        justify-content: center;
+        align-items: center;
+
+        &.#{$module}-size {
+
+            &-small {
+                padding-left: $spacing-button_iconOnly_small-paddingLeft;
+                padding-right: $spacing-button_iconOnly_small-paddingRight;
+                padding-top: $spacing-button_iconOnly_small-paddingTop;
+                padding-bottom: $spacing-button_iconOnly_small-paddingBottom;
+            }
+
+            &-large {
+                padding-left: $spacing-button_iconOnly_large-paddingLeft;
+                padding-right: $spacing-button_iconOnly_large-paddingRight;
+                padding-top: $spacing-button_iconOnly_large-paddingTop;
+                padding-bottom: $spacing-button_iconOnly_large-paddingBottom;
+            }
+        }
+    }
+
+    &-content {
+
+        &-left {
+            margin-right: $spacing-button_iconOnly_content-marginRight;
+        }
+
+        &-right {
+            margin-left: $spacing-button_iconOnly_content-marginLeft;
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/button/rtl.scss

@@ -0,0 +1,128 @@
+$module: #{$prefix}-button;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        padding-left: $spacing-button_default-paddingRight;
+        padding-right: $spacing-button_default-paddingLeft;
+
+        &-size-small {
+            padding-left: $spacing-button_small-paddingRight;
+            padding-right: $spacing-button_small-paddingLeft;
+        }
+
+        &-size-large {
+            padding-left: $spacing-button_large-paddingRight;
+            padding-right: $spacing-button_large-paddingLeft;
+        }
+
+        &-group {
+            direction: rtl;
+
+            & > .#{$module} {
+                padding-left: 0;
+                padding-right: 0;
+
+                .#{$module}-content {
+                    padding-left: $spacing-button_default-paddingRight;
+                    padding-right: $spacing-button_default-paddingLeft;
+                }
+
+                &-size-large {
+                    .#{$module}-content {
+                        padding-left: $spacing-button_large-paddingRight;
+                        padding-right: $spacing-button_large-paddingLeft;
+                    }
+                }
+
+                &-size-small {
+                    .#{$module}-content {
+                        padding-left: $spacing-button_small-paddingRight;
+                        padding-right: $spacing-button_small-paddingLeft;
+                    }
+                }
+
+                &.#{$module}-with-icon-only {
+                    padding-left: 0;
+                    padding-right: 0;
+
+                    .#{$module}-content {
+                        padding-left: $spacing-button_iconOnly_default-paddingRight;
+                        padding-right: $spacing-button_iconOnly_default-paddingLeft;
+                    }
+
+                    &.#{$module}-size {
+
+                        &-small {
+                            .#{$module}-content {
+                                padding-left: $spacing-button_iconOnly_small-paddingRight;
+                                padding-right: $spacing-button_iconOnly_small-paddingLeft;
+                            }
+                        }
+
+                        &-large {
+                            .#{$module}-content {
+                                padding-left: $spacing-button_iconOnly_large-paddingRight;
+                                padding-right: $spacing-button_iconOnly_large-paddingLeft;
+                            }
+                        }
+                    }
+                }
+
+                &:first-child {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    border-top-right-radius: $radius-button_group;
+                    border-bottom-right-radius: $radius-button_group;
+                }
+
+                &:not(:last-child) {
+                    .#{$prefix}-button-content {
+                        border-left: $width-button_group-border $color-button_group-border-default solid;
+                        border-right: 0;
+                    }
+                }
+
+                &:last-child {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-top-left-radius: $radius-button_group;
+                    border-bottom-left-radius: $radius-button_group;
+                }
+            }
+        }
+
+        &.#{$module}-with-icon-only {
+            padding-left: $spacing-button_iconOnly_default-paddingRight;
+            padding-right: $spacing-button_iconOnly_default-paddingLeft;
+
+            &.#{$module}-size {
+
+                &-small {
+                    padding-left: $spacing-button_iconOnly_small-paddingRight;
+                    padding-right: $spacing-button_iconOnly_small-paddingLeft;
+                }
+
+                &-large {
+                    padding-left: $spacing-button_iconOnly_large-paddingRight;
+                    padding-right: $spacing-button_iconOnly_large-paddingLeft;
+                }
+            }
+        }
+
+        &-content {
+
+            &-left {
+                margin-left: $spacing-button_iconOnly_content-marginRight;
+                margin-right: 0;
+            }
+
+            &-right {
+                margin-right: $spacing-button_iconOnly_content-marginLeft;
+                margin-left: 0;
+            }
+        }
+    }
+}

package/lib/cjs/button/splitButtonGroup.scss

@@ -0,0 +1,32 @@
+$dropdown: #{$prefix}-dropdown;
+$module: #{$prefix}-button;
+$component: #{$module}-split;
+$content: #{$module};
+$icon: #{$module}-with-icon;
+
+.#{$component} {
+    display: inline-block;
+
+    .#{$module} {
+        border-radius: 0;
+        margin-right: 1px;
+    }
+
+    :first-child {
+        border-top-left-radius: var(--semi-border-radius-small);
+        border-bottom-left-radius: var(--semi-border-radius-small);
+    }
+
+    :last-child {
+        border-top-right-radius: var(--semi-border-radius-small);
+        border-bottom-right-radius: var(--semi-border-radius-small);
+        margin-right: unset;
+    }
+
+    &:hover {
+        // 因为上面那条规则，导致原来的active被覆盖
+        .#{$module}-borderless:active {
+            background-color: $color-button_borderless-bg-active;
+        }
+    }
+}

package/lib/cjs/button/variables.scss

@@ -0,0 +1,128 @@
+// primary
+$color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
+$color-button_primary-border-default: transparent; // 主要按钮描边颜色
+$color-button_primary-text-default: white; // 主要按钮文字颜色
+
+$color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
+$color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
+$color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
+
+$color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
+$color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
+$color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+
+// secondary
+$color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
+$color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
+$color-button_secondary-text-default: white; // 次要按钮文字颜色
+
+$color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
+$color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
+$color-button_secondary-text-hover: white; // 次要按钮文字颜色 - 悬浮
+
+$color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
+$color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
+$color-button_secondary-text-active: white; // 次要按钮文字颜色 - 按下
+
+// danger
+$color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
+$color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
+$color-button_danger-text-default: white; // 危险按钮文字颜色
+
+$color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
+$color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
+$color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
+
+$color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
+$color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
+$color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+
+// warning
+$color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
+$color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
+$color-button_warning-text-default: white; // 警告按钮文字颜色
+
+$color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
+$color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
+$color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
+
+$color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
+$color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
+$color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+
+// tertiary
+$color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
+$color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
+$color-button_tertiary-text-default: white; // 第三按钮文字颜色
+
+$color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
+$color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
+$color-button_tertiary-text-hover: white; // 第三按钮文字颜色 - 悬浮
+
+$color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
+$color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
+$color-button_tertiary-text-active: white; // 第三按钮文字颜色 - 按下
+
+$color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
+
+// disabled
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
+$color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色
+$color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
+$color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
+
+// light
+$color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
+$color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
+$color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
+
+// borderless
+$color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
+$color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
+$color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
+
+// buttongroup
+
+$color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
+$width-button_group-border: $border-thickness-control; // 按钮组分割线宽度
+
+// padding
+$spacing-button_default-paddingTop: 6px; // 按钮顶部内边距 - 默认
+$spacing-button_default-paddingBottom: 6px; // 按钮底部内边距 - 默认
+$spacing-button_default-paddingLeft: $spacing-base-tight; // 按钮左侧内边距 - 默认
+$spacing-button_default-paddingRight: $spacing-base-tight; // 按钮右侧内边距 - 默认
+$spacing-button_large-paddingTop: 10px; // 按钮顶部内边距 - 大尺寸
+$spacing-button_large-paddingBottom: 10px; // 按钮底部内边距 - 大尺寸
+$spacing-button_large-paddingLeft: $spacing-base; // 按钮左侧内边距 - 大尺寸
+$spacing-button_large-paddingRight: $spacing-base; // 按钮右侧内边距 - 大尺寸
+$spacing-button_small-paddingTop: $spacing-super-tight; // 按钮顶部内边距 - 小尺寸
+$spacing-button_small-paddingBottom: $spacing-super-tight; // 按钮底部内边距 - 小尺寸
+$spacing-button_small-paddingLeft: $spacing-base-tight; // 按钮左侧内边距 - 小尺寸
+$spacing-button_small-paddingRight: $spacing-base-tight; // 按钮右侧内边距 - 小尺寸
+
+$spacing-button_iconOnly_default-paddingLeft: $spacing-tight; // 图标按钮左侧内边距 - 默认
+$spacing-button_iconOnly_default-paddingRight: $spacing-tight; // 图标按钮右侧内边距 - 默认
+$spacing-button_iconOnly_default-paddingTop: $spacing-tight; // 图标按钮顶部内边距 - 默认
+$spacing-button_iconOnly_default-paddingBottom: $spacing-tight; // 图标按钮底部内边距 - 默认
+$spacing-button_iconOnly_large-paddingLeft: $spacing-base-tight; // 图标按钮左侧内边距 - 大尺寸
+$spacing-button_iconOnly_large-paddingRight: $spacing-base-tight; // 图标按钮右侧内边距 - 大尺寸
+$spacing-button_iconOnly_large-paddingTop: $spacing-base-tight; // 图标按钮顶部内边距 - 大尺寸
+$spacing-button_iconOnly_large-paddingBottom: $spacing-base-tight; // 图标按钮底部内边距 - 大尺寸
+$spacing-button_iconOnly_small-paddingLeft: $spacing-extra-tight; // 图标按钮左侧内边距 - 小尺寸
+$spacing-button_iconOnly_small-paddingRight: $spacing-extra-tight; // 图标按钮右侧内边距 - 小尺寸
+$spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮顶部内边距 - 小尺寸
+$spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
+
+// margin
+$spacing-button_iconOnly_content-marginLeft: $spacing-tight;  // 按钮左侧图标距离文字间距
+$spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
+
+$font-button-fontWeight: $font-weight-bold; // 按钮文字字重
+$height-button_large: $height-control-large; // 按钮高度 - 大尺寸
+$height-button_small: $height-control-small; // 按钮高度 - 小尺寸
+$height-button_default: $height-control-default; // 按钮高度 - 默认
+
+$width-button-border: $border-thickness;  // 按钮描边宽度
+$radius-button: var(--semi-border-radius-small); // 按钮圆角大小
+$radius-button_group: $radius-button; // 按钮组圆角大小