Skip to content

Commit 27ccded

Browse files
youlunayouluna
committed
feat(Nav): add theme configuration about hover
1 parent 8c6a3af commit 27ccded

File tree

3 files changed

+78
-17
lines changed

3 files changed

+78
-17
lines changed

‎src/nav/main.scss

+42-8
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ $nav-icononly-width: $s-15;
7272
$nav-hoz-height - $popup-local-border-width * 2,
7373
$nav-hoz-font-size,
7474
$nav-hoz-item-padding-lr,
75-
$nav-hoz-item-selected-active-line,
7675
$nav-hoz-item-margin-tb,
7776
$nav-hoz-item-margin-lr,
7877
$nav-hoz-item-corner
@@ -94,9 +93,22 @@ $nav-icononly-width: $s-15;
9493
height: $nav-hoz-height - $popup-local-border-width * 2;
9594
}
9695

97-
#{$nav-prefix}-item:before {
98-
width: 0;
99-
left: 50%;
96+
#{$nav-prefix}-item {
97+
&:before {
98+
width: 0;
99+
left: 50%;
100+
}
101+
102+
&:hover:before {
103+
height: $nav-hoz-item-hover-active-line;
104+
}
105+
106+
@if ($nav-hoz-item-hover-active-line != 0) {
107+
&:hover:before {
108+
width: 100%;
109+
left: 0;
110+
}
111+
}
100112
}
101113

102114
&.#{$css-prefix}top #{$nav-prefix}-item:before {
@@ -110,6 +122,7 @@ $nav-icononly-width: $s-15;
110122
.#{$css-prefix}selected#{$nav-prefix}-item:before {
111123
width: 100%;
112124
left: 0;
125+
height: $nav-hoz-item-selected-active-line;
113126
}
114127
}
115128

@@ -121,7 +134,6 @@ $nav-icononly-width: $s-15;
121134
$nav-ver-height,
122135
$nav-ver-font-size,
123136
$nav-ver-item-padding-lr,
124-
$nav-ver-item-selected-active-line,
125137
$nav-ver-item-margin-tb,
126138
$nav-ver-item-margin-lr,
127139
$nav-ver-item-corner
@@ -149,9 +161,22 @@ $nav-icononly-width: $s-15;
149161
font-size: $nav-ver-sub-nav-font-size;
150162
}
151163

152-
#{$nav-prefix}-item:before {
153-
height: 0;
154-
top: 50%;
164+
#{$nav-prefix}-item {
165+
&:before {
166+
height: 0;
167+
top: 50%;
168+
}
169+
170+
&:hover:before {
171+
width: $nav-ver-item-hover-active-line;
172+
}
173+
174+
@if ($nav-ver-item-hover-active-line != 0) {
175+
&:hover:before {
176+
height: 100%;
177+
top: 0;
178+
}
179+
}
155180
}
156181

157182
&.#{$css-prefix}left #{$nav-prefix}-item:before {
@@ -165,6 +190,7 @@ $nav-icononly-width: $s-15;
165190
.#{$css-prefix}selected#{$nav-prefix}-item:before {
166191
height: 100%;
167192
top: 0;
193+
width: $nav-ver-item-selected-active-line;
168194
}
169195
}
170196

@@ -181,10 +207,12 @@ $nav-icononly-width: $s-15;
181207
$nav-primary-shadow,
182208
$nav-primary-item-hover-bg-color,
183209
$nav-primary-item-hover-text-color,
210+
$nav-primary-item-hover-text-style,
184211
$nav-primary-item-selected-bg-color,
185212
$nav-primary-item-selected-text-color,
186213
$nav-primary-item-selected-text-style,
187214
$nav-primary-item-selected-active-color,
215+
$nav-primary-item-hover-active-color,
188216
$nav-primary-item-opened-bg-color,
189217
$nav-primary-item-opened-text-color,
190218
$nav-primary-group-text-color,
@@ -215,10 +243,12 @@ $nav-icononly-width: $s-15;
215243
$nav-secondary-shadow,
216244
$nav-secondary-item-hover-bg-color,
217245
$nav-secondary-item-hover-text-color,
246+
$nav-secondary-item-hover-text-style,
218247
$nav-secondary-item-selected-bg-color,
219248
$nav-secondary-item-selected-text-color,
220249
$nav-secondary-item-selected-text-style,
221250
$nav-secondary-item-selected-active-color,
251+
$nav-secondary-item-hover-active-color,
222252
$nav-secondary-item-opened-bg-color,
223253
$nav-secondary-item-opened-text-color,
224254
$nav-secondary-group-text-color,
@@ -245,10 +275,12 @@ $nav-icononly-width: $s-15;
245275
$nav-normal-shadow,
246276
$nav-normal-item-hover-bg-color,
247277
$nav-normal-item-hover-text-color,
278+
$nav-normal-item-hover-text-style,
248279
$nav-normal-item-selected-bg-color,
249280
$nav-normal-item-selected-text-color,
250281
$nav-normal-item-selected-text-style,
251282
$nav-normal-item-selected-active-color,
283+
$nav-normal-item-hover-active-color,
252284
$nav-normal-item-opened-bg-color,
253285
$nav-normal-item-opened-text-color,
254286
$nav-normal-group-text-color,
@@ -287,10 +319,12 @@ $nav-icononly-width: $s-15;
287319
$shadow-zero,
288320
$nav-line-item-hover-bg-color,
289321
$nav-line-item-hover-text-color,
322+
$nav-line-item-hover-text-style,
290323
$nav-line-item-selected-bg-color,
291324
$nav-line-item-selected-text-color,
292325
$nav-line-item-selected-text-style,
293326
$nav-line-item-selected-active-color,
327+
$nav-line-item-hover-active-color,
294328
$nav-line-item-opened-bg-color,
295329
$nav-line-item-opened-text-color,
296330
$nav-line-group-text-color,

