@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/inputNumber/inputNumber.css

@@ -0,0 +1,99 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-input-number {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.semi-input-number-suffix-btns {
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 4px;
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  background-color: var(--semi-color-bg-2);
+  box-sizing: border-box;
+}
+.semi-input-number-suffix-btns > .semi-input-number-button {
+  height: 50%;
+  width: 14px;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  border-radius: 0;
+  color: var(--semi-color-text-2);
+}
+.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):hover, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):hover {
+  cursor: pointer;
+  background-color: var(--semi-color-fill-0);
+}
+.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):active, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):active {
+  cursor: pointer;
+  background-color: var(--semi-color-fill-1);
+}
+.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-disabled, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-disabled {
+  background-color: var(--semi-color-disabled-fill);
+  color: var(--semi-color-disabled-text);
+}
+.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-not-allowed, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-not-allowed {
+  cursor: not-allowed;
+}
+.semi-input-number-suffix-btns-inner-hover {
+  border-color: var(--semi-color-fill-2);
+}
+.semi-input-number-suffix-btns-inner {
+  margin-left: 8px;
+}
+.semi-input-number .semi-input-clearbtn + .semi-input-suffix {
+  margin-left: -4px;
+}
+.semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner {
+  margin-left: 0;
+}
+.semi-input-number-size-default .semi-input-number-suffix-btns {
+  height: 32px;
+}
+.semi-input-number-size-default .semi-input-number-suffix-btns-inner {
+  height: 30px;
+}
+.semi-input-number-size-large .semi-input-number-suffix-btns {
+  height: 40px;
+}
+.semi-input-number-size-large .semi-input-number-suffix-btns-inner {
+  height: 38px;
+}
+.semi-input-number-size-small .semi-input-number-suffix-btns {
+  height: 24px;
+}
+.semi-input-number-size-small .semi-input-number-suffix-btns-inner {
+  height: 22px;
+}
+
+.semi-rtl .semi-input-number,
+.semi-portal-rtl .semi-input-number {
+  direction: rtl;
+}
+.semi-rtl .semi-input-number-suffix-btns,
+.semi-portal-rtl .semi-input-number-suffix-btns {
+  margin-left: auto;
+  margin-right: 4px;
+}
+.semi-rtl .semi-input-number-suffix-btns-inner,
+.semi-portal-rtl .semi-input-number-suffix-btns-inner {
+  margin-left: auto;
+  margin-right: 8px;
+}
+.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix,
+.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix {
+  margin-left: auto;
+  margin-right: -4px;
+}
+.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner,
+.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner {
+  margin-left: auto;
+  margin-right: 0;
+}

package/lib/cjs/inputNumber/inputNumber.scss

@@ -0,0 +1,108 @@
+@import '../input/variables.scss';
+@import './variables.scss';
+
+$module: #{$prefix}-input-number;
+
+.#{$module} {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    &-suffix-btns {
+        display: inline-flex;
+        flex-direction: column;
+        margin-left: $spacing-inputNumber_button-marginLeft;
+        border: $width-inputNumber_button-border solid $color-inputNumber_button-border-default;
+        border-radius: $radius-inputNumber;
+        background-color: $color-inputNumber_button-bg-default;
+        box-sizing: border-box;
+
+        & > .#{$module}-button {
+            height: 50%;
+            width: $width-inputNumber_button;
+            padding: 0;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+            border-radius: 0;
+            color: $color-inputNumber_button-text-default;
+        }
+
+        & > .#{$module}-button-up:not(.#{$module}-button-up-not-allowed),
+        & > .#{$module}-button-down:not(.#{$module}-button-down-not-allowed) {
+
+            &:hover {
+                cursor: pointer;
+                background-color: $color-inputNumber_button-bg-hover;
+            }
+
+            &:active {
+                cursor: pointer;
+                background-color: $color-inputNumber_button-bg-active;
+            }
+        }
+
+        & > .#{$module}-button-up.#{$module}-button-up-disabled,
+        & > .#{$module}-button-down.#{$module}-button-down-disabled {
+            background-color: $color-inputNumber_button-bg-disabled;
+            color: $color-inputNumber_button-text-disabled;
+        }
+
+        & > .#{$module}-button-up.#{$module}-button-up-not-allowed,
+        & > .#{$module}-button-down.#{$module}-button-down-not-allowed {
+            cursor: not-allowed;
+        }
+
+        &-inner-hover {
+            border-color: $color-inputNumber_button-border-hover;
+        }
+    }
+
+    &-suffix-btns-inner {
+        margin-left: $spacing-inputNumber_button_inner-marginLeft;
+    }
+
+    .#{$prefix}-input-clearbtn {
+        & + .#{$prefix}-input-suffix {
+            margin-left: $spacing-inputNumber_clearbtn_suffix-marginLeft;
+
+            .#{$module}-suffix-btns-inner {
+                margin-left: 0;
+            }
+        }
+    }
+
+    &-size {
+
+        &-default {
+            .#{$module}-suffix-btns {
+                height: $height-inputNumber_button_default;
+            }
+            .#{$module}-suffix-btns-inner {
+                height: $height-inputNumber_button_inner_default;
+            }
+        }
+
+        &-large {
+            .#{$module}-suffix-btns {
+                height: $height-inputNumber_button_large;
+            }
+            .#{$module}-suffix-btns-inner {
+                height: $height-inputNumber_button_inner_large;
+            }
+        }
+
+        &-small {
+            .#{$module}-suffix-btns {
+                height: $height-inputNumber_button_small;
+            }
+            .#{$module}-suffix-btns-inner {
+                height: $height-inputNumber_button_inner_small;
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/inputNumber/rtl.scss

