@douyinfe/semi-foundation 2.1.4 → 2.2.0-beta.1

package/lib/cjs/datePicker/_utils/parser.js

@@ -37,7 +37,9 @@ function compatiableParse(value, formatToken, baseDate, locale) {
       result = new Date(Date.parse(value));
     }
 
-    if (!(0, _dateFns.isValid)(result)) {
+    const yearInvalid = (0, _dateFns.isValid)(result) && String(result.getFullYear()).length > 4;
+
+    if (!(0, _dateFns.isValid)(result) || yearInvalid) {
       result = null;
     }
   }

package/lib/cjs/datePicker/datePicker.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -72,6 +71,9 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
 }
+.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 216px;
+}
 .semi-datepicker-panel-yam {
   max-width: 284px;
 }
@@ -561,6 +563,9 @@
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
   margin-top: 17px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 168px;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;

package/lib/cjs/datePicker/datePicker.scss

@@ -94,6 +94,15 @@ $module: #{$prefix}-datepicker;
                 min-height: $height-datepicker_timepicker_header_min;
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day;
+            }
+        }
     }
 
     // 年月选择器
@@ -833,6 +842,15 @@ $module: #{$prefix}-datepicker;
                 }
             }
         }
+
+        // 为了防止 scrollList 因为 weeks 变化高度发生变化导致年月可能发生滚动
+        // In order to prevent scrollList from scrolling due to changes in the height of weeks, the year and month may be scrolled
+        &[x-panel-yearandmonth-open-type="left"],
+        &[x-panel-yearandmonth-open-type="right"] {
+            .#{$module}-weeks {
+                min-height: 6 * $width-datepicker_day_compact;
+            }
+        }
     }
 
     // 年月选择器

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

@@ -13,6 +13,7 @@ interface MonthsGridElementProps {
     renderFullDate?: () => React.ReactNode;
 }
 export declare type PanelType = 'left' | 'right';
+export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
     defaultValue?: ValueType;
@@ -104,11 +105,34 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     _initDateTimePickerFromValue(values: BaseValueType[]): void;
     _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
     destroy(): void;
+    /**
+     * sync change another panel month when change months from the else yam panel
+     * call it when
+     *  - current change panel targe date month is same with another panel date
+     *
+     * @example
+     *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+     *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+     */
+    handleSyncChangeMonths(options: {
+        panelType: PanelType;
+        target: Date;
+    }): void;
+    /**
+     * Get the target date based on the panel type and switch type
+     */
+    getTargetChangeDate(options: {
+        panelType: PanelType;
+        switchType: YearMonthChangeType;
+    }): Date;
+    /**
+     * Change month by yam panel
+     */
     toMonth(panelType: PanelType, target: Date): void;
     toYear(panelType: PanelType, target: Date): void;
     toYearMonth(panelType: PanelType, target: Date): void;
     isRangeType(type?: Type): boolean;
-    handleSwitchMonth(switchType: 'prevMonth' | 'nextMonth', panelType: PanelType): void;
+    handleSwitchMonthOrYear(switchType: YearMonthChangeType, panelType: PanelType): void;
     prevMonth(panelType: PanelType): void;
     nextMonth(panelType: PanelType): void;
     prevYear(panelType: PanelType): void;
@@ -158,13 +182,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         notifyValue: any;
         notifyDate: any;
     };
