Skip to content

Commit 126e13d

Browse files
pepelsbeycaugner
pepelsbey
and
caugner
authored
Refactor menu, fix issues (#8)
Co-authored-by: Claas Augner <[email protected]>
1 parent ba7b63c commit 126e13d

File tree

5 files changed

+325
-315
lines changed

5 files changed

+325
-315
lines changed

‎components/menu/elements/content.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* Content */
2+
3+
.menu__content {
4+
display: grid;
5+
grid-template-columns: repeat(3, 1fr);
6+
}
7+
8+
/* Full */
9+
10+
.menu__content-full {
11+
display: grid;
12+
row-gap: 1.6rem;
13+
padding: 1.6rem;
14+
grid-column: span 3;
15+
}
16+
17+
/* Primary */
18+
19+
.menu__content-primary {
20+
display: grid;
21+
row-gap: 1.6rem;
22+
padding: 1.6rem;
23+
}
24+
25+
/* Secondary */
26+
27+
.menu__content-secondary {
28+
padding: 1.6rem;
29+
display: grid;
30+
row-gap: 1.6rem;
31+
grid-column: span 2;
32+
grid-template-columns: subgrid;
33+
position: relative;
34+
35+
&::before {
36+
content: "";
37+
position: absolute;
38+
left: 0;
39+
top: 1.6rem;
40+
bottom: 1.6rem;
41+
width: 1px;
42+
background-color: var(--gray-2);
43+
}
44+
}
45+
46+
/* List */
47+
48+
.menu__content-list {
49+
margin: 0;
50+
display: grid;
51+
row-gap: 0.825rem;
52+
align-content: start;
53+
54+
dt {
55+
letter-spacing: 0.05em;
56+
font-size: 0.825rem;
57+
text-transform: uppercase;
58+
color: var(--text-secondary);
59+
}
60+
61+
dd {
62+
margin: 0;
63+
}
64+
65+
ul {
66+
margin: 0;
67+
padding: 0;
68+
list-style: none;
69+
display: grid;
70+
row-gap: 0.825rem;
71+
}
72+
73+
a {
74+
color: var(--text-primary);
75+
text-decoration: none;
76+
77+
&:hover {
78+
text-decoration: underline;
79+
}
80+
}
81+
}
82+
83+
/* Featured */
84+
85+
.menu__content-featured {
86+
margin: 0;
87+
padding: 0;
88+
list-style: none;
89+
display: grid;
90+
row-gap: 1.6rem;
91+
92+
a {
93+
display: inline flex;
94+
align-items: center;
95+
column-gap: 0.5rem;
96+
color: var(--text-primary);
97+
text-decoration: none;
98+
99+
&:hover {
100+
text-decoration: underline;
101+
}
102+
103+
svg {
104+
fill: var(--text-secondary);
105+
}
106+
}
107+
}

‎components/menu/elements/panel.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Panel */
2+
3+
.menu__panel {
4+
--menu__panel-back: var(--background-blue);
5+
--menu__panel-link: var(--link-normal);
6+
7+
position: absolute;
8+
inset: 3rem 0 auto 0;
9+
margin-block-start: -1px;
10+
border: 1px solid light-dark(var(--gray-4), var(--gray-6));
11+
border-radius: 2px;
12+
background-color: var(--background-primary);
13+
box-shadow: 0px 0px 10px 1px hsl(0, 0%, 0%, 0.05);
14+
}
15+
16+
.menu__panel--learn {
17+
--menu__panel-back: var(--background-orange);
18+
--menu__panel-link: var(--text-orange);
19+
}
20+
21+
.menu__panel--tools {
22+
--menu__panel-back: var(--background-purple);
23+
--menu__panel-link: var(--text-purple);
24+
}
25+
26+
.menu__panel--about {
27+
--menu__panel-back: var(--background-green);
28+
--menu__panel-link: var(--text-green);
29+
}
30+
31+
/* Title */
32+
33+
.menu__panel-title {
34+
margin: 0;
35+
padding: 1.4rem;
36+
font-weight: normal;
37+
grid-column: span 3;
38+
background-color: var(--menu__panel-back);
39+
40+
a {
41+
color: var(--menu__panel-link);
42+
}
43+
}

‎components/menu/elements/tabs.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Tabs */
2+
3+
.menu__tabs {
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
display: flex;
8+
column-gap: 0.5rem;
9+
}
10+
11+
/* Button */
12+
13+
.menu__tabs-button {
14+
--menu__tabs-button-background: var(--background-blue);
15+
--menu__tabs-button-text: var(--text-blue);
16+
17+
margin: 0;
18+
padding: 0.7rem;
19+
display: flex;
20+
column-gap: 0.25rem;
21+
align-items: center;
22+
background-color: transparent;
23+
border: 1px solid transparent;
24+
border-block-end: none;
25+
border-radius: 2px;
26+
color: var(--text-primary);
27+
white-space: nowrap;
28+
font: inherit;
29+
cursor: pointer;
30+
31+
&:is([aria-expanded="true"], :hover) {
32+
background-color: var(--menu__tabs-button-background);
33+
color: var(--menu__tabs-button-text);
34+
}
35+
}
36+
37+
.menu__tabs-button--learn {
38+
--menu__tabs-button-background: var(--background-orange);
39+
--menu__tabs-button-text: var(--text-orange);
40+
}
41+
42+
.menu__tabs-button--tools {
43+
--menu__tabs-button-background: var(--background-purple);
44+
--menu__tabs-button-text: var(--text-purple);
45+
}
46+
47+
.menu__tabs-button--about {
48+
--menu__tabs-button-background: var(--background-green);
49+
--menu__tabs-button-text: var(--text-green);
50+
}
51+
52+
/* Icon */
53+
54+
.menu__tabs-icon {
55+
fill: currentColor;
56+
}
57+
58+
/* Arrow */
59+
60+
.menu__tabs-arrow {
61+
fill: currentColor;
62+
63+
[aria-expanded="true"] & {
64+
scale: -1;
65+
}
66+
}
67+
68+
/* Link */
69+
70+
.menu__tabs-link {
71+
padding: 0.7rem;
72+
color: var(--text-primary);
73+
74+
&:hover {
75+
text-decoration: none;
76+
}
77+
}

0 commit comments

Comments
 (0)