@@ -0,0 +1,30 @@
+$module: #{$prefix}-input-number;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+        
+        &-suffix-btns {
+            margin-left: auto;
+            margin-right: $spacing-inputNumber_button-marginLeft;
+        }
+
+        &-suffix-btns-inner {
+            margin-left: auto;
+            margin-right: $spacing-inputNumber_button_inner-marginLeft;
+        }
+
+        .#{$prefix}-input-clearbtn {
+            & + .#{$prefix}-input-suffix {
+                margin-left: auto;
+                margin-right: $spacing-inputNumber_clearbtn_suffix-marginLeft;
+
+                .#{$module}-suffix-btns-inner {
+                    margin-left: auto;
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}

package/lib/cjs/inputNumber/variables.scss

@@ -0,0 +1,23 @@
+$height-inputNumber_button_default: $height-control-default; // 数字输入框高度 - 默认
+$height-inputNumber_button_large: $height-control-large; // 数字输入框高度 - 大
+$height-inputNumber_button_small: $height-control-small; // 数字输入框高度 - 小
+$height-inputNumber_button_inner_default: $height-input_default; // 隐藏步进器的数字输入框高度 - 默认
+$height-inputNumber_button_inner_large: $height-input_large; // 隐藏步进器的数字输入框高度 - 大
+$height-inputNumber_button_inner_small: $height-input_small; // 隐藏步进器的数字输入框高度 - 小
+
+$width-inputNumber_button: 14px; // 步进器按钮宽度
+$radius-inputNumber: var(--semi-border-radius-small);
+$spacing-inputNumber_button-marginLeft: 4px; // 步进器按钮左侧外边距
+$color-inputNumber_button-text-default: var(--semi-color-text-2); // 步进器按钮图标颜色
+$color-inputNumber_button-text-disabled: var(--semi-color-disabled-text); // 步进器按钮图标颜色 - 禁用
+$color-inputNumber_button-bg-default: var(--semi-color-bg-2); // 步进器按钮背景颜色
+$color-inputNumber_button-bg-disabled: var(--semi-color-disabled-fill); // 步进器按钮背景颜色 - 禁用
+$color-inputNumber_button-bg-hover: var(--semi-color-fill-0); // 步进器按钮图标颜色 - 悬浮
+$color-inputNumber_button-bg-active: var(--semi-color-fill-1); // 步进器按钮图标颜色 - 按下
+$color-inputNumber_button-border-default: var(--semi-color-border); // 步进器按钮描边颜色
+$color-inputNumber_button-border-hover: var(--semi-color-fill-2); // 步进器按钮描边颜色 - 悬浮
+
+$width-inputNumber_button-border: 1px; // 步进器按钮描边宽度
+
+$spacing-inputNumber_button_inner-marginLeft: $spacing-tight; // 隐藏步进器按钮左侧外边距
+$spacing-inputNumber_clearbtn_suffix-marginLeft: -$spacing-extra-tight; // 清空按钮左侧外边距

