@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/button/iconButton.css

@@ -1,160 +0,0 @@
-/* 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

@@ -1,70 +0,0 @@
-@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

@@ -1,128 +0,0 @@
-$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

@@ -1,32 +0,0 @@
-$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

@@ -1,128 +0,0 @@
-// 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; // 按钮组圆角大小