forked from eslint/eslint
/
index.scss
109 lines (90 loc) · 2.04 KB
/
index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
.index {
margin-bottom: 4rem;
margin-block-end: 4rem;
}
.index__item {
margin: 0;
a {
display: block;
color: inherit;
text-decoration: none;
padding: .625rem .875rem;
font-size: var(--step-0);
border-radius: var(--border-radius);
&:hover {
color: var(--link-color);
}
}
a[aria-current="page"] {
color: var(--link-color);
background-color: var(--lightest-background-color);
font-weight: 500;
}
}
.index__toggle {
cursor: pointer;
display: flex;
width: 100%;
padding: .75rem 1.125rem;
align-items: center;
justify-content: space-between;
gap: .5rem;
font-weight: 500;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--secondary-button-background-color);
color: var(--secondary-button-text-color);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
&:hover {
background-color: var(--secondary-button-hover-color);
}
@media all and (min-width: 1024px) {
display: none;
}
svg {
width: 1.5em;
height: 1.5em;
color: inherit;
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
#ham-top,
#ham-middle,
#ham-bottom {
transition: all .2s linear;
}
#ham-top {
transform-origin: 30px 37px;
}
#ham-bottom {
transform-origin: 30px 63px;
}
&[aria-expanded="true"] {
#ham-middle {
opacity: 0;
}
#ham-top {
transform: rotate(41deg);
}
#ham-bottom {
transform: rotate(-41deg);
}
}
}
.index__list {
display: block;
&[data-open="false"] {
display: none;
@media all and (min-width: 1024px) {
display: block;
}
}
&[data-open="true"] {
display: block;
@media all and (min-width: 1024px) {
display: block;
}
}
}