package/lib/cjs/keyframes/rotate.css

@@ -0,0 +1,11 @@
+/* shadow */
+/* sizing */
+/* spacing */
+@keyframes semi-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/cjs/keyframes/rotate.scss

@@ -0,0 +1,8 @@
+@keyframes #{$prefix}-animation-rotate {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

package/lib/cjs/layout/constants.d.ts

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    BREAKPOINT: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/layout/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-layout")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  BREAKPOINT: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+};
+exports.strings = strings;

package/lib/cjs/layout/layout.css

@@ -0,0 +1,40 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-layout {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-height: auto;
+}
+.semi-layout, .semi-layout-header, .semi-layout-footer, .semi-layout-content, .semi-layout-sider, .semi-layout-sider-children {
+  box-sizing: border-box;
+}
+.semi-layout-header, .semi-layout-footer {
+  flex: 0 0 auto;
+}
+.semi-layout-content {
+  flex: auto;
+  min-height: auto;
+}
+.semi-layout-sider {
+  position: relative;
+  min-width: auto;
+}
+.semi-layout-sider-children {
+  height: 100%;
+  margin-top: -0.1px;
+  padding-top: 0.1px;
+}
+
+.semi-layout-has-sider {
+  flex-direction: row;
+}
+.semi-layout-has-sider > .semi-layout, .semi-layout-has-sider > .semi-layout-content {
+  overflow-x: hidden;
+}
+
+.semi-rtl .semi-layout,
+.semi-portal-rtl .semi-layout {
+  direction: rtl;
+}

package/lib/cjs/layout/layout.scss

@@ -0,0 +1,49 @@
+$module: #{$prefix}-layout;
+
+.#{$module} {
+  
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    min-height: auto;
+
+    &,
+    &-header,
+    &-footer,
+    &-content,
+    &-sider,
+    &-sider-children {
+        box-sizing: border-box;
+    }
+
+    &-header,
+    &-footer {
+        flex: 0 0 auto;
+    }
+
+    &-content {
+        flex: auto;
+        min-height: auto;
+    }
+
+    &-sider {
+        position: relative;
+        min-width: auto;
+    
+        &-children {
+            height: 100%;
+            margin-top: -.1px;
+            padding-top: .1px;
+        }
+    }
+}
+
+.#{$module}-has-sider {
+    flex-direction: row;
+    & > .#{$module},
+    & > .#{$module}-content {
+        overflow-x: hidden;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/layout/rtl.scss

@@ -0,0 +1,8 @@
+$module: #{$prefix}-layout;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+    }
+}

package/lib/cjs/list/constants.d.ts

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    SIZE: string[];
+    LAYOUT: string[];
+    ALIGN: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/list/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-list")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['large', 'small', 'default'],
+  LAYOUT: ['vertical', 'horizontal'],
+  ALIGN: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch']
+};
+exports.strings = strings;

package/lib/cjs/list/list.css

