Skip to content

Commit 1ade828

Browse files
author
Bogdan Plieshka
committed
MAGETWO-34180: Active item in Nivagation menu is not highlighted
- Added styles for active menu items
1 parent 670849f commit 1ade828

File tree

2 files changed

+82
-48
lines changed

2 files changed

+82
-48
lines changed

‎lib/web/css/source/lib/_navigation.less

Lines changed: 78 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
// _____________________________________________
99

1010
.main-navigation(
11+
@_nav__indent-side: 20px,
1112
@_nav-background-color: @navigation__background,
1213
@_nav-border: @navigation__border,
1314
@_nav-level0-font-size: @navigation-level0-item__font-size,
@@ -23,7 +24,7 @@
2324
@_nav-level0-item-text-decoration: @navigation-level0-item__text-decoration,
2425

2526
@_nav-level0-item-background-color-active: @navigation-level0-item__active__background,
26-
@_nav-level0-item-border-active: @navigation-level0-item__active__border,
27+
@_nav-level0-item__active__border-left: @navigation-level0-item__active__border-left,
2728
@_nav-level0-item-color-active: @navigation-level0-item__active__color,
2829
@_nav-level0-item-text-decoration-active: @navigation-level0-item__active__text-decoration,
2930

@@ -40,7 +41,7 @@
4041
@_submenu-item-text-decoration: @submenu-item__text-decoration,
4142

4243
@_submenu-item-background-color-active: @submenu-item__active__background,
43-
@_submenu-item-border-active: @submenu-item__active__border,
44+
@_submenu-item__active__border-left: @submenu-item__active__border-left,
4445
@_submenu-item-color-active: @submenu-item__active__color,
4546
@_submenu-item-text-decoration-active: @submenu-item__active__text-decoration
4647
) {
@@ -69,52 +70,83 @@
6970
.css(text-transform, @_nav-level0-text-transform);
7071
display: block;
7172
}
72-
&.active > a {
73-
.css(background, @_nav-level0-item-background-color-active);
74-
.css(border, @_nav-level0-item-border-active);
75-
.css(color, @_nav-level0-item-color-active);
76-
.css(text-decoration, @_nav-level0-item-text-decoration-active);
73+
> .level1 {
74+
font-weight: @font-weight__semibold;
75+
.ui-menu {
76+
padding-left: @_nav__indent-side;
77+
}
78+
}
79+
&.active {
80+
> a:not(.ui-state-active) {
81+
.css(background, @_nav-level0-item-background-color-active);
82+
.css(border-left, @_nav-level0-item__active__border-left);
83+
.css(color, @_nav-level0-item-color-active);
84+
.css(text-decoration, @_nav-level0-item-text-decoration-active);
85+
padding-left: @_nav__indent-side - @navigation-item__active__border-width;
86+
}
7787
}
7888
&:last-child {
7989
.css(border-bottom, @_nav-level0-item-border);
8090
}
8191
}
82-
.ui-menu:not(:first-child) {
83-
.css(background, @_submenu-background-color);
84-
.css(border, @_submenu-border);
85-
.css(font-size, @_submenu-font-size);
86-
.css(font-weight, @_submenu-font-weight);
87-
overflow-x: hidden;
88-
position: relative;
89-
transition: left .3s ease-out 0;
90-
top: auto !important;
91-
left: auto !important;
92-
padding: 10px 20px;
93-
> ul {
94-
display: block;
95-
.css(padding, @_submenu-padding);
92+
.ui-menu {
93+
&:not(:first-child) {
94+
.css(background, @_submenu-background-color);
95+
.css(border, @_submenu-border);
96+
.css(font-size, @_submenu-font-size);
97+
.css(font-weight, @_submenu-font-weight);
98+
overflow-x: hidden;
99+
position: relative;
100+
transition: left .3s ease-out;
101+
top: auto !important;
102+
left: auto !important;
103+
padding: 10px 0;
96104
> li {
97-
margin: 0;
98-
a {
99-
.css(background, @_submenu-item-background-color);
100-
.css(border, @_submenu-item-border);
101-
.css(color, @_submenu-item-color);
102-
.css(text-decoration, @_submenu-item-text-decoration);
103-
display: block;
104-
line-height: normal;
105-
.css(padding, @_submenu-item-padding);
105+
> a {
106+
padding-right: @_nav__indent-side;
107+
padding-left: @_nav__indent-side;
108+
}
109+
}
110+
> ul {
111+
display: block;
112+
.css(padding, @_submenu-padding);
113+
> li {
114+
margin: 0;
115+
a {
116+
.css(background, @_submenu-item-background-color);
117+
.css(border, @_submenu-item-border);
118+
.css(color, @_submenu-item-color);
119+
display: block;
120+
line-height: normal;
121+
.css(padding, @_submenu-item-padding);
122+
.css(text-decoration, @_submenu-item-text-decoration);
123+
}
124+
}
125+
}
126+
&.expanded {
127+
display: block !important;
128+
top: 0 !important;
129+
}
130+
.active {
131+
> a {
132+
.css(background, @_submenu-item-background-color-active);
133+
.css(color, @_submenu-item-color-active);
134+
.css(text-decoration, @_submenu-item-text-decoration-active);
135+
}
136+
}
137+
.level1 {
138+
&.active {
139+
> a {
140+
.css(border-left, @_submenu-item__active__border-left);
141+
padding-left: @_nav__indent-side - 8px;
142+
}
143+
}
144+
}
145+
.level2 {
146+
&.active {
147+
font-weight: @font-weight__semibold;
106148
}
107149
}
108-
}
109-
&.expanded {
110-
display: block !important;
111-
top: 0 !important;
112-
}
113-
.active > a {
114-
.css(background, @_submenu-item-background-color-active);
115-
.css(border, @_submenu-item-border-active);
116-
.css(color, @_submenu-item-color-active);
117-
.css(text-decoration, @_submenu-item-text-decoration-active);
118150
}
119151
}
120152
}
@@ -145,7 +177,7 @@
145177
@_nav-level0-item-text-decoration-hover: @navigation-desktop-level0-item__hover__text-decoration,
146178

147179
@_nav-level0-item-background-color-active: @navigation-desktop-level0-item__active__background,
148-
@_nav-level0-item-border-active: @navigation-desktop-level0-item__active__border,
180+
@_nav-level0-item__active__border: @navigation-desktop-level0-item__active__border,
149181
@_nav-level0-item-color-active: @navigation-desktop-level0-item__active__color,
150182
@_nav-level0-item-text-decoration-active: @navigation-desktop-level0-item__active__text-decoration,
151183

@@ -175,7 +207,7 @@
175207
@_submenu-item-text-decoration-hover: @submenu-desktop-item__hover__text-decoration,
176208

177209
@_submenu-item-background-color-active: @submenu-desktop-item__active__background,
178-
@_submenu-item-border-active: @submenu-desktop-item__active__border,
210+
@_submenu-item__active__border: @submenu-desktop-item__active__border,
179211
@_submenu-item-color-active: @submenu-desktop-item__active__color,
180212
@_submenu-item-text-decoration-active: @submenu-desktop-item__active__text-decoration
181213
) {
@@ -233,7 +265,7 @@
233265
&.active {
234266
> .level-top {
235267
.css(background, @_nav-level0-item-background-color-active);
236-
.css(border, @_nav-level0-item-border-active);
268+
.css(border, @_nav-level0-item__active__border);
237269
.css(color, @_nav-level0-item-color-active);
238270
.css(text-decoration, @_nav-level0-item-text-decoration-active);
239271
}
@@ -280,7 +312,7 @@
280312
}
281313
.active > a {
282314
.css(background, @_submenu-item-background-color-active);
283-
.css(border, @_submenu-item-border-active);
315+
.css(border, @_submenu-item__active__border);
284316
.css(color, @_submenu-item-color-active);
285317
.css(text-decoration, @_submenu-item-text-decoration-active);
286318
}
@@ -357,7 +389,7 @@
357389
.css(margin-top, -@_size);
358390
> ul {
359391
.css(margin-top, @_size);
360-
&:before{
392+
&:before {
361393
.css(color, @_bg);
362394
content: '';
363395
display: block;
@@ -374,7 +406,7 @@
374406
.css(margin-top, -@_size);
375407
> ul {
376408
.css(margin-top, @_size);
377-
&:before{
409+
&:before {
378410
.css(color, @_border);
379411
content: '';
380412
display: block;

‎lib/web/css/source/lib/variables/_navigation.less

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@
2323
@navigation-level0-item__text-decoration: none;
2424

2525
@navigation-level0-item__active__background: '';
26-
@navigation-level0-item__active__border: '';
26+
@navigation-level0-item__active__border-left: @navigation-item__active__border-width solid @color-orange-red1;
2727
@navigation-level0-item__active__color: '';
2828
@navigation-level0-item__active__text-decoration: '';
2929

30+
@navigation-item__active__border-width: 8px;
31+
3032
@submenu__background: '';
3133
@submenu__border: '';
3234
@submenu__padding: 0 0 0 @indent__base;
@@ -40,7 +42,7 @@
4042
@submenu-item__text-decoration: '';
4143

4244
@submenu-item__active__background: '';
43-
@submenu-item__active__border: '';
45+
@submenu-item__active__border-left: @navigation-level0-item__active__border-left;
4446
@submenu-item__active__color: '';
4547
@submenu-item__active__text-decoration: '';
4648

0 commit comments

Comments
 (0)