vft 0.0.73 → 0.0.76

package/theme-style/src/common/var.scss

@@ -9,29 +9,29 @@ $types: primary, success, warning, danger, error, info;
 // Color
 $colors: () !default;
 $colors: map.deep-merge(
-  (
-    "white": #fff,
-    "black": #000,
-    "primary": (
-      "base": #2196f3,
-    ),
-    "success": (
-      "base": #3eaf7c,
-    ),
-    "warning": (
-      "base": #fb9b5f,
-    ),
-    "danger": (
-      "base": #f26d6d,
-    ),
-    "error": (
-      "base": #f26d6d,
-    ),
-    "info": (
-      "base": #909399,
+    (
+      "white": #fff,
+      "black": #000,
+      "primary": (
+        "base": #2196f3,
+      ),
+      "success": (
+        "base": #3eaf7c,
+      ),
+      "warning": (
+        "base": #fb9b5f,
+      ),
+      "danger": (
+        "base": #f26d6d,
+      ),
+      "error": (
+        "base": #f26d6d,
+      ),
+      "info": (
+        "base": #909399,
+      ),
     ),
-  ),
-  $colors
+    $colors
 );
 
 $color-white: map.get($colors, "white") !default;
@@ -51,17 +51,17 @@ $info-color: getCssVar("info-color") !default;
   $mix-color: $color-white
 ) {
   $colors: map.deep-merge(
-    (
-      $type: (
-        "#{$mode}-#{$number}":
+      (
+        $type: (
+          "#{$mode}-#{$number}":
           mix(
-            $mix-color,
-            map.get($colors, $type, "base"),
-            math.percentage(math.div($number, 10))
+              $mix-color,
+              map.get($colors, $type, "base"),
+              math.percentage(math.div($number, 10))
           ),
+        ),
       ),
-    ),
-    $colors
+      $colors
   ) !global;
 }
 
@@ -89,60 +89,60 @@ $info-color: getCssVar("info-color") !default;
 
 $text-color: () !default;
 $text-color: map.merge(
-  (
-    "primary-color": #303133,
-    "regular-color": #606266,
-    "secondary-color": #909399,
-    "placeholder-color": #a8abb2,
-    "disabled-color": #c0c4cc,
-  ),
-  $text-color
+    (
+      "primary-color": #303133,
+      "regular-color": #606266,
+      "secondary-color": #909399,
+      "placeholder-color": #a8abb2,
+      "disabled-color": #c0c4cc,
+    ),
+    $text-color
 );
 
 $text-color-dark: () !default;
 $text-color-dark: map.merge(
-  (
-    "primary-color": white,
-  ),
-  $text-color-dark
+    (
+      "primary-color": white,
+    ),
+    $text-color-dark
 );
 
 $border-color: () !default;
 $border-color: map.merge(
-  (
-    "": #dcdfe6,
-    "light": #e4e7ed,
-    "lighter": #ebeef5,
-    "extra-light": #f2f6fc,
-    "dark": #d4d7de,
-    "darker": #cdd0d6,
-  ),
-  $border-color
+    (
+      "": #dcdfe6,
+      "light": #e4e7ed,
+      "lighter": #ebeef5,
+      "extra-light": #f2f6fc,
+      "dark": #d4d7de,
+      "darker": #cdd0d6,
+    ),
+    $border-color
 );
 
 $fill-color: () !default;
 $fill-color: map.merge(
-  (
-    "": #f0f2f5,
-    "light": #f5f7fa,
-    "lighter": #fafafa,
-    "extra-light": #fafcff,
-    "dark": #ebedf0,
-    "darker": #e6e8eb,
-    "blank": #fff,
-  ),
-  $fill-color
+    (
+      "": #f0f2f5,
+      "light": #f5f7fa,
+      "lighter": #fafafa,
+      "extra-light": #fafcff,
+      "dark": #ebedf0,
+      "darker": #e6e8eb,
+      "blank": #fff,
+    ),
+    $fill-color
 );
 
 // Background
 $bg-color: () !default;
 $bg-color: map.merge(
-  (
-    "": #fff,
-    "page": #f2f3f5,
-    "overlay": #fff,
-  ),
-  $bg-color
+    (
+      "": #fff,
+      "page": #f2f3f5,
+      "overlay": #fff,
+    ),
+    $bg-color
 );
 
 // Border
@@ -152,157 +152,151 @@ $border-color-hover: getCssVar("text", "disabled-color") !default;
 
 $border-radius: () !default;
 $border-radius: map.merge(
-  (
-    "base": 4px,
-    "small": 2px,
-    "round": 20px,
-    "circle": 100%,
-  ),
-  $border-radius
+    (
+      "base": 4px,
+      "small": 2px,
+      "round": 20px,
+      "circle": 100%,
+    ),
+    $border-radius
 );
 
 // Box-shadow
 $box-shadow: () !default;
 $box-shadow: map.merge(
-  (
-    "": (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
-      0px 8px 20px rgba(0, 0, 0, 0.08),
-    ),
-    "light": (
-      0px 0px 12px rgba(0, 0, 0, 0.12),
-    ),
-    "lighter": (
-      0px 0px 6px rgba(0, 0, 0, 0.12),
-    ),
-    "dark": (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
-      0px 12px 32px rgba(0, 0, 0, 0.12),
-      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
+    (
+      "": (
+        0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+        0px 8px 20px rgba(0, 0, 0, 0.08),
+      ),
+      "light": (
+        0px 0px 12px rgba(0, 0, 0, 0.12),
+      ),
+      "lighter": (
+        0px 0px 6px rgba(0, 0, 0, 0.12),
+      ),
+      "dark": (
+        0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+        0px 12px 32px rgba(0, 0, 0, 0.12),
+        0px 8px 16px -8px rgba(0, 0, 0, 0.16),
+      ),
     ),
-  ),
-  $box-shadow
+    $box-shadow
 );
 
 // Typography
 $font-family: () !default;
 $font-family: map.merge(
-  (
-    // default family
-    "":
+    (
+      // default family
+      "":
       "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
-  ),
-  $font-family
+    ),
+    $font-family
 );
 
 $font-size: () !default;
 $font-size: map.merge(
-  (
-    "extra-large": 20px,
-    "large": 18px,
-    "medium": 16px,
-    "base": 14px,
-    "small": 13px,
-    "extra-small": 12px,
-  ),
-  $font-size
+    (
+      "extra-large": 20px,
+      "large": 18px,
+      "medium": 16px,
+      "base": 14px,
+      "small": 13px,
+      "extra-small": 12px,
+    ),
+    $font-size
 );
 
 // zIndex
 $z-index: () !default;
 $z-index: map.merge(
-  (
-    "normal": 1,
-    "top": 1000,
-    "popper": 2000,
-    'back-top': 3050
-  ),
-  $z-index
+    (
+      "normal": 1,
+      "top": 1000,
+      "popper": 2000,
+      'back-top': 3050,
+      'header-layout': 100
+    ),
+    $z-index
 );
 
 // Disable default
 $disabled: () !default;
 $disabled: map.merge(
-  (
-    "bg-color": getCssVar("fill-color", "light"),
-    "text-color": getCssVar("text-color", "placeholder"),
-    "border-color": getCssVar("border-color", "light"),
-  ),
-  $disabled
+    (
+      "bg-color": getCssVar("fill-color", "light"),
+      "text-color": getCssVar("text-color", "placeholder"),
+      "border-color": getCssVar("border-color", "light"),
+    ),
+    $disabled
 );
 
 $common-component-size: () !default;
 $common-component-size: map.merge(
-  (
-    "large": 40px,
-    "default": 32px,
-    "small": 24px,
-  ),
-  $common-component-size
+    (
+      "large": 40px,
+      "default": 32px,
+      "small": 24px,
+    ),
+    $common-component-size
 );
 
 // overlay
 $overlay-color: () !default;
 $overlay-color: map.merge(
-  (
-    "": rgba(0, 0, 0, 0.8),
-    "light": rgba(0, 0, 0, 0.7),
-    "lighter": rgba(0, 0, 0, 0.5),
-  ),
-  $overlay-color
+    (
+      "": rgba(0, 0, 0, 0.8),
+      "light": rgba(0, 0, 0, 0.7),
+      "lighter": rgba(0, 0, 0, 0.5),
+    ),
+    $overlay-color
 );
 
 // mask
 $mask-color: () !default;
 $mask-color: map.merge(
-  (
-    "": rgba(255, 255, 255, 0.9),
-    "extra-light": rgba(255, 255, 255, 0.3),
-  ),
-  $mask-color
+    (
+      "": rgba(255, 255, 255, 0.9),
+      "extra-light": rgba(255, 255, 255, 0.3),
+    ),
+    $mask-color
 );
 
 // transition
 $transition: () !default;
 $transition: map.merge(
-  (
-    "all": all getCssVar("transition-duration")
-      getCssVar("transition-function-ease-in-out-bezier"),
-    "fade": opacity getCssVar("transition-duration")
-      getCssVar("transition-function-fast-bezier"),
-    "md-fade": (
-      transform getCssVar("transition-duration")
-        getCssVar("transition-function-fast-bezier"),
-      opacity getCssVar("transition-duration")
-        getCssVar("transition-function-fast-bezier"),
-    ),
-    "fade-linear": opacity getCssVar("transition-duration-fast") linear,
-    "border": border-color getCssVar("transition-duration-fast")
-      getCssVar("transition-function-ease-in-out-bezier"),
-    "box-shadow": box-shadow getCssVar("transition-duration-fast")
-      getCssVar("transition-function-ease-in-out-bezier"),
-    "color": color getCssVar("transition-duration-fast")
-      getCssVar("transition-function-ease-in-out-bezier"),
-  ),
-  $transition
+    (
+      "all": all getCssVar("transition-duration") getCssVar("transition-function-ease-in-out-bezier"),
+      "fade": opacity getCssVar("transition-duration") getCssVar("transition-function-fast-bezier"),
+      "md-fade": (
+        transform getCssVar("transition-duration") getCssVar("transition-function-fast-bezier"),
+        opacity getCssVar("transition-duration") getCssVar("transition-function-fast-bezier"),
+      ),
+      "fade-linear": opacity getCssVar("transition-duration-fast") linear,
+      "border": border-color getCssVar("transition-duration-fast") getCssVar("transition-function-ease-in-out-bezier"),
+      "box-shadow": box-shadow getCssVar("transition-duration-fast") getCssVar("transition-function-ease-in-out-bezier"),
+      "color": color getCssVar("transition-duration-fast") getCssVar("transition-function-ease-in-out-bezier"),
+    ),
+    $transition
 );
 
 $transition-duration: () !default;
 $transition-duration: map.merge(
-  (
-    "": 0.3s,
-    "fast": 0.2s,
-  ),
-  $transition-duration
+    (
+      "": 0.3s,
+      "fast": 0.2s,
+    ),
+    $transition-duration
 );
 
 $transition-function: () !default;
 $transition-function: map.merge(
-  (
-    "ease-in-out-bezier": cubic-bezier(0.645, 0.045, 0.355, 1),
-    "fast-bezier": cubic-bezier(0.23, 1, 0.32, 1),
-  ),
-  $transition-function
+    (
+      "ease-in-out-bezier": cubic-bezier(0.645, 0.045, 0.355, 1),
+      "fast-bezier": cubic-bezier(0.23, 1, 0.32, 1),
+    ),
+    $transition-function
 );
 
 $button: () !default;
@@ -551,56 +545,57 @@ $dropdown: map.merge(
 
 $header-layout: () !default;
 $header-layout: map-merge(
-  (
-    height: 70px,
-    top-height: 40px,
-    bg-color: #eff1f5,
-    left-min-width: 800px,
-  ),
+    (
+      height: 70px,
+      top-height: 40px,
+      bg-color: #eff1f5,
+      left-min-width: 800px,
+      z-index: getCssVar('z-index-header-layout'),
+    ),
     $header-layout
 );
 
 $footer-layout: () !default;
 $footer-layout: map-merge(
-  (
-    "bg-color": getCssVar('header-layout-bg-color'),
-    "border-top": getCssVar('border'),
-    "left": getCssVar("menu-width"),
-    "height": "30px",
-    "left-min-width": "auto",
-    "right-min-width": "auto",
-    'z-index': 10,
-  ),
+    (
+      "bg-color": getCssVar('header-layout-bg-color'),
+      "border-top": getCssVar('border'),
+      "left": getCssVar("menu-width"),
+      "height": "30px",
+      "left-min-width": "auto",
+      "right-min-width": "auto",
+      'z-index': 10,
+    ),
     $footer-layout
 );
 
 $name: side-menu;
 $side-menu: () !default;
 $side-menu: map-merge(
-  (
-    "border": getCssVar("menu-border-right"),
-    "scroll-mr": 0,
-  ),
-  $side-menu
+    (
+      "border": getCssVar("menu-border-right"),
+      "scroll-mr": 0,
+    ),
+    $side-menu
 );
 
 $iframe-page: () !default;
 $iframe-page: map-merge(
-  (
-    "text-color": white,
-  ),
-  $iframe-page
+    (
+      "text-color": white,
+    ),
+    $iframe-page
 );
 
 $icon: () !default;
 $icon: map-merge(
-  (
-    "size": 14px,
-    "color": inherit,
-    "cursor": initial,
-    "animation": none,
-  ),
-  $icon
+    (
+      "size": 14px,
+      "color": inherit,
+      "cursor": initial,
+      "animation": none,
+    ),
+    $icon
 );
 
 $icon-text: () !default;
@@ -615,241 +610,242 @@ $icon-text: map-merge(
 
 $message: () !default;
 $message: map-merge(
-  (
-    "border-radius": 2px,
-    "border-width": 2px,
-    "border-color": red,
-    "padding": 15px 19px,
-    "bg-color": getCssVar("color", "info", "light-9"),
-  ),
-  $message
+    (
+      "border-radius": 2px,
+      "border-width": 2px,
+      "border-color": red,
+      "padding": 15px 19px,
+      "bg-color": getCssVar("color", "info", "light-9"),
+    ),
+    $message
 );
 
 $divider: () !default;
 $divider: map-merge(
-  (
-    "margin-y": "24px",
-    "margin-x": "8px",
-    "border-color": #dcdfe6,
-    "border-style": "solid",
-  ),
-  $divider
+    (
+      "margin-y": "24px",
+      "margin-x": "8px",
+      "border-color": #dcdfe6,
+      "border-style": "solid",
+    ),
+    $divider
 );
 
 $tabs: () !default;
 $tabs: map-merge(
-  (
-    "padding": 0,
-    "font-size": 14px,
-    "font-weight": 400,
-    "font-weight-active": 500,
-    "header-height": 40px,
-    "border-bottom": 1px solid #eee,
-    "nav-color": #eee,
-    "header-margin": 0 0 15px,
-    "header-padding": 0,
-    "header-border-bottom": none,
-    "item-padding": 0 20px,
-    "item-max-width": 100%,
-    "item-bg-color": transparent,
-    "item-bg-color-active": white,
-    "item-bg-color-hover": white,
-    "item-color": black,
-    "item-color-active": inherit,
-    "item-color-hover": inherit,
-    "item-border": 1px solid #eee,
-    "item-border-active": 0 solid transparent,
-    "item-border-hover": 0 solid transparent,
-    "item-distance": 10px,
-    "item-border-radius": 5px 5px 0 0,
-    "close-icon-left": 5px,
-    "close-icon-hover-color": black,
-    "close-icon-hover-bg-color": #dfdfdf,
-    "add-icon-right": 30px,
-    "add-icon-padding-left": 20px,
-    "scroll-padding": 0 60px 0 20px,
-    "active-distance": 14px,
-    "show-border-bottom": block,
-  ),
-  $tabs
+    (
+      "padding": 0,
+      "font-size": 14px,
+      "font-weight": 400,
+      "font-weight-active": 500,
+      "header-height": 40px,
+      "border-bottom": 1px solid #eee,
+      "nav-color": #eee,
+      "header-margin": 0 0 15px,
+      "header-padding": 0,
+      "header-border-bottom": none,
+      "item-padding": 0 20px,
+      "item-max-width": 100%,
+      "item-bg-color": transparent,
+      "item-active-bg-color": transparent,
+      "item-hover-bg-color": transparent,
+      "item-color": black,
+      "item-active-color": inherit,
+      "item-hover-color": inherit,
+      "item-border": 0px solid #eee,
+      "item-active-border": 0px solid #eee,
+      "item-hover-border": 0px solid transparent,
+      "item-distance": 10px,
+      "item-border-radius": 5px 5px 0 0,
+      "close-icon-left": 5px,
+      "close-icon-hover-color": black,
+      "close-icon-hover-bg-color": #dfdfdf,
+      "add-icon-right": 30px,
+      "add-icon-padding-left": 20px,
+      "scroll-padding": 0 60px 0 20px,
+      "active-distance": 14px,
+      "show-border-bottom": block,
+    ),
+    $tabs
 );
 
 $multiple-tabs: () !default;
 $multiple-tabs: map-merge(
-  (
-    "bg-color": getCssVar('header-layout-bg-color'),
-    "height": 30px,
-  ),
-  $multiple-tabs
+    (
+      "bg-color": getCssVar('header-layout-bg-color'),
+      "height": 30px,
+    ),
+    $multiple-tabs
 );
 
 $menu: () !default;
 $menu: map-merge(
-  (
-    "bg-color": getCssVar('fill-color', 'blank'),
-    "sub-menu-bg-color": getCssVar('fill-color', 'blank'),
-    "active-color": getCssVar("primary-color"),
-    "text-color": getCssVar("text-primary-color"),
-    "hover-text-color": getCssVar("primary-color"),
-    "hover-bg-color": getCssVar("primary-color-light-9"),
-    "focus-text-color": getCssVar("primary-color"),
-    "focus-bg-color": getCssVar("primary-color-light-9"),
-    "item-height": 56px,
-    "sub-item-height": calc(#{getCssVar("menu-item-height")} - 6px),
-    "horizontal-sub-item-height": 36px,
-    "item-font-size": getCssVar("font-size-base"),
-    "item-hover-fill": getCssVar("primary-color-light-9"),
-    "border-bottom": getCssVar("border"),
-    "base-level-padding": 20px,
-    "level-padding": 20px,
-    "icon-mr": 6px,
-    "icon-width": 14px,
-    "border": getCssVar("border"),
-    "border-right": getCssVar('border'),
-    "item-min-width": 200px,
-    "popup-border-radius": getCssVar("border-radius"),
-  ),
-  $menu
+    (
+      "bg-color": transparent,
+      "sub-menu-bg-color": transparent,
+      "active-color": getCssVar("primary-color"),
+      "text-color": getCssVar("text-primary-color"),
+      "hover-text-color": getCssVar("primary-color"),
+      "hover-bg-color": getCssVar("primary-color-light-9"),
+      "focus-text-color": getCssVar("primary-color"),
+      "focus-bg-color": getCssVar("primary-color-light-9"),
+      "item-height": 56px,
+      "sub-item-height": calc(#{getCssVar("menu-item-height")} - 6px),
+      "horizontal-sub-item-height": 36px,
+      "item-font-size": getCssVar("font-size-base"),
+      "item-hover-fill": getCssVar("primary-color-light-9"),
+      "border-bottom": getCssVar("border"),
+      "base-level-padding": 20px,
+      "level-padding": 20px,
+      "icon-mr": 6px,
+      "icon-width": 14px,
+      "border": getCssVar("border"),
+      "border-right": getCssVar('border'),
+      'item-border-bottom': 2px solid transparent,
+      'item-active-border-bottom': 2px solid getCssVar('menu-active-color'),
+      "item-min-width": 200px,
+    ),
+    $menu
 );
 
 $logo: () !default;
 $logo: map-merge(
-  (
-    img-width: 30px,
-    img-height: 30px,
-    color: $primary-color,
-    font-size: 16px,
-    font-weight: 400,
-    cursor: pointer,
-  ),
-  $logo
+    (
+      img-width: 30px,
+      img-height: 30px,
+      color: $primary-color,
+      font-size: 16px,
+      font-weight: 400,
+      cursor: pointer,
+    ),
+    $logo
 );
 
 $loading: () !default;
 $loading: map-merge(
-  (
-    "spinner-size": 20px,
-    "fullscreen-spinner-size": 50px,
-    "rotate-animation": loading-rotate 2s linear infinite,
-    "color": $primary-color,
-    "text-size": 14px,
-    "margin": 3px 0,
-  ),
-  $loading
+    (
+      "spinner-size": 20px,
+      "fullscreen-spinner-size": 50px,
+      "rotate-animation": loading-rotate 2s linear infinite,
+      "color": $primary-color,
+      "text-size": 14px,
+      "margin": 3px 0,
+    ),
+    $loading
 );
 
 $full-screen: () !default;
 $full-screen: map-merge(
-  (
-    "color": getCssVar('text-primary-color'),
-    "hover-color": $primary-color,
-    "font-size": 12px,
-  ),
-  $full-screen
+    (
+      "color": getCssVar('text-primary-color'),
+      "hover-color": $primary-color,
+      "font-size": 12px,
+    ),
+    $full-screen
 );
 
 // Select
 $select: () !default;
 $select: map-merge(
-  (
-    "border-color-hover": getCssVar("border-color-hover"),
-    "disabled-border": getCssVar("disabled-border-color"),
-    "font-size": getCssVar("font-size-base"),
-    "close-hover-color": getCssVar("text-secondary-color"),
-    "input-color": getCssVar("text-placeholder-color"),
-    "multiple-input-color": getCssVar("text-regular-color"),
-    "input-focus-border-color": getCssVar("primary-color"),
-    "input-font-size": 14px,
-  ),
-  $select
+    (
+      "border-color-hover": getCssVar("border-color-hover"),
+      "disabled-border": getCssVar("disabled-border-color"),
+      "font-size": getCssVar("font-size-base"),
+      "close-hover-color": getCssVar("text-secondary-color"),
+      "input-color": getCssVar("text-placeholder-color"),
+      "multiple-input-color": getCssVar("text-regular-color"),
+      "input-focus-border-color": getCssVar("primary-color"),
+      "input-font-size": 14px,
+    ),
+    $select
 );
 
 $select-option: () !default;
 $select-option: map-merge(
-  (
-    "text-color": getCssVar("text-regular-color"),
-    "disabled-color": getCssVar("text-placeholder-color"),
-    "height": 34px,
-    "hover-background": getCssVar("fill-color", "light"),
-    "selected-text-color": getCssVar("primary-color"),
-  ),
-  $select-option
+    (
+      "text-color": getCssVar("text-regular-color"),
+      "disabled-color": getCssVar("text-placeholder-color"),
+      "height": 34px,
+      "hover-background": getCssVar("fill-color", "light"),
+      "selected-text-color": getCssVar("primary-color"),
+    ),
+    $select-option
 );
 
 $select-group: () !default;
 $select-group: map-merge(
-  (
-    "text-color": getCssVar("info-color"),
-    "height": 30px,
-    "font-size": 12px,
-  ),
-  $select-group
+    (
+      "text-color": getCssVar("info-color"),
+      "height": 30px,
+      "font-size": 12px,
+    ),
+    $select-group
 );
 
 $select-dropdown: () !default;
 $select-dropdown: map-merge(
-  (
-    "bg-color": getCssVar("bg-color", "overlay"),
-    "shadow": getCssVar("box-shadow-light"),
-    "empty-color": getCssVar("text-secondary-color"),
-    "max-height": 274px,
-    "padding": 6px 0,
-    "empty-padding": 10px 0,
-    "border": 1px solid getCssVar("border-color-light"),
-  ),
-  $select-dropdown
+    (
+      "bg-color": getCssVar("bg-color", "overlay"),
+      "shadow": getCssVar("box-shadow-light"),
+      "empty-color": getCssVar("text-secondary-color"),
+      "max-height": 274px,
+      "padding": 6px 0,
+      "empty-padding": 10px 0,
+      "border": 1px solid getCssVar("border-color-light"),
+    ),
+    $select-dropdown
 );
 
 $select-tags-prefix-padding: () !default;
 $select-tags-prefix-padding: map-merge(
-  (
-    "large": 8px,
-    "default": 6px,
-    "small": 4px,
-  ),
-  $select-tags-prefix-padding
+    (
+      "large": 8px,
+      "default": 6px,
+      "small": 4px,
+    ),
+    $select-tags-prefix-padding
 );
 
 $input: () !default;
 $input: map-merge(
-  (
-    "width": "100%",
-    "text-color": getCssVar("text-regular-color"),
-    "border": getCssVar("border"),
-    "hover-border": getCssVar("border-color-hover"),
-    "focus-border": getCssVar("primary-color"),
-    "transparent-border": 0 0 0 1px transparent inset,
-    "border-color": getCssVar("border-color"),
-    "border-radius": getCssVar("border-radius-base"),
-    "bg-color": getCssVar("fill-color", "blank"),
-    "icon-color": getCssVar("text-placeholder-color"),
-    "placeholder-color": getCssVar("text-placeholder-color"),
-    "hover-border-color": getCssVar("border-color-hover"),
-    "clear-hover-color": getCssVar("text-secondary-color"),
-    "focus-border-color": getCssVar("primary-color"),
-  ),
-  $input
+    (
+      "width": "100%",
+      "text-color": getCssVar("text-regular-color"),
+      "border": getCssVar("border"),
+      "hover-border": getCssVar("border-color-hover"),
+      "focus-border": getCssVar("primary-color"),
+      "transparent-border": 0 0 0 1px transparent inset,
+      "border-color": getCssVar("border-color"),
+      "border-radius": getCssVar("border-radius-base"),
+      "bg-color": getCssVar("fill-color", "blank"),
+      "icon-color": getCssVar("text-placeholder-color"),
+      "placeholder-color": getCssVar("text-placeholder-color"),
+      "hover-border-color": getCssVar("border-color-hover"),
+      "clear-hover-color": getCssVar("text-secondary-color"),
+      "focus-border-color": getCssVar("primary-color"),
+    ),
+    $input
 );
 
 $input-disabled: () !default;
 $input-disabled: map-merge(
-  (
-    "fill": getCssVar("disabled-bg-color"),
-    "border": getCssVar("disabled-border-color"),
-    "text-color": getCssVar("disabled-text-color"),
-    "placeholder-color": getCssVar("text-placeholder-color"),
-  ),
-  $input-disabled
+    (
+      "fill": getCssVar("disabled-bg-color"),
+      "border": getCssVar("disabled-border-color"),
+      "text-color": getCssVar("disabled-text-color"),
+      "placeholder-color": getCssVar("text-placeholder-color"),
+    ),
+    $input-disabled
 );
 
 $input-font-size: () !default;
 $input-font-size: map-merge(
-  (
-    "large": 14px,
-    "default": 14px,
-    "small": 12px,
-  ),
-  $input-font-size
+    (
+      "large": 14px,
+      "default": 14px,
+      "small": 12px,
+    ),
+    $input-font-size
 );
 
 $input-height: () !default;
@@ -860,212 +856,212 @@ $input-line-height: map-merge($common-component-size, $input-line-height);
 
 $input-number-width: () !default;
 $input-number-width: map-merge(
-  (
-    "large": 180px,
-    "default": 150px,
-    "small": 120px,
-  ),
-  $input-number-width
+    (
+      "large": 180px,
+      "default": 150px,
+      "small": 120px,
+    ),
+    $input-number-width
 );
 
 $input-padding-horizontal: () !default;
 $input-padding-horizontal: map-merge(
-  (
-    "large": 16px,
-    "default": 12px,
-    "small": 8px,
-  ),
-  $input-padding-horizontal
+    (
+      "large": 16px,
+      "default": 12px,
+      "small": 8px,
+    ),
+    $input-padding-horizontal
 );
 
 $cascader: () !default;
 $cascader: map-merge(
-  (
-    "menu-text-color": getCssVar("text-regular-color"),
-    "menu-selected-text-color": getCssVar("primary-color"),
-    "menu-fill": getCssVar("bg-color", "overlay"),
-    "menu-font-size": getCssVar("font-size-base"),
-    "menu-radius": getCssVar("border-radius-base"),
-    "menu-border": solid 1px getCssVar("border-color-light"),
-    "menu-shadow": getCssVar("box-shadow-light"),
-    "node-background-hover": getCssVar("fill-color", "light"),
-    "node-color-disabled": getCssVar("text-placeholder-color"),
-    "color-empty": getCssVar("text-placeholder-color"),
-    "tag-background": getCssVar("fill-color"),
-  ),
-  $cascader
+    (
+      "menu-text-color": getCssVar("text-regular-color"),
+      "menu-selected-text-color": getCssVar("primary-color"),
+      "menu-fill": getCssVar("bg-color", "overlay"),
+      "menu-font-size": getCssVar("font-size-base"),
+      "menu-radius": getCssVar("border-radius-base"),
+      "menu-border": solid 1px getCssVar("border-color-light"),
+      "menu-shadow": getCssVar("box-shadow-light"),
+      "node-background-hover": getCssVar("fill-color", "light"),
+      "node-color-disabled": getCssVar("text-placeholder-color"),
+      "color-empty": getCssVar("text-placeholder-color"),
+      "tag-background": getCssVar("fill-color"),
+    ),
+    $cascader
 );
 
 $scrollbar: () !default;
 $scrollbar: map-merge(
-  (
-    "opacity": 0.3,
-    "bg-color": getCssVar("text-secondary-color"),
-    "hover-opacity": 0.5,
-    "hover-bg-color": getCssVar("text-secondary-color"),
-  ),
-  $scrollbar
+    (
+      "opacity": 0.3,
+      "bg-color": getCssVar("text-secondary-color"),
+      "hover-opacity": 0.5,
+      "hover-bg-color": getCssVar("text-secondary-color"),
+    ),
+    $scrollbar
 );
 
 $popover: () !default;
 $popover: map-merge(
-  (
-    "bg-color": getCssVar("bg-color", "overlay"),
-    "font-size": getCssVar("font-size-base"),
-    "border-color": getCssVar("border-color-lighter"),
-    "padding": 12px,
-    "padding-large": 18px 20px,
-    "title-font-size": 16px,
-    "title-text-color": getCssVar("text-primary-color"),
-    "border-radius": 4px,
-  ),
-  $popover
+    (
+      "bg-color": getCssVar("bg-color", "overlay"),
+      "font-size": getCssVar("font-size-base"),
+      "border-color": getCssVar("border-color-lighter"),
+      "padding": 12px,
+      "padding-large": 18px 20px,
+      "title-font-size": 16px,
+      "title-text-color": getCssVar("text-primary-color"),
+      "border-radius": 4px,
+    ),
+    $popover
 );
 
 $avatar: () !default;
 $avatar: map-merge(
-  (
-    "text-color": getCssVar("color-white"),
-    "bg-color": getCssVar("text", "disabled-color"),
-    "text-size": 14px,
-    "icon-size": 18px,
-    "border-radius": getCssVar("border-radius-base"),
-  ),
-  $avatar
+    (
+      "text-color": getCssVar("color-white"),
+      "bg-color": getCssVar("text", "disabled-color"),
+      "text-size": 14px,
+      "icon-size": 18px,
+      "border-radius": getCssVar("border-radius-base"),
+    ),
+    $avatar
 );
 
 $avatar-size: () !default;
 $avatar-size: map-merge(
-  (
-    "large": 56px,
-    "default": 40px,
-    "small": 24px,
-  ),
-  $avatar-size
+    (
+      "large": 56px,
+      "default": 40px,
+      "small": 24px,
+    ),
+    $avatar-size
 );
 
 $descriptions: () !default;
 $descriptions: map-merge(
-  (
-    "table-border": 1px solid getCssVar("border-color-lighter"),
-    "item-bordered-label-background": getCssVar("fill-color", "light"),
-  ),
-  $descriptions
+    (
+      "table-border": 1px solid getCssVar("border-color-lighter"),
+      "item-bordered-label-background": getCssVar("fill-color", "light"),
+    ),
+    $descriptions
 );
 
 $md-container: () !default;
 $md-container: map-merge(
-  (
-    "primary-color": $primary-color,
-    "content-max-width": 800px,
-    "code-bg-color": #fff5f5,
-    "line-numbers-width": "2.5rem",
-    "icon-copy":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
-    "icon-copied":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
-    // info
-    info-title-color: #193c47,
-    info-bg-color: #eef9fd,
-    info-border-color: #4cb3d4,
-    info-code-bg-color: rgb(76 179 212 / 10%),
-    // note
-    note-title-color: #474748,
-    note-bg-color: #fdfdfe,
-    note-border-color: #ccc,
-    note-code-bg-color: rgb(212 213 216 / 20%),
-    // tip
-    tip-title-color: #003100,
-    tip-bg-color: #e6f6e6,
-    tip-border-color: #009400,
-    tip-code-bg-color: rgb(0 148 0 / 15%),
-    // warning
-    warning-title-color: #4d3800,
-    warning-bg-color: #fff8e6,
-    warning-border-color: #e6a700,
-    warning-code-bg-color: rgb(230 167 0 / 15%),
-    // danger
-    danger-title-color: #4b1113,
-    danger-bg-color: #ffebec,
-    danger-border-color: #e13238,
-    danger-code-bg-color: rgb(225 50 56 / 15%),
-    // detail
-    detail-bg-color: #eee,
-    detail-text-color: inherit,
-    detail-code-bg-color: rgb(127 127 127 / 15%),
-  ), $md-container
+    (
+      "primary-color": $primary-color,
+      "content-max-width": 800px,
+      "code-bg-color": #fff5f5,
+      "line-numbers-width": "2.5rem",
+      "icon-copy":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
+      "icon-copied":url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
+      // info
+      info-title-color: #193c47,
+      info-bg-color: #eef9fd,
+      info-border-color: #4cb3d4,
+      info-code-bg-color: rgb(76 179 212 / 10%),
+      // note
+      note-title-color: #474748,
+      note-bg-color: #fdfdfe,
+      note-border-color: #ccc,
+      note-code-bg-color: rgb(212 213 216 / 20%),
+      // tip
+      tip-title-color: #003100,
+      tip-bg-color: #e6f6e6,
+      tip-border-color: #009400,
+      tip-code-bg-color: rgb(0 148 0 / 15%),
+      // warning
+      warning-title-color: #4d3800,
+      warning-bg-color: #fff8e6,
+      warning-border-color: #e6a700,
+      warning-code-bg-color: rgb(230 167 0 / 15%),
+      // danger
+      danger-title-color: #4b1113,
+      danger-bg-color: #ffebec,
+      danger-border-color: #e13238,
+      danger-code-bg-color: rgb(225 50 56 / 15%),
+      // detail
+      detail-bg-color: #eee,
+      detail-text-color: inherit,
+      detail-code-bg-color: rgb(127 127 127 / 15%),
+    ), $md-container
 );
 
 $pagination: () !default;
 $pagination: map-merge(
-  (
-    "font-size": 14px,
-    "bg-color": getCssVar("fill-color", "blank"),
-    "text-color": getCssVar("text-primary-color"),
-    "border-radius": 2px,
-    "button-color": getCssVar("text-primary-color"),
-    "button-width": 32px,
-    "button-height": 32px,
-    "button-disabled-color": getCssVar("text-placeholder-color"),
-    "button-disabled-bg-color": getCssVar("fill-color", "blank"),
-    "button-bg-color": getCssVar("fill-color"),
-    "hover-color": getCssVar("primary-color"),
-    "font-size-small": 12px,
-    "button-width-small": 24px,
-    "button-height-small": 24px,
-    "item-gap": 16px,
-  ),
-  $pagination
+    (
+      "font-size": 14px,
+      "bg-color": getCssVar("fill-color", "blank"),
+      "text-color": getCssVar("text-primary-color"),
+      "border-radius": 2px,
+      "button-color": getCssVar("text-primary-color"),
+      "button-width": 32px,
+      "button-height": 32px,
+      "button-disabled-color": getCssVar("text-placeholder-color"),
+      "button-disabled-bg-color": getCssVar("fill-color", "blank"),
+      "button-bg-color": getCssVar("fill-color"),
+      "hover-color": getCssVar("primary-color"),
+      "font-size-small": 12px,
+      "button-width-small": 24px,
+      "button-height-small": 24px,
+      "item-gap": 16px,
+    ),
+    $pagination
 );
 
 $tag: () !default;
 $tag: map-merge(
-  (
-    "font-size": 12px,
-    "border-radius": 4px,
-    "border-radius-rounded": 9999px,
-    "content-line-clamp-num": 1,
-    "content-max-width": 100%,
-  ),
-  $tag
+    (
+      "font-size": 12px,
+      "border-radius": 4px,
+      "border-radius-rounded": 9999px,
+      "content-line-clamp-num": 1,
+      "content-max-width": 100%,
+    ),
+    $tag
 );
 
 $tag-height: () !default;
 $tag-height: map-merge(
-  (
-    "large": 32px,
-    "default": 24px,
-    "small": 20px,
-  ),
-  $tag-height
+    (
+      "large": 32px,
+      "default": 24px,
+      "small": 20px,
+    ),
+    $tag-height
 );
 
 $tag-padding: () !default;
 $tag-padding: map-merge(
-  (
-    "large": 12px,
-    "default": 10px,
-    "small": 8px,
-  ),
-  $tag-padding
+    (
+      "large": 12px,
+      "default": 10px,
+      "small": 8px,
+    ),
+    $tag-padding
 );
 
 $tag-icon-size: () !default;
 $tag-icon-size: map-merge(
-  (
-    "large": 16px,
-    "default": 14px,
-    "small": 12px,
-  ),
-  $tag-icon-size
+    (
+      "large": 16px,
+      "default": 14px,
+      "small": 12px,
+    ),
+    $tag-icon-size
 );
 
 $back-top: () !default;
 $back-top: map-merge(
-  (
-    "bg-color": getCssVar("bg-color-overlay"),
-    "text-color": getCssVar('text-primary-color'),
-    "hover-bg-color": getCssVar("border-color-extra-light"),
-  ),
-  $back-top
+    (
+      "bg-color": getCssVar("bg-color-overlay"),
+      "text-color": getCssVar('text-primary-color'),
+      "hover-bg-color": getCssVar("border-color-extra-light"),
+    ),
+    $back-top
 );
 
 $empty: () !default;
@@ -1500,7 +1496,7 @@ $calendar: map.merge(
           1px solid #{getCssVar('border-color-lighter')}
       ),
       'header-border-bottom': getCssVar('calendar-border'),
-      'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
+      'selected-bg-color': getCssVar('primary-color', 'light-9'),
       'cell-width': 85px,
     ),
     $calendar
@@ -1545,3 +1541,13 @@ $popup: map.merge(
     ),
     $popup
 );
+
+$horizontal-menu: () !default;
+$horizontal-menu: map.merge((
+  'tile-width': 90vw,
+  'tile-height': 400px,
+  'tile-padding': 24px 10px 24px 24px,
+  'tile-content-gap-y': 20px,
+  'tile-content-col-item-gap': '12px 4px',
+  'tile-content-col-gap-y': 40px
+), $horizontal-menu);