@douyinfe/semi-foundation 2.34.0-alpha.1 → 2.34.0

package/breadcrumb/breadcrumb.scss

@@ -82,14 +82,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/calendar/eventUtil.ts

@@ -96,9 +96,9 @@ export interface DateObj {
     month: string
 }
 
-export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -121,15 +121,17 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
 
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcWeekData = (value: Date, monthStart: Date | null, mode = 'week', locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+    const realValue = monthStart || value;
+    return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +252,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * filter out event that is not in the week range
  */
 // eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -309,7 +311,7 @@ export const parseWeeklyAllDayEvent = (
     startDate: Date,
     weekStart: Date,
     parsed: Array<Array<ParsedRangeEvent>>,
-    weekStartsOn: weeekStartsOnEnum
+    weekStartsOn: weekStartsOnEnum
 ) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 

package/calendar/foundation.ts

@@ -33,9 +33,9 @@ import {
     DateObj,
     checkWeekend,
 } from './eventUtil';
-import type { weeekStartsOnEnum } from './eventUtil';
+import type { weekStartsOnEnum } from './eventUtil';
 
-export { weeekStartsOnEnum };
+export { weekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;
@@ -191,7 +191,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const data = {} as WeeklyData;
         const { weekStartsOn } = this.getProps();
         data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
-        data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
+        data.week = calcWeekData(value, null, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
     }
@@ -212,7 +212,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const { weekStartsOn } = this.getProps();
         const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
-            data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+            data[ind] = calcWeekData(addDays(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
         });
         this._adapter.setMonthlyData(data);
         return data;

package/cascader/foundation.ts

@@ -92,9 +92,9 @@ export interface BasicTriggerRenderProps {
      * customized by triggerRender is updated to synchronize the state
      * with Cascader. */
     onSearch: (inputValue: string) => void;
-    /* This function is the same as onSearch (supported since v2.32.0), 
-     * because this function was used before, and to align with TreeSelect, 
-     * use onSearch instead of onChange is more suitable, 
+    /* This function is the same as onSearch (supported since v2.32.0),
+     * because this function was used before, and to align with TreeSelect,
+     * use onSearch instead of onChange is more suitable,
      * onChange needs to be deleted in the next Major
     */
     onChange: (inputValue: string) => void;
@@ -203,6 +203,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateInputValue: (value: string) => void;
     updateInputPlaceHolder: (value: string) => void;
     focusInput: () => void;
+    blurInput: () => void;
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
@@ -259,7 +260,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         if (multiple) {
             const valuePath: BasicValue = [];
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore 
+            // @ts-ignore
             item.forEach((checkedKey: string) => {
                 const valuePathItem = this.getItemPropPath(checkedKey, valueProp);
                 valuePath.push(valuePathItem as any);
@@ -449,7 +450,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 if (filterable && !multiple) {
                     const displayText = this.renderDisplayText(selectedKey, keyEntities);
                     updateStates.inputPlaceHolder = displayText;
-                    /* 
+                    /*
                      *  displayText should not be assign to inputValue,
                      *  cause inputValue should only change by user enter
                      */
@@ -484,7 +485,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             if (filterable && !multiple) {
                 const displayText = this._defaultRenderText(valuePath);
                 updateStates.inputPlaceHolder = displayText;
-                /* 
+                /*
                  *  displayText should not be assign to inputValue,
                  *  cause inputValue should only change by user enter
                  */
@@ -555,20 +556,30 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._notifyBlur(e);
     }
 
+    focus() {
+        const { filterTreeNode } = this.getProps();
+        if (filterTreeNode) {
+            this._adapter.focusInput();
+        }
+        this._adapter.updateFocusState(true);
+    }
+
+    blur() {
+        const { filterTreeNode } = this.getProps();
+        if (filterTreeNode) {
+            this._adapter.blurInput();
+        }
+        this._adapter.updateFocusState(false);
+    }
+
     toggle2SearchInput(isShow: boolean) {
         if (isShow) {
-            this._adapter.toggleInputShow(isShow, () => this.focusInput());
+            this._adapter.toggleInputShow(isShow, () => this.focus());
         } else {
             this._adapter.toggleInputShow(isShow, () => undefined);
         }
     }
 
-    focusInput() {
-        this._adapter.focusInput();
-        this._adapter.updateFocusState(true);
-    }
-
-
     updateSearching = (isSearching: boolean)=>{
         this._adapter.updateStates({ isSearching: false });
     }

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -54,9 +54,6 @@
 .semi-breadcrumb-item-more svg {
   vertical-align: middle;
 }
-.semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
-  margin-left: 4px;
-}
 .semi-breadcrumb-item-link {
   display: inline-flex;
   align-items: center;

package/lib/cjs/breadcrumb/breadcrumb.scss

@@ -82,14 +82,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/lib/cjs/calendar/eventUtil.d.ts

@@ -30,17 +30,18 @@ export interface DateObj {
     isSameMonth: boolean;
     month: string;
 }
-export declare type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export declare type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export declare const calcWeekData: (value: Date, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export declare const calcWeekData: (value: Date, monthStart: Date | null, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
  * @param {object} event
@@ -74,7 +75,7 @@ export declare const filterEvents: (events: Map<string, EventObject[]>, start: D
  * @returns {arr}
  * filter out event that is not in the week range
  */
-export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum) => Map<string, EventObject[]>;
+export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum) => Map<string, EventObject[]>;
 /**
  * @returns {arr}
  * arrange and sort all day event for a range
@@ -84,7 +85,7 @@ export declare const parseRangeAllDayEvent: (event: EventObject[], startDate: Da
  * @returns {arr}
  * arrange and sort weekly all day event
  */
-export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weeekStartsOnEnum) => ParsedRangeEvent[][];
+export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weekStartsOnEnum) => ParsedRangeEvent[][];
 export declare const collectDailyEvents: (events: ParsedRangeEvent[][]) => ParsedRangeEvent[][];
 export declare const renderDailyEvent: (event: EventObject) => {
     startPos: number;

package/lib/cjs/calendar/eventUtil.js

@@ -127,7 +127,8 @@ const calcRangeData = (value, start, rangeLen, mode, locale, weekStartsOn) => {
 };
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
@@ -137,14 +138,15 @@ const calcRangeData = (value, start, rangeLen, mode, locale, weekStartsOn) => {
 
 exports.calcRangeData = calcRangeData;
 
-const calcWeekData = function (value) {
-  let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'week';
-  let locale = arguments.length > 2 ? arguments[2] : undefined;
-  let weekStartsOn = arguments.length > 3 ? arguments[3] : undefined;
+const calcWeekData = function (value, monthStart) {
+  let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'week';
+  let locale = arguments.length > 3 ? arguments[3] : undefined;
+  let weekStartsOn = arguments.length > 4 ? arguments[4] : undefined;
   const start = (0, _dateFns.startOfWeek)(value, {
     weekStartsOn
   });
-  return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+  const realValue = monthStart || value;
+  return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 /**
  *

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

@@ -1,8 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
 import { DateObj } from './eventUtil';
-import type { weeekStartsOnEnum } from './eventUtil';
-export { weeekStartsOnEnum };
+import type { weekStartsOnEnum } from './eventUtil';
+export { weekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;

package/lib/cjs/calendar/foundation.js

@@ -119,7 +119,7 @@ class CalendarFoundation extends _foundation.default {
       locale: dateFnsLocale,
       weekStartsOn
     });
-    data.week = (0, _eventUtil.calcWeekData)(value, 'week', dateFnsLocale, weekStartsOn);
+    data.week = (0, _eventUtil.calcWeekData)(value, null, 'week', dateFnsLocale, weekStartsOn);
 
     this._adapter.setWeeklyData(data);
 
@@ -154,7 +154,7 @@ class CalendarFoundation extends _foundation.default {
       weekStartsOn
     });
     [...Array(numberOfWeek).keys()].map(ind => {
-      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
     });
 
     this._adapter.setMonthlyData(data);

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

@@ -149,6 +149,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateInputValue: (value: string) => void;
     updateInputPlaceHolder: (value: string) => void;
     focusInput: () => void;
+    blurInput: () => void;
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
@@ -196,8 +197,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    focus(): void;
+    blur(): void;
     toggle2SearchInput(isShow: boolean): void;
-    focusInput(): void;
     updateSearching: (isSearching: boolean) => void;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;

package/lib/cjs/cascader/foundation.js

@@ -79,7 +79,7 @@ class CascaderFoundation extends _foundation.default {
 
     if (multiple) {
       const valuePath = []; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore 
+      // @ts-ignore
 
       item.forEach(checkedKey => {
         const valuePathItem = this.getItemPropPath(checkedKey, valueProp);
@@ -449,20 +449,38 @@ class CascaderFoundation extends _foundation.default {
     this._notifyBlur(e);
   }
 
+  focus() {
+    const {
+      filterTreeNode
+    } = this.getProps();
+
+    if (filterTreeNode) {
+      this._adapter.focusInput();
+    }
+
+    this._adapter.updateFocusState(true);
+  }
+
+  blur() {
+    const {
+      filterTreeNode
+    } = this.getProps();
+
+    if (filterTreeNode) {
+      this._adapter.blurInput();
+    }
+
+    this._adapter.updateFocusState(false);
+  }
+
   toggle2SearchInput(isShow) {
     if (isShow) {
-      this._adapter.toggleInputShow(isShow, () => this.focusInput());
+      this._adapter.toggleInputShow(isShow, () => this.focus());
     } else {
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
 
-  focusInput() {
-    this._adapter.focusInput();
-
-    this._adapter.updateFocusState(true);
-  }
-
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/cjs/navigation/itemFoundation.d.ts

@@ -34,8 +34,6 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     getIsCollapsed(): boolean;
     getSelected(): boolean;
     getIsOpen(): boolean;
-    getIsInSubNav(): boolean;
-    getMode(): string;
 }
 export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {
     _timer: number;

package/lib/cjs/navigation/navigation.css

@@ -56,6 +56,7 @@
   padding: 8px 12px;
   box-sizing: border-box;
   margin-top: 0;
+  margin-bottom: 8px;
   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;
@@ -240,12 +241,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-.semi-navigation-sub.semi-navigation-sub-open {
-  margin-top: 8px;
 }
 .semi-navigation-sub .semi-navigation-item {
   color: var(--semi-color-text-0);
@@ -254,6 +249,9 @@
   font-weight: 400;
   width: 100%;
 }
+.semi-navigation-sub .semi-navigation-item:first-child {
+  margin-top: 8px;
+}
 .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child {
   margin-left: 44px;
 }
@@ -335,12 +333,6 @@
   transition: transform 200ms ease-in-out;
   transform: rotate(-180deg);
 }
-.semi-navigation-icon-rotate-0-no-transition {
-  transform: rotate(0);
-}
-.semi-navigation-icon-rotate-180-no-transition {
-  transform: rotate(-180deg);
-}
 
 /* Header、Footer-Common */
 .semi-navigation-header {
@@ -401,11 +393,6 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
 }
-.semi-navigation-vertical .semi-navigation-list {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title {
   color: var(--semi-color-text-0);
   background-color: transparent;
@@ -483,6 +470,9 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary-disabled);
 }
+.semi-navigation-vertical .semi-navigation-item:last-of-type {
+  margin-bottom: 0;
+}
 .semi-navigation-vertical .semi-navigation-inner {
   flex-direction: column;
 }
@@ -681,66 +671,6 @@
   padding: 0;
 }
 
-.semi-navigation-first-layer > .semi-navigation-sub-title .semi-navigation-item-text {
-  font-weight: 600;
-}
-.semi-navigation-first-layer > .semi-navigation-item-text {
-  font-weight: 600;
-}
-
-.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
-  color: var(--semi-color-primary);
-}
-
-.semi-navigation-sub-wrap .semi-navigation-sub-title {
-  margin-bottom: 0;
-}
-.semi-navigation-sub-wrap .semi-navigation-item:last-of-type {
-  margin-bottom: 0;
-}
-
-.semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
-  color: var(--semi-color-disabled-text);
-}
-
-.semi-navigation-item-horizontal.semi-navigation-item {
-  width: fit-content;
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-.semi-navigation-item-horizontal.semi-navigation-item.semi-navigation-item-disabled {
-  color: var(--semi-color-disabled-text);
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-text {
-  color: var(--semi-color-text-2);
-  background-color: transparent;
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-text {
-  color: var(--semi-color-text-0);
-}
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
-  color: var(--semi-color-disabled-text);
-}
-.semi-navigation-item-horizontal.semi-navigation-first-layer {
-  color: var(--semi-color-text-2);
-}
-.semi-navigation-item-horizontal.semi-navigation-item-selected {
-  background-color: transparent;
-}
-.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-icon:first-child,
-.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-text {
-  color: var(--semi-color-text-0);
-}
-.semi-navigation-item-horizontal .semi-navigation-item-icon:first-child {
-  margin-right: 8px;
-}
-.semi-navigation-item-horizontal .semi-navigation-item-icon:last-child {
-  margin-left: 8px;
-}
-
 .semi-rtl .semi-navigation,
 .semi-portal-rtl .semi-navigation {
   direction: rtl;