@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/datePicker/rtl.scss

@@ -0,0 +1,171 @@
+$module: #{$prefix}-datepicker;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-footer {
+            padding-right: 0;
+            padding-left: $spacing-datepicker_footer-paddingRight;
+            text-align: left;
+        }
+
+        &-day {
+
+            &-offsetrange-start {
+                .#{$module}-day-main {
+                    border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
+                }
+            }
+
+            &-offsetrange-end {
+                .#{$module}-day-main {
+                    border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
+                }
+            }
+
+            &-selected-start,
+            &-hoverday-before-selectedrange,
+            &-offsetrange-start {
+                .#{$module}-day-main {
+                    margin-right: $spacing-datepicker_day-marginX;
+                    margin-left: auto;
+                    border-radius: 0 $width-datepicker_day_main-borderRadius $width-datepicker_day_main-borderRadius 0;
+                }
+            }
+
+            &-selected-end,
+            &-hoverday-after-selectedrange,
+            &-offsetrange-end {
+                .#{$module}-day-main {
+                    margin-left: $spacing-datepicker_day-marginX;
+                    margin-right: auto;
+                    border-radius: $width-datepicker_day_main-borderRadius 0 0 $width-datepicker_day_main-borderRadius;
+                }
+            }
+        }
+
+        &-switch {
+
+            &-text {
+                padding-left: 0;
+                padding-right: $spacing-datepicker_switch_text-paddingLeft;
+            }
+        }
+
+        &-quick-control {
+
+            &-item {
+                margin-left: 0;
+                margin-right: $spacing-datepicker_quick_control_item-marginRight;
+            }
+        }
+
+        &-navigation,
+        &-yam {
+            // rtl 对箭头进行翻转
+            .#{$prefix}-icon-chevron_left,
+            .#{$prefix}-icon-chevron_right {
+                transform: scaleX(-1);
+            }
+        }
+
+        &-range {
+
+            &-input {
+
+                &-prefix {
+                    padding-left: $spacing-datepicker_range_input_prefix-paddingRight;
+                    padding-right: $spacing-datepicker_range_input_prefix-paddingLeft;
+                }
+    
+                &-suffix {
+                    padding-left: $spacing-datepicker_range_input_suffix-paddingRight;
+                    padding-right: $spacing-datepicker_range_input_suffix-paddingLeft;
+                    
+                    &-hidden {
+                        display: none;
+                    }
+                }
+    
+                &-clearbtn {
+                    padding-left: $spacing-datepicker_range_input_clearbtn-paddingRight;
+                    padding-right: $spacing-datepicker_range_input_clearbtn-paddingLeft;
+                }
+            }
+        }
+    }
+
+    /*
+    * 小尺寸 DatePicker
+    */
+    .#{$module}-compact {
+        .#{$module}-month-grid {
+
+            &[x-type="dateRange"],
+            &[x-type="dateTimeRange"] {
+                .#{$module}-month-grid-left {
+                    border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+                    border-right: 0;
+                }
+            }
+
+            .#{$prefix}-scrolllist {
+                &-item-wheel {
+                    // 去除中间分割线
+                    border-left: 0;
+                    border-right: 0;
+                }
+            }
+        }
+
+        .#{$module}-day {
+            &-offsetrange-start {
+                .#{$module}-day-main {
+                    border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
+                }
+            }
+
+            &-offsetrange-end {
+                .#{$module}-day-main {
+                    border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
+                }
+            }
+
+            &-selected-start {
+                .#{$module}-day-main {
+                    margin-left: 0;
+                    margin-right: $spacing-datepicker_day_compact-margin;
+                    border-radius: 0 $width-datepicker_day_compact-borderRadius $width-datepicker_day_compact-borderRadius 0;
+                }
+            }
+
+            &-selected-end {
+                .#{$module}-day-main {
+                    margin-right: 0;
+                    margin-left: $spacing-datepicker_day_compact-margin;
+                    border-radius: $width-datepicker_day_compact-borderRadius 0 0 $width-datepicker_day_compact-borderRadius;
+                }
+            }
+        }
+
+        .#{$module}-switch {
+            &-date {
+                border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+                border-right: 0;
+            }
+
+            &-text {
+                // 去掉icon后不需要pl
+                padding-left: auto;
+                padding-right: 0;
+            }
+        }
+
+        .#{$module}-footer {
+            padding-left: $spacing-datepicker_footer_compact-paddintRight;
+            padding-right: auto;
+        }
+    }
+}