@@ -0,0 +1,121 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-list {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-list-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.semi-list-header, .semi-list-footer {
+  padding: 12px 24px;
+}
+.semi-list-empty {
+  padding: 12px;
+  color: var(--semi-color-text-2);
+  width: 100%;
+  text-align: center;
+}
+.semi-list-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px 24px;
+  margin: 0;
+  list-style: none;
+}
+.semi-list-item-body {
+  flex: 1;
+  display: flex;
+}
+.semi-list-item-body-header {
+  margin-right: 20px;
+}
+.semi-list-item-body-flex-start {
+  align-items: flex-start;
+}
+.semi-list-item-body-flex-end {
+  align-items: flex-end;
+}
+.semi-list-item-body-center {
+  align-items: center;
+}
+.semi-list-item-body-stretch {
+  align-items: stretch;
+}
+.semi-list-item-body-baseline {
+  align-items: baseline;
+}
+.semi-list-item-extra {
+  flex: 0 0 auto;
+  margin-left: 40px;
+}
+.semi-list-split .semi-list-item {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-list-split .semi-list-item:last-child {
+  border-bottom: none;
+}
+.semi-list-split .semi-list-header {
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-list-split .semi-list-footer {
+  border-top: 1px solid var(--semi-color-border);
+}
+.semi-list-small .semi-list-item, .semi-list-small .semi-list-header, .semi-list-small .semi-list-footer {
+  padding: 8px 16px;
+}
+.semi-list-large .semi-list-item, .semi-list-large .semi-list-header, .semi-list-large .semi-list-footer {
+  padding: 16px 24px;
+}
+.semi-list.semi-list-grid .semi-list-item {
+  padding: 0;
+}
+.semi-list.semi-list-bordered {
+  border: 1px solid var(--semi-color-border);
+}
+.semi-list.semi-list-flex .semi-list-items {
+  display: flex;
+}
+.semi-list.semi-list-flex.semi-list-split .semi-list-item {
+  border-bottom: none;
+  border-right: 1px solid var(--semi-color-border);
+}
+.semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child {
+  border-right: none;
+}
+
+.semi-rtl .semi-list,
+.semi-portal-rtl .semi-list {
+  direction: rtl;
+}
+.semi-rtl .semi-list-item,
+.semi-portal-rtl .semi-list-item {
+  direction: rtl;
+}
+.semi-rtl .semi-list-item-body-header,
+.semi-portal-rtl .semi-list-item-body-header {
+  margin-right: auto;
+  margin-left: 20px;
+}
+.semi-rtl .semi-list-item-extra,
+.semi-portal-rtl .semi-list-item-extra {
+  flex: 0 0 auto;
+  margin-left: 0;
+  margin-right: 40px;
+}
+.semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item,
+.semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item {
+  border-bottom: none;
+  border-right: 0;
+  border-left: 1px solid var(--semi-color-border);
+}
+.semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child,
+.semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child {
+  border-left: none;
+}

package/lib/cjs/list/list.scss

@@ -0,0 +1,125 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-list;
+
+.#{$module} {
+    @include font-size-regular;
+
+    &-items {
+        margin: $spacing-none;
+        padding: $spacing-none;
+        list-style: none;
+    }
+
+    &-header,
+    &-footer {
+        padding: $spacing-list_footer-paddingX $spacing-list_footer-paddingY;
+    }
+
+    &-empty {
+        padding: $spacing-list_empty-padding;
+        color: $color-list_empty-text-default;
+        width: 100%;
+        text-align: center;
+    }
+
+    &-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        box-sizing: border-box;
+        padding: $spacing-list_item-paddingX $spacing-list_item-paddingY;
+        margin: $spacing-none;
+        list-style: none;
+
+        &-body {
+            flex: 1;
+            display: flex;
+            // align-items: center;
+
+            &-header {
+                margin-right: $spacing-list_header-marginRight;
+            }
+        }
+
+        &-body-flex-start {
+            align-items: flex-start;
+        }
+
+        &-body-flex-end {
+            align-items: flex-end;
+        }
+
+        &-body-center {
+            align-items: center;
+        }
+
+        &-body-stretch {
+            align-items: stretch;
+        }
+
+        &-body-baseline {
+            align-items: baseline;
+        }
+
+        &-extra {
+            flex: 0 0 auto;
+            margin-left: $spacing-list_extra-marginLeft;
+        }
+    }
+
+    &-split &-item {
+        border-bottom: $border-thickness-control solid $color-list_default-border-default;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    &-split &-header {
+        border-bottom: $border-thickness-control solid $color-list_default-border-default;
+    }
+
+    &-split &-footer {
+        border-top: $border-thickness-control solid $color-list_default-border-default;
+    }
+
+    &-small &-item,
+    &-small &-header,
+    &-small &-footer {
+        padding: $spacing-list_small-paddingX $spacing-list_small-paddingY;
+    }
+
+    &-large &-item,
+    &-large &-header,
+    &-large &-footer {
+        padding: $spacing-list_large-paddingX $spacing-list_large-paddingY;
+    }
+
+    &.#{$module}-grid {
+        .#{$module}-item {
+            padding: $spacing-none;
+        }
+    }
+
+    &.#{$module}-bordered {
+        border: $border-thickness-control solid $color-list_default-border-default;
+    }
+
+    &.#{$module}-flex {
+        .#{$module}-items {
+            display: flex;
+        }
+
+        &.#{$module}-split .#{$module}-item {
+            border-bottom: none;
+            border-right: $border-thickness-control solid $color-list_default-border-default;
+
+            &:last-child {
+                border-right: none;
+            }
+        }
+    }
+}
+
+@import "./rtl.scss";