‎src/nav/scss/mixin.scss

+6-9
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
$height,
77
$fontSize,
88
$padding,
9-
$activeLineWidth,
109
$marginTB,
1110
$marginLR,
1211
$itemCorner
@@ -19,14 +18,6 @@
1918
margin-right: $marginLR;
2019
padding: 0 $padding;
2120
border-radius: $itemCorner;
22-
23-
&:before {
24-
@if $direction == 'hoz' {
25-
height: $activeLineWidth;
26-
} @else {
27-
width: $activeLineWidth;
28-
}
29-
}
3021
}
3122

3223
#{$menu-prefix}-item:not(:first-child),
@@ -91,10 +82,12 @@
9182
$shadow,
9283
$hoverBgColor,
9384
$hoverColor,
85+
$hoverWeight,
9486
$selectedBgColor,
9587
$selectedColor,
9688
$selectedWeight,
9789
$activeColor,
90+
$hoverLineColor,
9891
$openedBgColor,
9992
$openedColor,
10093
$groupColor,
@@ -114,6 +107,7 @@
114107
&:hover {
115108
background-color: $hoverBgColor;
116109
color: $hoverColor;
110+
font-weight: $hoverWeight;
117111
}
118112

119113
&.#{$css-prefix}selected {
@@ -130,6 +124,9 @@
130124
&:before {
131125
background-color: $activeColor;
132126
}
127+
&:hover:before {
128+
background-color: $hoverLineColor;
129+
}
133130
}
134131

135132
#{$menu-prefix}-sub-menu #{$menu-prefix}-item.#{$css-prefix}opened {

‎src/nav/scss/variable.scss

+30
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ $nav-hoz-item-corner: $corner-zero !default;
4040
/// active line width
4141
/// @namespace size/item
4242
$nav-hoz-item-selected-active-line: $line-2 !default;
43+
/// hover line width
44+
/// @namespace size/item
45+
$nav-hoz-item-hover-active-line: $line-zero !default;
4346

4447
// Size:Ver
4548
// ----------------------------------------
@@ -64,6 +67,9 @@ $nav-ver-item-corner: $corner-zero !default;
6467
/// active line width
6568
/// @namespace size/item
6669
$nav-ver-item-selected-active-line: $line-2 !default;
70+
/// hover line width
71+
/// @namespace size/item
72+
$nav-ver-item-hover-active-line: $line-zero !default;
6773
/// height
6874
/// @namespace size/sub nav
6975
$nav-ver-sub-nav-height: $s-10 !default;
@@ -132,6 +138,12 @@ $nav-primary-item-hover-bg-color: $color-black !default;
132138
/// text
133139
/// @namespace statement/hover
134140
$nav-primary-item-hover-text-color: $color-white !default;
141+
/// text style
142+
/// @namespace statement/hover
143+
$nav-primary-item-hover-text-style: $font-weight-2 !default;
144+
/// hover line color
145+
/// @namespace statement/hover
146+
$nav-primary-item-hover-active-color: $color-brand1-6 !default;
135147
/// background
136148
/// @namespace statement/hover/sub nav
137149
$nav-primary-sub-nav-hover-bg-color: $color-black !default;
@@ -207,6 +219,12 @@ $nav-secondary-item-hover-bg-color: $color-brand1-9 !default;
207219
/// text
208220
/// @namespace statement/hover
209221
$nav-secondary-item-hover-text-color: $color-white !default;
222+
/// text style
223+
/// @namespace statement/hover
224+
$nav-secondary-item-hover-text-style: $font-weight-2 !default;
225+
/// hover line color
226+
/// @namespace statement/hover
227+
$nav-secondary-item-hover-active-color: $color-brand1-9 !default;
210228
/// background
211229
/// @namespace statement/hover/sub nav
212230
$nav-secondary-sub-nav-hover-bg-color: $color-brand1-9 !default;
@@ -285,6 +303,12 @@ $nav-normal-item-hover-bg-color: $color-white !default;
285303
/// text
286304
/// @namespace statement/hover
287305
$nav-normal-item-hover-text-color: $color-brand1-6 !default;
306+
/// text style
307+
/// @namespace statement/hover
308+
$nav-normal-item-hover-text-style: $font-weight-2 !default;
309+
/// hover line color
310+
/// @namespace statement/hover
311+
$nav-normal-item-hover-active-color: $color-brand1-6 !default;
288312
/// background
289313
/// @namespace statement/hover/sub nav
290314
$nav-normal-sub-nav-hover-bg-color: $color-fill1-2 !default;
@@ -354,6 +378,12 @@ $nav-line-item-hover-bg-color: $color-transparent !default;
354378
/// text
355379
/// @namespace statement/hover
356380
$nav-line-item-hover-text-color: $color-brand1-6 !default;
381+
/// text style
382+
/// @namespace statement/hover
383+
$nav-line-item-hover-text-style: $font-weight-2 !default;
384+
/// hover line color
385+
/// @namespace statement/hover
386+
$nav-line-item-hover-active-color: $color-brand1-6 !default;
357387
/// background
358388
/// @namespace statement/hover/sub nav
359389
$nav-line-sub-nav-hover-bg-color: $color-transparent !default;

0 commit comments

Comments
 (0)