package/lib/cjs/datePicker/variables.scss

@@ -0,0 +1,169 @@
+// Size
+$width-datepicker_day: 36px; // 日期格子尺寸
+$width-datepicker_day_main: 32px; // 日期格子内容尺寸
+$width-datepicker_month: $width-datepicker_day * 7; // 年月面板宽度
+$width-datepicker_nav: 32px; // 导航高度
+$height-datepicker_switch: 54px; // 日期时间切换高度
+$height-datepicker_timeType_yam: calc(100% - 54px); // 时间面板高度
+$height-datepicker_timeType_tpk: calc(100% - 54px); // 时间面板高度
+$height-datepicker_panel_yam_scrolllist:  266px; // 时间滚动内容高度
+
+$width-datepicker_monthPanel_max: 284px; // 年月选择器最大宽度
+$height-datepicker_timepicker_header_min: 24px; // 年月选择 header 最小高度
+$width-datepicker_navigation_button_min: 32px; // header 按钮最小宽度
+$height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小高度
+$width-datepicker_yamShowing_min: 284px; // 选择器菜单最小宽度
+$height-datepicker_dateType_yamShowing_min: 325px; // 日期选择器菜单最小高度
+$width-datepicker_panel_yam_scrolllist_li_min: 64px; // 年月、时间滚动菜单项最小高度
+
+$width-datepicker-border: $border-thickness-control; // 年月选择 header 底部分割线宽度
+$width-datepicker_yam_header-borderRadius: var(--semi-border-radius-medium); // 年月选择 header 按钮圆角
+$width-datepicker_day_main-borderRadius: var(--semi-border-radius-small); // 日期格子圆角
+$width-datepicker_quick_control-borderRadius: var(--semi-border-radius-medium); // 快捷操作按钮圆角
+$width-datepicker_slot-border: 1px; // 日期星期分割线宽度
+$width-datepicker_range_input-border: $border-thickness-control-focus;
+$width-datepicker_day_main-border: 1px;
+
+// Spacing
+$spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) / 2; // 日期格子水平外边距
+$spacing-datepicker_yam_header-paddingX: $spacing-base; // 年月选择 header 水平内边距
+$spacing-datepicker_yam_header-paddingY: $spacing-base-tight; // 年月选择 header 垂直内边距
+$spacing-datepicker_scrolllist_header-padding: $spacing-base; // 时间选择 header 内边距
+$spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内边距
+$spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
+$spacing-datepicker_footer-paddingBottom: 10px; // 确认选择 footer 底部内边距
+$spacing-datepicker_footer-paddingRight: 8px; // 确认选择 footer 右侧内边距
+$spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
+$spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
+$spacing-datepicker_month-padding: $spacing-base; 
+$spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
+$spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
+$spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
+$spacing-datepicker_quick_control_item-marginRight: $spacing-tight; // 快捷操作按钮右侧外边距
+$spacing-datepicker_quick_control_padding: $spacing-base; // 快捷操作内边距
+$spacing-datepicker_range_input-paddingX: 8px;
+$spacing-datepicker_range_input-paddingY: 3px;
+$spacing-datepicker_range_input_inputWrapper_input-paddingY: 2px;
+$spacing-datepicker_range_input_inputWrapper_input-paddingX: 4px;
+$spacing-datepicker_range_input_prefix-paddingLeft: 12px;
+$spacing-datepicker_range_input_prefix-paddingRight: 8px;
+$spacing-datepicker_range_input_suffix-paddingLeft: 8px;
+$spacing-datepicker_range_input_suffix-paddingRight: 12px;
+$spacing-datepicker_range_input_clearbtn-paddingLeft: 8px;
+$spacing-datepicker_range_input_clearbtn-paddingRight: 12px;
+
+// Color
+$color-datepicker_panel-bg-default: var(--semi-color-bg-3); // 日期选择器背景颜色
+$color-datepicker_header-bg-default: var(--semi-color-bg-3); // 日期选择器 header 背景颜色
+$color-datepicker_list-bg-default: var(--semi-color-bg-3); // 日期选择器滚动列表背景颜色
+$color-datepicker_border-bg-default: var(--semi-color-border); // 日期选择器描边颜色
+$color-datepicker_footer-bg-default: var(--semi-color-fill-0); // 日期选择器确认选择 footer 背景颜色
+$color-datepicker_quick-bg-default: transparent; // 日期选择器快捷操作背景颜色
+
+$color-datepicker_day-text-default: var(--semi-color-text-2); // 日期时间切换文字颜色 - 默认
+$color-datepicker_day-text-hover: var(--semi-color-fill-1); // 日期时间切换文字颜色 - 悬浮
+$color-datepicker_day-text-active: var(--semi-color-text-0); // 日期时间切换文字颜色 - 选中
+
+$color-datepicker_date-text-default: var(--semi-color-text-0); // 日期格子文字颜色 - 默认
+$color-datepicker_date-text-hover: var(--semi-color-text-0); // 日期格子文字颜色 - 悬浮
+$color-datepicker_date-text-active: var(--semi-color-text-0); // 日期格子文字颜色 - 按下
+$color-datepicker_date-bg-default: var(--semi-color-fill-0); // 日期格子背景颜色 - 默认
+$color-datepicker_date-bg-hover: var(--semi-color-fill-0); // 日期格子背景颜色 - 悬浮
+$color-datepicker_date-bg-active: var(--semi-color-fill-1); // 日期格子背景颜色 - 按下
+
+$color-datepicker_date_selected-text-default: var(--semi-color-white); // 日期格子文字颜色 - 选中
+$color-datepicker_date_selected-bg-default: var(--semi-color-primary); // 日期格子背景颜色 - 选中
+
+$color-datepicker_date_disabled-text-default: var(--semi-color-disabled-text); // 禁用日期格子文字颜色
+$color-datepicker_date_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用日期格子背景颜色
+
+$color-datepicker_date_today-text-default: var(--semi-color-primary); // 今日文字颜色
+$color-datepicker_date_today_disabled-text-default: var(--semi-color-primary-disabled); // 今日文字颜色 - 禁用
+
+$color-datepicker_date_inHover-bg-default: var(--semi-color-primary-light-default); // 范围选择日期格子颜色
+$color-datepicker_date_inRangeHover-bg-default: var(--semi-color-fill-0); // 年月面板菜单项背景色 - 悬浮
+$color-datepicker_date_hoverDay-bg-default: var(--semi-color-fill-1); // 年月面板菜单项背景色 - 按下
+$color-datepicker_date_selectedRange-bg-hover: var(--semi-color-primary-light-hover); // 范围选择日期格子颜色 - 悬浮
+$color-datepicker_date_hoverday_range-bg-default: var(--semi-color-primary-light-active);
+$color-datepicker_date_hoverday_around_single_selected-bg-default: var(--semi-color-primary-light-active);
+
+$color-datepicker_nav_monthIcon-text-default: var(--semi-color-text-0); // 日期选择器 header 文字颜色
+$color-datepicker_navIcon-text-default: var(--semi-color-text-2);  // 日期选择器 header 左右箭头颜色
+$color-datepicker_input_primary-text-default: var(--semi-color-primary);
+$color-datepicker_range_input-text-default: var(--semi-color-text-2);
+$color-datepicker_range_input-bg-default: var(--semi-color-fill-0);
+$color-datepicker_range_input-bg-hover: var(--semi-color-fill-1);
+$color-datepicker_range_input-border-default: transparent;
+$color-datepicker_range_input-border-active: var(--semi-color-focus-border);
+$color-datepicker_range_input_warning-border-active: var(--semi-color-warning);
+$color-datepicker_range_input_warning-bg-active: var(--semi-color-warning-light-hover);
+$color-datepicker_range_input_warning-bg-default: var(--semi-color-warning-light-default);
+$color-datepicker_range_input_warning-bg-hover: var(--semi-color-warning-light-hover);
+$color-datepicker_range_input_warning-border-default: var(--semi-color-warning-light-default);
+$color-datepicker_range_input_warning-border-hover: var(--semi-color-warning-light-hover);
+$color-datepicker_range_input_error-border-default: var(--semi-color-danger-light-default);
+$color-datepicker_range_input_error-bg-default: var(--semi-color-danger-light-default);
+$color-datepicker_range_input_error-border-hover: var(--semi-color-danger-light-hover);
+$color-datepicker_range_input_error-bg-hover: var(--semi-color-danger-light-hover);
+$color-datepicker_range_input_error-border-active: var(--semi-color-danger);
+$color-datepicker_range_input_error-bg-active: var(--semi-color-danger-light-hover);
+$color-datepicker_range_input_disabled-text-default: var(--semi-color-disabled-text);
+$color-datepicker_range_input_disabled-bg-default: var(--semi-color-disabled-fill);
+$color-datepicker_range_input_disabled-bg-hover: var(--semi-color-disabled-fill);
+$color-datepicker_range_input_clearbtn-icon-hover: var(--semi-color-primary-hover);
+$color-datepicker_range_input_inputWrapper-border-default: transparent;
+$color-datepicker_range_input_inputWrapper-bg-default: transparent;
+$color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
+$color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
+$color-datepicker_day_main-border: var(--semi-color-primary-active);
+
+// Font
+$font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
+$font-datepicker_range_input_prefix_suffix_clearbtn-fontSize: 14px;
+$font-datepicker_range_input_prefix_suffix_clearbtn-lineHeight: 20px;
+$font-datepicker_range_input_large-fontSize: 16px;
+
+
+// compact 变量
+$spacing-datepicker_month_compact-padding: 10px;
+
+$width-datepicker_day_compact: 28px;
+$width-datepicker_day_main_compact: 24px;
+$width-datepicker_day_compact-borderRadius: 4px;
+$width-datepicker_month_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_month_compact-padding * 2;
+$width-datepicker_nav_compact: 24px;
+$width-datepicker_panel_compact: 216px;
+$height-datepicker_switch_compact: 32px;
+$height-datepicker_tpk_compact: 236px;
+$height-datepicker_yam_panel_compact: 284px;
+$height-datepicker_yam_li_compact: 32px;
+$height-datepicker_yam_panel_header_compact: 48px;
+$radius-datepicker_range_input_inputWrapper: var(--semi-border-radius-small);
+$height-datepicker_range_input-default: 32px;
+$height-datepicker_range_input-small: 24px;
+$height-datepicker_range_input-large: 40px;
+
+$lineHeight-datepicker_compact: 20px;
+$lineHeight-datepicker_weekday_item_compact: 28px;
+
+$spacing-datepicker_switch_compact-padding: 6px;
+$spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
+$spacing-datepicker_weeks_compact-padding: 10px;
+$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2;
+$spacing-datepicker_weekday_compact-paddingLeft: 10px;
+$spacing-datepicker_weekday_compact-paddingRight: 10px;
+$spacing-datepicker_weekday_compact-paddingBottom: $spacing-tight;
+$spacing-datepicker_compact-padding: 12px;
+$spacing-datepicker_nav_compact-padding: 12px;
+$spacing-datepicker_yam_panel_header_compact-padding: 12px;
+$spacing-datepicker_footer_compact-paddintTop: 10px;
+$spacing-datepicker_footer_compact-paddintBottom: 10px;
+$spacing-datepicker_footer_compact-paddintRight: 8px;
+$spacing-datepicker_scrolllist_shade_pre_compact-marginTop: -17px;
+$spacing-datepicker_scrolllist_shade_post_compact-marginTop: 17px;
+
+// Radius
+$radius-datepicker_range_input: var(--semi-border-radius-small);
+
+// Other
+$transition-datepicker_range_input: background-color .16s ease-in-out;