-    handleYearOrMonthChange(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
+    handleYearOrMonthChange(type: YearMonthChangeType, panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
     /**
      * You have chosen to switch the year and month in the future to directly update the Date without closing the date panel
      * @param {*} type
      * @param {*} targetDate
      */
-    updateDateAfterChangeYM(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', targetDate: Date): void;
+    updateDateAfterChangeYM(type: YearMonthChangeType, targetDate: Date): void;
     _isMultiple(): boolean;
     _isRange(): void;
     handleDayClick(day: MonthDayInfo, panelType: PanelType): void;
@@ -214,5 +238,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     showYearPicker(panelType: PanelType): void;
     showTimePicker(panelType: PanelType, opt?: boolean): void;
     showDatePanel(panelType: PanelType): void;
+    /**
+     * Get year and month panel open type
+     *
+     * It is useful info to set minHeight of weeks.
+     *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+     *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+     */
+    getYAMOpenType(): "left" | "right" | "none" | "both";
 }
 export {};

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -241,11 +241,99 @@ class MonthsGridFoundation extends _foundation.default {
 
 
   destroy() {}
+  /**
+   * sync change another panel month when change months from the else yam panel
+   * call it when
+   *  - current change panel targe date month is same with another panel date
+   *
+   * @example
+   *  - panelType=right, target=new Date('2022-09-01') and left panel is in '2022-09' => call it, left panel minus one month to '2022-08'
+   *  - panelType=left, target=new Date('2021-12-01') and right panel is in '2021-12' => call it, right panel add one month to '2021-01'
+   */
+
+
+  handleSyncChangeMonths(options) {
+    const {
+      panelType,
+      target
+    } = options;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    if (this.isRangeType(type)) {
+      if (panelType === 'right' && (0, _dateFns.differenceInCalendarMonths)(target, monthLeft.pickerDate) === 0) {
+        this.handleYearOrMonthChange('prevMonth', 'left', 1, true);
+      } else if (panelType === 'left' && (0, _dateFns.differenceInCalendarMonths)(monthRight.pickerDate, target) === 0) {
+        this.handleYearOrMonthChange('nextMonth', 'right', 1, true);
+      }
+    }
+  }
+  /**
+   * Get the target date based on the panel type and switch type
+   */
+
+
+  getTargetChangeDate(options) {
+    const {
+      panelType,
+      switchType
+    } = options;
+
+    const {
+      monthRight,
+      monthLeft
+    } = this._adapter.getStates();
+
+    const currentDate = panelType === 'left' ? monthLeft.pickerDate : monthRight.pickerDate;
+    let target;
+
+    switch (switchType) {
+      case 'prevMonth':
+        target = (0, _dateFns.addMonths)(currentDate, -1);
+        break;
+
+      case 'nextMonth':
+        target = (0, _dateFns.addMonths)(currentDate, 1);
+        break;
+
+      case 'prevYear':
+        target = (0, _dateFns.addYears)(currentDate, -1);
+        break;
+
+      case 'nextYear':
+        target = (0, _dateFns.addYears)(currentDate, 1);
+        break;
+    }
+
+    return target;
+  }
+  /**
+   * Change month by yam panel
+   */
+
 
   toMonth(panelType, target) {
+    const {
+      type
+    } = this._adapter.getProps();
+
     const diff = this._getDiff('month', target, panelType);
 
     this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
+
+    if (this.isRangeType(type)) {
+      this.handleSyncChangeMonths({
+        panelType,
+        target
+      });
+    }
   }
 
   toYear(panelType, target) {
@@ -267,34 +355,51 @@ class MonthsGridFoundation extends _foundation.default {
     return typeof realType === 'string' && /range/i.test(realType);
   }
 
-  handleSwitchMonth(switchType, panelType) {
+  handleSwitchMonthOrYear(switchType, panelType) {
     const {
       type,
       syncSwitchMonth
     } = this.getProps();
+    const rangeType = this.isRangeType(type); // range type and syncSwitchMonth, we should change panels at same time
 
-    if (this.isRangeType(type) && syncSwitchMonth) {
+    if (rangeType && syncSwitchMonth) {
       this.handleYearOrMonthChange(switchType, 'left', 1, true);
       this.handleYearOrMonthChange(switchType, 'right', 1, true);
     } else {
       this.handleYearOrMonthChange(switchType, panelType);
+      /**
+       * default behavior (v2.2.0)
+       * In order to prevent the two panels from being the same month, this will confuse the user when selecting the range
+       * https://github.com/DouyinFE/semi-design/issues/260
+       */
+
+      if (rangeType) {
+        const target = this.getTargetChangeDate({
+          panelType,
+          switchType
+        });
+        this.handleSyncChangeMonths({
+          panelType,
+          target
+        });
+      }
     }
   }
 
   prevMonth(panelType) {
-    this.handleSwitchMonth('prevMonth', panelType);
+    this.handleSwitchMonthOrYear('prevMonth', panelType);
   }
 
   nextMonth(panelType) {
-    this.handleSwitchMonth('nextMonth', panelType);
+    this.handleSwitchMonthOrYear('nextMonth', panelType);
   }
 
   prevYear(panelType) {
-    this.handleYearOrMonthChange('prevYear', panelType);
+    this.handleSwitchMonthOrYear('prevYear', panelType);
   }
 
   nextYear(panelType) {
-    this.handleYearOrMonthChange('nextYear', panelType);
+    this.handleSwitchMonthOrYear('nextYear', panelType);
   }
   /**
    * Calculate the year and month difference
@@ -948,6 +1053,34 @@ class MonthsGridFoundation extends _foundation.default {
       isYearPickerOpen: false
     });
   }
+  /**
+   * Get year and month panel open type
+   *
+   * It is useful info to set minHeight of weeks.
+   *  - When yam open type is 'left' or 'right', weeks minHeight should be set
+   *    If the minHeight is not set, the change of the number of weeks will cause the scrollList to be unstable
+   */
+
+
+  getYAMOpenType() {
+    const {
+      monthLeft,
+      monthRight
+    } = this._adapter.getStates();
+
+    const leftYearPickerOpen = monthLeft.isYearPickerOpen;
+    const rightYearPickerOpen = monthRight.isYearPickerOpen;
+
+    if (leftYearPickerOpen && rightYearPickerOpen) {
+      return 'both';
+    } else if (leftYearPickerOpen) {
+      return 'left';
+    } else if (rightYearPickerOpen) {
+      return 'right';
+    } else {
+      return 'none';
+    }
+  }
 
 }
 

package/lib/cjs/modal/modal.css

@@ -14,7 +14,7 @@
   right: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   height: 100%;
   z-index: 1000;
 }

package/lib/cjs/modal/modalFoundation.d.ts

@@ -26,7 +26,7 @@ export interface ModalProps {
     footer?: any;
     hasCancel?: boolean;
     header?: any;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskStyle?: Record<string, any>;
@@ -40,7 +40,7 @@ export interface ModalProps {
     style?: Record<string, any>;
     title?: any;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     icon?: any;
     getPopupContainer?: () => HTMLElement;

package/lib/cjs/modal/variables.scss

@@ -1,6 +1,6 @@
 // Color
 $color-modal-bg: var(--semi-color-bg-2); // 模态框背景颜色
-$color-modal_mask-bg: var(--semi-overlay-bg); // 模态框蒙层颜色
+$color-modal_mask-bg: var(--semi-color-overlay-bg); // 模态框蒙层颜色
 $color-modal_main-text: var(--semi-color-text-0); // 模态框文字颜色
 $color-modal_info-icon: var(--semi-color-info); // 模态框信息图标颜色
 $color-modal_primary-icon: var(--semi-color-primary); // 模态框主要图标颜色

package/lib/cjs/navigation/navigation.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */

package/lib/cjs/notification/notification.css

@@ -79,19 +79,23 @@
   color: var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-warning {
-  background-color: var(--semi-color-warning-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-warning);
 }
 .semi-notification-notice-light.semi-notification-notice-success {
-  background-color: var(--semi-color-success-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
-  background-color: var(--semi-color-info-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-info);
 }
 .semi-notification-notice-light.semi-notification-notice-error {
-  background-color: var(--semi-color-danger-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-danger);
 }
 .semi-notification-notice-title {

package/lib/cjs/notification/notification.scss

@@ -93,23 +93,27 @@ $module: #{$prefix}-notification;
 
         &-light {
             &.#{$module}-notice-warning {
-                background-color: $color-notification_warning_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_warning_light-bg, $color-notification_warning_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_warning_light-border;
             }
 
             &.#{$module}-notice-success {
-                background-color: $color-notification_success_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_success_light-bg, $color-notification_success_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_success_light-border;
             }
 
             &.#{$module}-notice-info,
             &.#{$module}-notice-default {
-                background-color: $color-notification_info_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_info_light-bg, $color-notification_info_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_info_light-border;
             }
 
             &.#{$module}-notice-error {
-                background-color: $color-notification_danger_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_danger_light-bg, $color-notification_danger_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_danger_light-border;
             }
         }
@@ -165,4 +169,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

package/lib/cjs/notification/variables.scss

@@ -15,6 +15,7 @@ $color-notification_info_light-bg: var(--semi-color-info-light-default); // 彩
 $color-notification_info_light-border: var(--semi-color-info); // 彩色通知信息描边色
 $color-notification_danger_light-bg: var(--semi-color-danger-light-default); // 彩色通知危险背景色
 $color-notification_danger_light-border: var(--semi-color-danger); // 彩色通知危险描边色
+$color-notification_ambient-bg: var(--semi-color-bg-0); // 透明背景色叠加层(与bg0保持一致不建议修改)
 
 // Width/Height
 $width-notification_notice: auto; // 通知宽度

package/lib/cjs/select/foundation.d.ts

@@ -82,7 +82,16 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     _handleEnterKeyDown(event: KeyboardEvent): void;
     _handleBackspaceKeyDown(): void;
     _notifyChange(selections: Map<any, any>): void;
-    _removeInternalKey(option: BasicOptionProps): BasicOptionProps;
+    _removeInternalKey(option: BasicOptionProps): {
+        [x: string]: any;
+        value?: string | number;
+        label?: unknown;
+        children?: unknown;
+        disabled?: boolean;
+        showTick?: boolean;
+        className?: string;
+        style?: Record<string, any>;
+    };
     _notifySelect(value: BasicOptionProps['value'], option: BasicOptionProps): void;
     _notifyDeselect(value: BasicOptionProps['value'], option: BasicOptionProps): void;
     _diffSelections(selections: Map<any, any>, oldSelections: Map<any, any>, isMultiple: boolean): boolean;

package/lib/cjs/select/foundation.js

@@ -1038,17 +1038,19 @@ class SelectFoundation extends _foundation.default {
   }
 
   _removeInternalKey(option) {
-    delete option._parentGroup;
-    delete option._show;
-    delete option._selected;
-    delete option._scrollIndex;
-
-    if ('_keyInOptionList' in option) {
-      option.key = option._keyInOptionList;
-      delete option._keyInOptionList;
+    // eslint-disable-next-line
+    let newOption = (0, _assign.default)({}, option);
+    delete newOption._parentGroup;
+    delete newOption._show;
+    delete newOption._selected;
+    delete newOption._scrollIndex;
+
+    if ('_keyInOptionList' in newOption) {
+      newOption.key = newOption._keyInOptionList;
+      delete newOption._keyInOptionList;
     }
 
-    return option;
+    return newOption;
   }
 
   _notifySelect(value, option) {

package/lib/cjs/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
+@import './option.scss';
 @import './variables.scss';
 @import './mixin.scss';
-@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;

package/lib/cjs/sideSheet/sideSheet.css

@@ -93,7 +93,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
 }
 .semi-sidesheet-mask-hidden {
   display: none;

package/lib/cjs/sideSheet/variables.scss

@@ -1,5 +1,5 @@
 // Color
-$color-sideSheet_mask-bg: var(--semi-overlay-bg); // 侧边栏打开后蒙层颜色
+$color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
 

package/lib/cjs/table/table.css

@@ -111,7 +111,7 @@
   user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }
@@ -225,7 +225,7 @@
   background-color: var(--semi-color-fill-0);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }

package/lib/cjs/table/table.scss

@@ -104,7 +104,7 @@ $module: #{$prefix}-table;
 
                     &-left,
                     &-right {
-                        z-index: 1;
+                        z-index: $z-table_fixed_column;
                         position: sticky;
                         background-color: $color-table-bg-default;
 
@@ -247,7 +247,7 @@ $module: #{$prefix}-table;
 
                 &-left,
                 &-right {
-                    z-index: 1;
+                    z-index: $z-table_fixed_column;;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }

package/lib/cjs/table/variables.scss

@@ -82,3 +82,6 @@ $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动
 $border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
 $border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
+
+$z-table-fixed: 101!default; // fixed列的zIndex值
+$z-table_fixed_column: $z-table-fixed; // fixed列的zIndex值

package/lib/cjs/timeline/timeline.css

@@ -96,6 +96,9 @@
 .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom {
   left: 50%;
 }
+.semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom {
+  margin-left: 0;
+}
 .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head {
   margin-left: -4px;
 }

package/lib/cjs/timeline/timeline.scss

@@ -120,7 +120,11 @@ $module: #{$prefix}-timeline;
             &-head-custom {
                 left: $spacing-timeline_item_head_custom-left;
             }
-
+            &-head{
+                &.#{$module}-item-head-custom{
+                    margin-left: 0;
+                }
+            }
             &-head {
                 margin-left: $spacing-timeline_item_head-marginLeft;
             }