Skip to content

Commit 1e4c785

Browse files
crikfilippocrikfilippo
committed
navbar - added variants styling
1 parent 2252639 commit 1e4c785

File tree

2 files changed

+128
-84
lines changed

2 files changed

+128
-84
lines changed

‎src/css/bundle.css‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3865,10 +3865,46 @@ 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 a.nav-current,.nav-menu ul li:hover a {
3869-
background: var(--neutral-100);
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);
38703871
}
38713872

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+
38723908

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

‎src/css/components/navbar.css‎

Lines changed: 90 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,37 @@
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+
4243
nav.kroma-navbar:before {
4344
content: "";
4445
display: block;
@@ -82,101 +83,108 @@ nav.kroma-navbar:before {
8283
}
8384

8485
nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
85-
display: none;
86+
display: none;
8687
}
8788

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

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

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

105106
.kroma-navbar.toggled-menu .nav-menu {
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;
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;
121122
}
122123

123124
.kroma-navbar.toggled-menu .nav-menu ul li a {
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;
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;
128129
}
129130

130131

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

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

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

148149
.kroma-navbar.toggled-menu .nav-menu ul li:last-child a {
149-
padding-bottom: calc(var(--nav-size-base) / 3);
150+
padding-bottom: calc(var(--nav-size-base) / 3);
150151
}
151152

152-
.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
153-
background: var(--neutral-100);
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);
154156
}
155157

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);
161+
}
156162

157-
.kroma-navbar:not(.toggled-menu) .nav-menu {
158-
width: 100%;
159-
display: flex;
160-
justify-content: flex-end;
161-
align-items: center;
163+
.nav-menu ul li:hover a {
164+
background: transparent;
162165
}
163166

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);
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);
174+
}
175+
176+
177+
.kroma-navbar[data-variant] span.nav-line {
178+
background: var(--variant-text);
169179
}
170180

171-
.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
172-
text-decoration: none;
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);
173184
}
174185

175-
.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
176-
text-decoration: underline;
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);
177189
}
178190

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)