package/lib/cjs/datePicker/yearAndMonthFoundation.d.ts

@@ -0,0 +1,56 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface YearAndMonthFoundationProps {
+    currentYear?: number;
+    currentMonth?: number;
+    onSelect?: (obj: {
+        currentMonth: number;
+        currentYear: number;
+    }) => void;
+    onBackToMain?: () => void;
+    locale?: any;
+    localeCode?: string;
+    monthCycled?: boolean;
+    yearCycled?: boolean;
+    noBackBtn?: boolean;
+    disabledDate?: (date: Date) => boolean;
+    density?: string;
+}
+export interface YearAndMonthFoundationState {
+    years: Array<{
+        value: number;
+        year: number;
+    }>;
+    months: Array<{
+        value: number;
+        month: number;
+    }>;
+    currentYear: number;
+    currentMonth: number;
+}
+export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
+    setCurrentYear: (currentYear: number) => void;
+    setCurrentMonth: (currentMonth: number) => void;
+    notifySelectYear: (year: number) => void;
+    notifySelectMonth: (month: number) => void;
+    notifyBackToMain: () => void;
+}
+export interface MonthScrollItem {
+    [k: string]: any;
+    month: number;
+    value: string;
+    disabled: boolean;
+}
+export interface YearScrollItem {
+    [k: string]: any;
+    year: number;
+    value: number;
+    disabled: boolean;
+}
+export default class YearAndMonthFoundataion extends BaseFoundation<YearAndMonthAdapter> {
+    constructor(adapter: YearAndMonthAdapter);
+    init(): void;
+    destroy(): void;
+    selectYear(item: YearScrollItem): void;
+    selectMonth(item: MonthScrollItem): void;
+    backToMain(): void;
+}

