]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | .docs-index .docs-index__list { |
2 | a { | |
3 | border-radius: var(--border-radius); | |
4 | text-decoration: none; | |
5 | display: flex; | |
6 | justify-content: space-between; | |
7 | align-items: center; | |
8 | padding: .5rem .75rem; | |
9 | margin-left: -.75rem; | |
10 | margin-inline-start: -.75rem; | |
11 | color: var(--headings-color); | |
12 | ||
13 | &:hover, | |
14 | &[aria-current="true"] { | |
15 | background-color: var(--docs-lightest-background-color); | |
16 | color: var(--link-color); | |
17 | } | |
18 | ||
19 | @media all and (max-width: 1023px) { | |
20 | padding: .5rem 1rem; | |
21 | margin-left: 0; | |
22 | margin-inline-start: 0; | |
23 | } | |
24 | } | |
25 | } | |
26 | ||
27 | .docs-index__item { | |
28 | margin: 0; | |
29 | ||
30 | ul ul { | |
31 | padding-left: .75rem; | |
32 | } | |
33 | ||
34 | &[data-has-children] { | |
35 | margin-bottom: .5rem; | |
36 | } | |
37 | } | |
38 | ||
39 | .docs-index__list > .docs-index__item { | |
40 | margin-top: 1.5rem; | |
41 | margin-block-start: 1.5rem; | |
42 | ||
43 | > a { | |
44 | color: var(--icon-color); | |
45 | text-transform: uppercase; | |
46 | letter-spacing: 1px; | |
47 | font-size: .875rem; | |
48 | font-weight: 500; | |
49 | } | |
50 | } | |
51 | ||
52 | /* Styles for the accordion icon */ | |
53 | .index-js .index-icon { | |
54 | display: block !important; | |
55 | width: 0.75rem; | |
56 | height: 0.5rem; | |
57 | transform-origin: 50% 50%; | |
58 | transition: all 0.1s linear; | |
59 | color: inherit; | |
60 | } | |
61 | ||
62 | .index-js [aria-expanded="true"] .index-icon { | |
8f9d1d4d DC |
63 | transform: rotate(180deg); |
64 | } | |
65 | ||
66 | .index-js ul[aria-hidden="true"] { | |
67 | display: none; | |
68 | } | |
69 | ||
70 | .index-js ul[aria-hidden="false"] { | |
71 | display: block; | |
72 | } | |
73 | ||
74 | .docs__index__panel { | |
75 | &[data-open="false"] { | |
76 | display: none; | |
77 | ||
78 | @media all and (min-width: 1024px) { | |
79 | display: block; | |
80 | } | |
81 | } | |
82 | ||
83 | &[data-open="true"] { | |
84 | display: block; | |
85 | ||
86 | @media all and (min-width: 1024px) { | |
87 | display: block; | |
88 | } | |
89 | } | |
90 | } | |
91 | ||
92 | .docs-index-toggle { | |
93 | cursor: pointer; | |
94 | display: flex; | |
95 | width: 100%; | |
96 | padding: .75rem 1.125rem; | |
97 | align-items: center; | |
98 | justify-content: space-between; | |
99 | gap: .5rem; | |
100 | font-weight: 500; | |
101 | border: 1px solid var(--border-color); | |
102 | border-radius: var(--border-radius); | |
103 | background-color: var(--secondary-button-background-color); | |
104 | color: var(--secondary-button-text-color); | |
105 | box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); | |
106 | ||
107 | &:hover { | |
108 | background-color: var(--secondary-button-hover-color); | |
109 | } | |
110 | ||
111 | @media all and (min-width: 1024px) { | |
112 | display: none; | |
113 | } | |
114 | ||
115 | svg { | |
116 | width: 1.5em; | |
117 | height: 1.5em; | |
118 | color: inherit; | |
119 | fill: none; | |
120 | stroke-width: 4; | |
121 | stroke-linecap: round; | |
122 | stroke-linejoin: round; | |
123 | } | |
124 | ||
125 | #ham-top, | |
126 | #ham-middle, | |
127 | #ham-bottom { | |
128 | transition: all .2s linear; | |
129 | } | |
130 | ||
131 | #ham-top { | |
132 | transform-origin: 30px 37px; | |
133 | } | |
134 | ||
135 | #ham-bottom { | |
136 | transform-origin: 30px 63px; | |
137 | } | |
138 | ||
139 | &[aria-expanded="true"] { | |
140 | #ham-middle { | |
141 | opacity: 0; | |
142 | } | |
143 | ||
144 | #ham-top { | |
8f9d1d4d DC |
145 | transform: rotate(41deg); |
146 | } | |
147 | ||
148 | #ham-bottom { | |
149 | transform: rotate(-41deg); | |
150 | } | |
151 | } | |
152 | } | |
153 | ||
154 | .eslint-actions { | |
155 | display: inline-flex; | |
156 | flex-wrap: wrap; | |
157 | flex-direction: column; | |
158 | width: 100%; | |
159 | gap: 1rem; | |
160 | ||
161 | @media all and (min-width: 640px) { | |
162 | flex-direction: row; | |
163 | } | |
164 | } |