Skip to content

Commit 5532c20

Browse files
crikfilippocrikfilippo
committed
Revert "navbar - added variants styling"
This reverts commit 1e4c785.
1 parent 0de6172 commit 5532c20

File tree

2 files changed

+84
-128
lines changed

2 files changed

+84
-128
lines changed

‎src/css/bundle.css‎

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3865,46 +3865,10 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
38653865
padding-bottom: calc(var(--nav-size-base) / 3);
38663866
}
38673867

3868-
.kroma-navbar.toggled-menu .nav-menu ul li:hover
3869-
,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{
3870-
background: var(--neutral-200);
3868+
.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
3869+
background: var(--neutral-100);
38713870
}
38723871

3873-
.kroma-navbar.toggled-menu .nav-menu ul li:hover a
3874-
,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{
3875-
color: var(--neutral-800);
3876-
}
3877-
3878-
.nav-menu ul li:hover a {
3879-
background: transparent;
3880-
}
3881-
3882-
nav.kroma-navbar[data-variant]:before {
3883-
background: var(--variant-bg);
3884-
border-bottom-color: var(--variant-border);
3885-
}
3886-
3887-
nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
3888-
color: var(--variant-text);
3889-
}
3890-
3891-
3892-
.kroma-navbar[data-variant] span.nav-line {
3893-
background: var(--variant-text);
3894-
}
3895-
3896-
.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
3897-
,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
3898-
background: var(--variant-hover-bg);
3899-
}
3900-
3901-
.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
3902-
,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
3903-
color: var(--variant-hover);
3904-
}
3905-
3906-
3907-
39083872

39093873
.kroma-navbar:not(.toggled-menu) .nav-menu {
39103874
width: 100%;

‎src/css/components/navbar.css‎

Lines changed: 82 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,36 @@
99
}
1010

1111
.kroma-navbar .nav-logo {
12-
height: calc(var(--nav-size-base) / 1.5 );
13-
width: max-content;
14-
display: flex;
15-
flex-direction: row;
16-
flex-wrap: nowrap;
17-
align-items: center;
18-
gap: calc(var(--nav-size-base) / 6);
19-
flex: auto;
12+
height: calc(var(--nav-size-base) / 1.5 );
13+
width: max-content;
14+
display: flex;
15+
flex-direction: row;
16+
flex-wrap: nowrap;
17+
align-items: center;
18+
gap: calc(var(--nav-size-base) / 6);
19+
flex: auto;
2020
}
2121

2222
nav.kroma-navbar {
23-
width: 100%;
24-
height: var(--nav-size-base);
25-
position: sticky;
26-
top: 0;
27-
left: 0;
28-
z-index: 3;
29-
display: flex;
30-
flex-direction: row;
31-
align-content: center;
32-
align-items: center;
33-
flex-wrap: nowrap;
34-
backdrop-filter: blur(4px);
35-
-webkit-backdrop-filter: blur(4px);
36-
justify-content: space-between;
37-
box-sizing: border-box;
38-
padding: calc(var(--nav-size-base) / 6);
39-
gap: calc(var(--nav-size-base) / 6);
23+
width: 100%;
24+
height: var(--nav-size-base);
25+
position: sticky;
26+
top: 0;
27+
left: 0;
28+
z-index: 3;
29+
display: flex;
30+
flex-direction: row;
31+
align-content: center;
32+
align-items: center;
33+
flex-wrap: nowrap;
34+
backdrop-filter: blur(4px);
35+
-webkit-backdrop-filter: blur(4px);
36+
justify-content: space-between;
37+
box-sizing: border-box;
38+
padding: calc(var(--nav-size-base) / 6);
39+
gap: calc(var(--nav-size-base) / 6);
4040
}
4141

42-
4342
nav.kroma-navbar:before {
4443
content: "";
4544
display: block;
@@ -83,108 +82,101 @@ nav.kroma-navbar:before {
8382
}
8483

8584
nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
86-
display: none;
85+
display: none;
8786
}
8887

8988
.kroma-navbar .nav-toggle.show #nav-line-3 {
90-
opacity: 0;
91-
/* top: 20px; */
92-
height: 0;
89+
opacity: 0;
90+
/* top: 20px; */
91+
height: 0;
9392
}
9493

9594
.kroma-navbar .nav-toggle.show #nav-line-1 {
96-
transform: translate(0px, 50%) rotate(45deg);
97-
transform-origin: center;
95+
transform: translate(0px, 50%) rotate(45deg);
96+
transform-origin: center;
9897
}
9998

