feat(Nav): add theme configuration about hover

alibaba-fusion · May 22, 2019 · 27ccded · 27ccded
1 parent 8c6a3af
commit 27ccded
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 17 deletions.
diff --git a/src/nav/main.scss b/src/nav/main.scss
@@ -72,7 +72,6 @@ $nav-icononly-width: $s-15;
             $nav-hoz-height - $popup-local-border-width * 2,
             $nav-hoz-font-size,
             $nav-hoz-item-padding-lr,
-            $nav-hoz-item-selected-active-line,
             $nav-hoz-item-margin-tb,
             $nav-hoz-item-margin-lr,
             $nav-hoz-item-corner
@@ -94,9 +93,22 @@ $nav-icononly-width: $s-15;
             height: $nav-hoz-height - $popup-local-border-width * 2;
         }
 
-        #{$nav-prefix}-item:before {
-            width: 0;
-            left: 50%;
+        #{$nav-prefix}-item {
+            &:before {
+                width: 0;
+                left: 50%;
+            }
+
+            &:hover:before {
+                height: $nav-hoz-item-hover-active-line;
+            }
+
+            @if ($nav-hoz-item-hover-active-line != 0) {
+                &:hover:before {
+                    width: 100%;
+                    left: 0;
+                }
+            }
         }
 
         &.#{$css-prefix}top #{$nav-prefix}-item:before {
@@ -110,6 +122,7 @@ $nav-icononly-width: $s-15;
         .#{$css-prefix}selected#{$nav-prefix}-item:before {
             width: 100%;
             left: 0;
+            height: $nav-hoz-item-selected-active-line;
         }
     }
 
@@ -121,7 +134,6 @@ $nav-icononly-width: $s-15;
             $nav-ver-height,
             $nav-ver-font-size,
             $nav-ver-item-padding-lr,
-            $nav-ver-item-selected-active-line,
             $nav-ver-item-margin-tb,
             $nav-ver-item-margin-lr,
             $nav-ver-item-corner
@@ -149,9 +161,22 @@ $nav-icononly-width: $s-15;
             font-size: $nav-ver-sub-nav-font-size;
         }
 
-        #{$nav-prefix}-item:before {
-            height: 0;
-            top: 50%;
+        #{$nav-prefix}-item {
+            &:before {
+                height: 0;
+                top: 50%;
+            }
+
+            &:hover:before {
+                width: $nav-ver-item-hover-active-line;
+            }
+
+            @if ($nav-ver-item-hover-active-line != 0) {
+                &:hover:before {
+                    height: 100%;
+                    top: 0;
+                }
+            }
         }
 
         &.#{$css-prefix}left #{$nav-prefix}-item:before {
@@ -165,6 +190,7 @@ $nav-icononly-width: $s-15;
         .#{$css-prefix}selected#{$nav-prefix}-item:before {
             height: 100%;
             top: 0;
+            width: $nav-ver-item-selected-active-line;
         }
     }
 
@@ -181,10 +207,12 @@ $nav-icononly-width: $s-15;
             $nav-primary-shadow,
             $nav-primary-item-hover-bg-color,
             $nav-primary-item-hover-text-color,
+            $nav-primary-item-hover-text-style,
             $nav-primary-item-selected-bg-color,
             $nav-primary-item-selected-text-color,
             $nav-primary-item-selected-text-style,
             $nav-primary-item-selected-active-color,
+            $nav-primary-item-hover-active-color,
             $nav-primary-item-opened-bg-color,
             $nav-primary-item-opened-text-color,
             $nav-primary-group-text-color,
@@ -215,10 +243,12 @@ $nav-icononly-width: $s-15;
             $nav-secondary-shadow,
             $nav-secondary-item-hover-bg-color,
             $nav-secondary-item-hover-text-color,
+            $nav-secondary-item-hover-text-style,
             $nav-secondary-item-selected-bg-color,
             $nav-secondary-item-selected-text-color,
             $nav-secondary-item-selected-text-style,
             $nav-secondary-item-selected-active-color,
+            $nav-secondary-item-hover-active-color,
             $nav-secondary-item-opened-bg-color,
             $nav-secondary-item-opened-text-color,
             $nav-secondary-group-text-color,
@@ -245,10 +275,12 @@ $nav-icononly-width: $s-15;
             $nav-normal-shadow,
             $nav-normal-item-hover-bg-color,
             $nav-normal-item-hover-text-color,
+            $nav-normal-item-hover-text-style,
             $nav-normal-item-selected-bg-color,
             $nav-normal-item-selected-text-color,
             $nav-normal-item-selected-text-style,
             $nav-normal-item-selected-active-color,
+            $nav-normal-item-hover-active-color,
             $nav-normal-item-opened-bg-color,
             $nav-normal-item-opened-text-color,
             $nav-normal-group-text-color,
@@ -287,10 +319,12 @@ $nav-icononly-width: $s-15;
             $shadow-zero,
             $nav-line-item-hover-bg-color,
             $nav-line-item-hover-text-color,
