Skip to content

Commit 5348d94

Browse files
author
rakeshAlgo
committed
New style guide for Nav UI is completed
1 parent 990749e commit 5348d94

File tree

2 files changed

+54
-14
lines changed

2 files changed

+54
-14
lines changed

src/css/nav.css

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,22 @@
7878
padding: 0;
7979
}
8080

81-
.nav-menu .nav-list .nav-list .nav-line[data-depth="1"] {
81+
.nav-menu .nav-list .nav-list .nav-line {
8282
padding-left: 1.65rem;
8383
}
8484

85+
.nav-menu .nav-list .nav-list .nav-line[data-depth="2"] {
86+
padding-left: 3rem;
87+
}
88+
89+
.nav-menu .nav-list .nav-list .nav-line[data-depth="3"] {
90+
padding-left: 4.2rem;
91+
}
92+
93+
.nav-menu .nav-list .nav-list .nav-line[data-depth="4"] {
94+
padding-left: 5.5rem;
95+
}
96+
8597
.nav-menu .nav-list li a {
8698
font-size: 0.875rem;
8799
font-weight: var(--weight-normal);
@@ -149,7 +161,7 @@
149161

150162
/* .nav-item.is-active > .nav-line[data-depth="0"], */
151163
.nav-item.open > .nav-line[data-depth="0"],
152-
.nav-item.is-current-path.is-active-depth-2:not(.is-active) > .nav-line,
164+
.nav-item.is-current-path.is-active-depth-2:not(.is-active) > .nav-line,
153165
.nav-item.is-current-page > .nav-line {
154166
background: #4287d60f;
155167
margin-bottom: 0.625rem;
@@ -170,6 +182,15 @@
170182
font-weight: var(--weight-medium);
171183
}
172184

185+
.nav-item.is-current-path.is-active[data-depth='1'] .in-toggle[data-depth='1'],
186+
.nav-item.is-current-page.is-active[data-depth='1'] .in-toggle[data-depth='1'],
187+
.nav-item.is-current-path.is-active[data-depth='2'] .in-toggle[data-depth='2'],
188+
.nav-item.is-current-page.is-active[data-depth='2'] .in-toggle[data-depth='2'],
189+
.nav-item.is-current-path.is-active[data-depth='3'] .in-toggle[data-depth='3'],
190+
.nav-item.is-current-page.is-active[data-depth='3'] .in-toggle[data-depth='3'] {
191+
transform: rotate(90deg);
192+
}
193+
173194
.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link {
174195
/* color: var(--color-brand-blue); */
175196
font-weight: var(--weight-semibold);
@@ -244,7 +265,7 @@ html.is-clipped--nav {
244265
cursor: pointer;
245266
}
246267

247-
.main-nav-parent .back-to-menu .fas{
268+
.main-nav-parent .back-to-menu .fas {
248269
margin-right: 8px;
249270
}
250271

@@ -262,7 +283,7 @@ html.is-clipped--nav {
262283
}
263284

264285
.in-toggle {
265-
display: none;
286+
/* display: none; */
266287
cursor: pointer;
267288
/* margin-right: 10px; */
268289
}
@@ -271,12 +292,11 @@ html.is-clipped--nav {
271292
display: none;
272293
}
273294

274-
.nav-line[data-depth="1"],
275-
.nav-line[data-depth="2"] {
295+
.nav-menu .nav-item .nav-line {
276296
display: flex;
277-
justify-content: flex-end;
297+
/* justify-content: flex-end; */
278298
padding: 0.625rem 1.375rem;
279-
flex-direction: row-reverse;
299+
/* flex-direction: row-reverse; */
280300
}
281301

282302
.nav-line[data-depth="1"] .nav-link {
@@ -318,12 +338,30 @@ html.is-clipped--nav {
318338
}
319339

320340
.nav-item[data-depth='1'] .in-toggle {
321-
background: url(../img/back-arrow.png) no-repeat center center;
322-
transform: rotate(180deg);
323-
width: 20px;
324-
height: 20px;
325-
margin-left: 5px;
326-
}
341+
position: relative;
342+
/* left: -5px; */
343+
width: 0;
344+
height: 0;
345+
margin-right: 10px;
346+
border-top: 6px solid transparent;
347+
border-bottom: 6px solid transparent;
348+
border-left: 10px solid var(--color-brand-gray5);
349+
}
350+
351+
/* .nav-item[data-depth='1'] .in-toggle::after {
352+
width: 0;
353+
height: 0;
354+
border-left: 4px solid transparent;
355+
border-right: 4px solid transparent;
356+
border-top: 8px solid red;
357+
top: 0;
358+
position: absolute;
359+
content: '';
360+
cursor: pointer;
361+
right: -15px;
362+
bottom: 0;
363+
margin: auto;
364+
} */
327365

328366
@media screen and (min-width: 769px) {
329367
.nav-control {

src/js/01-nav.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,8 @@
141141
return el
142142
}
143143

144+
// has children in li
145+
// $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
144146
function concealEvent (e) {
145147
e.stopPropagation()
146148
}

0 commit comments

Comments
 (0)