package/lib/cjs/datePicker/yearAndMonthFoundation.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class YearAndMonthFoundataion extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+  selectYear(item) {
+    const year = item.value;
+
+    this._adapter.setCurrentYear(year);
+
+    this._adapter.notifySelectYear(year);
+  }
+
+  selectMonth(item) {
+    const {
+      month
+    } = item;
+
+    this._adapter.setCurrentMonth(month);
+
+    this._adapter.notifySelectMonth(month);
+  }
+
+  backToMain() {
+    this._adapter.notifyBackToMain();
+  }
+
+}
+
+exports.default = YearAndMonthFoundataion;

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

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    ALIGN_SET: string[];
+    SIZE_SET: string[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/descriptions/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-descriptions")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  ALIGN_SET: ['left', 'justify', 'plain', 'center'],
+  SIZE_SET: ['small', 'medium', 'large']
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

package/lib/cjs/descriptions/descriptions.css

@@ -0,0 +1,191 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-descriptions {
+  line-height: 20px;
+}
+.semi-descriptions table,
+.semi-descriptions tr,
+.semi-descriptions th,
+.semi-descriptions td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.semi-descriptions th {
+  padding-right: 24px;
+}
+.semi-descriptions .semi-descriptions-item {
+  margin: 0;
+  padding-bottom: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+.semi-descriptions-key {
+  font-weight: normal;
+  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;
+  min-height: 14px;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+.semi-descriptions-value {
+  font-weight: normal;
+  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;
+  color: var(--semi-color-text-0);
+}
+.semi-descriptions-center .semi-descriptions-item-th {
+  text-align: right;
+}
+.semi-descriptions-center .semi-descriptions-item-td {
+  text-align: left;
+}
+.semi-descriptions-left .semi-descriptions-item-th,
+.semi-descriptions-left .semi-descriptions-item-td {
+  text-align: left;
+}
+.semi-descriptions-justify .semi-descriptions-item-th {
+  text-align: left;
+}
+.semi-descriptions-justify .semi-descriptions-item-td {
+  text-align: right;
+}
+.semi-descriptions-plain .semi-descriptions-key,
+.semi-descriptions-plain .semi-descriptions-value {
+  display: inline-block;
+}
+.semi-descriptions-plain .semi-descriptions-value {
+  padding-left: 8px;
+}
+.semi-descriptions-plain .semi-descriptions-value .semi-tag {
+  vertical-align: middle;
+}
+.semi-descriptions-double tbody {
+  display: flex;
+  flex-wrap: wrap;
+}
+.semi-descriptions-double tr {
+  display: inline-flex;
+  flex-direction: column;
+}
+.semi-descriptions-double .semi-descriptions-item {
+  padding: 0;
+  flex: 1;
+}
+.semi-descriptions-double .semi-descriptions-value {
+  font-weight: 600;
+}
+.semi-descriptions-double-small .semi-descriptions-item {
+  padding-right: 48px;
+}
+.semi-descriptions-double-small .semi-descriptions-key {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding-bottom: 0;
+}
+.semi-descriptions-double-small .semi-descriptions-value {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-descriptions-double-medium .semi-descriptions-item {
+  padding-right: 60px;
+}
+.semi-descriptions-double-medium .semi-descriptions-key {
+  padding-bottom: 4px;
+}
+.semi-descriptions-double-medium .semi-descriptions-value {
+  font-size: 20px;
+  line-height: 28px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.semi-descriptions-double-large .semi-descriptions-item {
+  padding-right: 80px;
+}
+.semi-descriptions-double-large .semi-descriptions-key {
+  padding-bottom: 4px;
+}
+.semi-descriptions-double-large .semi-descriptions-value {
+  font-size: 28px;
+  line-height: 40px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.semi-rtl .semi-descriptions,
+.semi-portal-rtl .semi-descriptions {
+  direction: rtl;
+}
+.semi-rtl .semi-descriptions th,
+.semi-portal-rtl .semi-descriptions th {
+  direction: rtl;
+  padding-right: 0;
+  padding-left: 24px;
+}
+.semi-rtl .semi-descriptions .semi-descriptions-item,
+.semi-portal-rtl .semi-descriptions .semi-descriptions-item {
+  text-align: right;
+}
+.semi-rtl .semi-descriptions-center .semi-descriptions-item-th,
+.semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-th {
+  text-align: left;
+}
+.semi-rtl .semi-descriptions-center .semi-descriptions-item-td,
+.semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-td {
+  text-align: right;
+}
+.semi-rtl .semi-descriptions-left .semi-descriptions-item-th,
+.semi-rtl .semi-descriptions-left .semi-descriptions-item-td,
+.semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-th,
+.semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-td {
+  text-align: left;
+}
+.semi-rtl .semi-descriptions-justify .semi-descriptions-item-th,
+.semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-th {
+  text-align: right;
+}
+.semi-rtl .semi-descriptions-justify .semi-descriptions-item-td,
+.semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-td {
+  text-align: left;
+}
+.semi-rtl .semi-descriptions-plain .semi-descriptions-key,
+.semi-rtl .semi-descriptions-plain .semi-descriptions-value,
+.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-key,
+.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value {
+  display: inline-block;
+}
+.semi-rtl .semi-descriptions-plain .semi-descriptions-value,
+.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value {
+  padding-left: 0;
+  padding-right: 8px;
+}
+.semi-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag,
+.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag {
+  vertical-align: middle;
+}
+.semi-rtl .semi-descriptions-double,
+.semi-portal-rtl .semi-descriptions-double {
+  direction: rtl;
+}
+.semi-rtl .semi-descriptions-double .semi-descriptions-item,
+.semi-portal-rtl .semi-descriptions-double .semi-descriptions-item {
+  text-align: right;
+}
+.semi-rtl .semi-descriptions-double-small .semi-descriptions-item,
+.semi-portal-rtl .semi-descriptions-double-small .semi-descriptions-item {
+  padding-right: 0;
+  padding-left: 48px;
+}
+.semi-rtl .semi-descriptions-double-medium .semi-descriptions-item,
+.semi-portal-rtl .semi-descriptions-double-medium .semi-descriptions-item {
+  padding-right: 0;
+  padding-left: 60px;
+}
+.semi-rtl .semi-descriptions-double-large .semi-descriptions-item,
+.semi-portal-rtl .semi-descriptions-double-large .semi-descriptions-item {
+  padding-right: 0;
+  padding-left: 80px;
+}