10099
.kroma-navbar .nav-toggle.show #nav-line-2 {
101-
/* background: var(--neutral-700); */
102-
transform: translate(0px, -50%) rotate(-45deg);
103-
transform-origin: center;
100+
/* background: var(--neutral-700); */
101+
transform: translate(0px, -50%) rotate(-45deg);
102+
transform-origin: center;
104103
}
105104

106105
.kroma-navbar.toggled-menu .nav-menu {
107-
display: flex;
108-
position: absolute;
109-
top: 100%;
110-
right: 0;
111-
margin: calc(var(--nav-size-base) / 3);
112-
background: var(--neutral-50);
113-
border-radius: 10px;
114-
box-shadow: var(--shadow-sm);
115-
align-items: center;
116-
justify-content: center;
117-
/* min-width: 170px; */
118-
max-height: 0;
119-
opacity: 0;
120-
overflow: hidden;
121-
transition: opacity 100ms, max-height 2s 0ms;
106+
display: flex;
107+
position: absolute;
108+
top: 100%;
109+
right: 0;
110+
margin: calc(var(--nav-size-base) / 3);
111+
background: var(--neutral-50);
112+
border-radius: 10px;
113+
box-shadow: var(--shadow-sm);
114+
align-items: center;
115+
justify-content: center;
116+
/* min-width: 170px; */
117+
max-height: 0;
118+
opacity: 0;
119+
overflow: hidden;
120+
transition: opacity 100ms, max-height 2s 0ms;
122121
}
123122

124123
.kroma-navbar.toggled-menu .nav-menu ul li a {
125-
text-decoration: none;
126-
list-style: none;
127-
padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
128-
display: block;
124+
text-decoration: none;
125+
list-style: none;
126+
padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
127+
display: block;
129128
}
130129

131130

132131
.kroma-navbar.toggled-menu .nav-menu ul {
133-
width: 100%;
134-
height: 100%;
135-
display: flex;
136-
flex-direction: column;
132+
width: 100%;
133+
height: 100%;
134+
display: flex;
135+
flex-direction: column;
137136
}
138137

139138
.kroma-navbar .nav-toggle.show ~ .nav-menu {
140-
max-height: 1000px;
141-
opacity: 1;
142-
transition: max-height 0s 0ms, opacity 100ms;
139+
max-height: 1000px;
140+
opacity: 1;
141+
transition: max-height 0s 0ms, opacity 100ms;
143142
}
144143

145144
.kroma-navbar.toggled-menu .nav-menu ul li:first-child a {
146-
padding-top: calc(var(--nav-size-base) / 3);
145+
padding-top: calc(var(--nav-size-base) / 3);
147146
}
148147

149148
.kroma-navbar.toggled-menu .nav-menu ul li:last-child a {
150-
padding-bottom: calc(var(--nav-size-base) / 3);
151-
}
152-
153-
.kroma-navbar.toggled-menu .nav-menu ul li:hover
154-
,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{
155-
background: var(--neutral-200);
149+
padding-bottom: calc(var(--nav-size-base) / 3);
156150
}
157151

158-
.kroma-navbar.toggled-menu .nav-menu ul li:hover a
159-
,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{
160-
color: var(--neutral-800);
152+
.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
153+
background: var(--neutral-100);
161154
}
162155

163-
.nav-menu ul li:hover a {
164-
background: transparent;
165-
}
166156

167-
nav.kroma-navbar[data-variant]:before {
168-
background: var(--variant-bg);
169-
border-bottom-color: var(--variant-border);
170-
}
171-
172-
nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
173-
color: var(--variant-text);
157+
.kroma-navbar:not(.toggled-menu) .nav-menu {
158+
width: 100%;
159+
display: flex;
160+
justify-content: flex-end;
161+
align-items: center;
174162
}
175163

176-
177-
.kroma-navbar[data-variant] span.nav-line {
178-
background: var(--variant-text);
164+
.kroma-navbar:not(.toggled-menu) .nav-menu ul {
165+
display: flex;
166+
flex-direction: row;
167+
list-style: none;
168+
gap: calc(var(--nav-size-base) / 6);
179169
}
180170

181-
.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
182-
,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
183-
background: var(--variant-hover-bg);
171+
.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
172+
text-decoration: none;
184173
}
185174

186-
.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
187-
,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
188-
color: var(--variant-hover);
175+
.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
176+
text-decoration: underline;
189177
}
190178

179+
.kroma-navbar .kroma-avatar {
180+
max-height: calc(var(--nav-size-base) / 1.5);
181+
max-width: calc(var(--nav-size-base) / 1.5);
182+
}

0 commit comments

Comments
 (0)