+            $nav-line-item-hover-text-style,
             $nav-line-item-selected-bg-color,
             $nav-line-item-selected-text-color,
             $nav-line-item-selected-text-style,
             $nav-line-item-selected-active-color,
+            $nav-line-item-hover-active-color,
             $nav-line-item-opened-bg-color,
             $nav-line-item-opened-text-color,
             $nav-line-group-text-color,

diff --git a/src/nav/scss/mixin.scss b/src/nav/scss/mixin.scss
@@ -6,7 +6,6 @@
     $height,
     $fontSize,
     $padding,
-    $activeLineWidth,
     $marginTB,
     $marginLR,
     $itemCorner
@@ -19,14 +18,6 @@
         margin-right: $marginLR;
         padding: 0 $padding;
         border-radius: $itemCorner;
-
-        &:before {
-            @if $direction == 'hoz' {
-                height: $activeLineWidth;
-            } @else {
-                width: $activeLineWidth;
-            }
-        }
     }
 
     #{$menu-prefix}-item:not(:first-child),
@@ -91,10 +82,12 @@
     $shadow,
     $hoverBgColor,
     $hoverColor,
+    $hoverWeight,
     $selectedBgColor,
     $selectedColor,
     $selectedWeight,
     $activeColor,
+    $hoverLineColor,
     $openedBgColor,
     $openedColor,
     $groupColor,
@@ -114,6 +107,7 @@
         &:hover {
             background-color: $hoverBgColor;
             color: $hoverColor;
+            font-weight: $hoverWeight;
         }
 
         &.#{$css-prefix}selected {
@@ -130,6 +124,9 @@
         &:before {
             background-color: $activeColor;
         }
+        &:hover:before {
+            background-color: $hoverLineColor;
+        }
     }
 
     #{$menu-prefix}-sub-menu #{$menu-prefix}-item.#{$css-prefix}opened {

diff --git a/src/nav/scss/variable.scss b/src/nav/scss/variable.scss
@@ -40,6 +40,9 @@ $nav-hoz-item-corner: $corner-zero !default;
 /// active line width
 /// @namespace size/item
 $nav-hoz-item-selected-active-line: $line-2 !default;
+/// hover line width
+/// @namespace size/item
+$nav-hoz-item-hover-active-line: $line-zero !default;
 
 // Size:Ver
 // ----------------------------------------
@@ -64,6 +67,9 @@ $nav-ver-item-corner: $corner-zero !default;
 /// active line width
 /// @namespace size/item
 $nav-ver-item-selected-active-line: $line-2 !default;
+/// hover line width
+/// @namespace size/item
+$nav-ver-item-hover-active-line: $line-zero !default;
 /// height
 /// @namespace size/sub nav
 $nav-ver-sub-nav-height: $s-10 !default;
@@ -132,6 +138,12 @@ $nav-primary-item-hover-bg-color: $color-black !default;
 /// text
 /// @namespace statement/hover
 $nav-primary-item-hover-text-color: $color-white !default;
+/// text style
+/// @namespace statement/hover
+$nav-primary-item-hover-text-style: $font-weight-2 !default;
+/// hover line color
+/// @namespace statement/hover
+$nav-primary-item-hover-active-color: $color-brand1-6 !default;
 /// background
 /// @namespace statement/hover/sub nav
 $nav-primary-sub-nav-hover-bg-color: $color-black !default;
@@ -207,6 +219,12 @@ $nav-secondary-item-hover-bg-color: $color-brand1-9 !default;
 /// text
 /// @namespace statement/hover
 $nav-secondary-item-hover-text-color: $color-white !default;
+/// text style
+/// @namespace statement/hover
+$nav-secondary-item-hover-text-style: $font-weight-2 !default;
+/// hover line color
+/// @namespace statement/hover
+$nav-secondary-item-hover-active-color: $color-brand1-9 !default;
 /// background
 /// @namespace statement/hover/sub nav
 $nav-secondary-sub-nav-hover-bg-color: $color-brand1-9 !default;
@@ -285,6 +303,12 @@ $nav-normal-item-hover-bg-color: $color-white !default;
 /// text
 /// @namespace statement/hover
 $nav-normal-item-hover-text-color: $color-brand1-6 !default;
+/// text style
+/// @namespace statement/hover
+$nav-normal-item-hover-text-style: $font-weight-2 !default;
+/// hover line color
+/// @namespace statement/hover
+$nav-normal-item-hover-active-color: $color-brand1-6 !default;
 /// background
 /// @namespace statement/hover/sub nav
 $nav-normal-sub-nav-hover-bg-color: $color-fill1-2 !default;
@@ -354,6 +378,12 @@ $nav-line-item-hover-bg-color: $color-transparent !default;
 /// text
 /// @namespace statement/hover
 $nav-line-item-hover-text-color: $color-brand1-6 !default;
+/// text style
+/// @namespace statement/hover
+$nav-line-item-hover-text-style: $font-weight-2 !default;
+/// hover line color
+/// @namespace statement/hover
+$nav-line-item-hover-active-color: $color-brand1-6 !default;
 /// background
 /// @namespace statement/hover/sub nav
 $nav-line-sub-nav-hover-bg-color: $color-transparent !default;