Skip to content

Commit 0aee0a5

Browse files
SimekSimek
authored
ui: small visual adjustments for second nav and dropdown elements (#5193)
1 parent c5bc384 commit 0aee0a5

3 files changed

Lines changed: 92 additions & 60 deletions

File tree

‎website/src/components/DocsSecondaryNav/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -243,15 +243,13 @@ export default function DocsSecondaryNav({
243243
<CopyPageButton
244244
customStyles={{
245245
container: {className: styles.copyPageContainer},
246-
button: {
247-
className: styles.copyPageButton,
248-
style: {marginBottom: 0},
249-
},
246+
button: {className: styles.copyPageButton},
250247
dropdown: {className: styles.copyPageDropdown},
251248
}}
252249
/>
253250
)}
254251
</div>
252+
<div className={styles.secondaryNavDivider} />
255253
</nav>
256254
);
257255
}

‎website/src/components/DocsSecondaryNav/styles.module.css‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
justify-content: space-between;
1212
gap: 1rem;
1313
height: var(--rn-subnav-height);
14-
padding: 0 1.5rem;
14+
padding: 0 var(--ifm-spacing-horizontal);
1515

1616
/* Pin directly below the main navbar so page content scrolls underneath. */
1717
position: sticky;
@@ -36,8 +36,7 @@
3636

3737
/* Bottom keyline, inset from both edges so it comes in from the screen edges
3838
without lining up with the inner elements' padding. */
39-
.secondaryNav:after {
40-
content: "";
39+
.secondaryNavDivider {
4140
position: absolute;
4241
right: 0.75rem;
4342
bottom: 0;
@@ -49,7 +48,7 @@
4948
.start {
5049
display: flex;
5150
align-items: center;
52-
gap: 1rem;
51+
gap: 0.5rem;
5352
min-width: 0;
5453
}
5554

@@ -71,6 +70,7 @@
7170
font-size: 1.5rem;
7271
font-weight: var(--ifm-heading-font-weight);
7372
line-height: 1.2;
73+
margin-right: 0.5rem;
7474
}
7575

7676
/* Outlined controls: the section dropdown toggle and the back link share the
@@ -90,9 +90,12 @@
9090
font-size: 0.9rem;
9191
color: var(--ifm-font-color-base);
9292
background: transparent;
93-
border: 1px solid var(--ifm-color-emphasis-300);
93+
border: 1px solid var(--ifm-color-emphasis-400);
9494
border-radius: var(--ifm-global-radius);
9595
text-decoration: none;
96+
transition:
97+
background-color 0.2s ease,
98+
border-color 0.2s ease;
9699
}
97100

98101
.dropdownToggle {
@@ -127,7 +130,7 @@
127130
color: var(--ifm-font-color-base);
128131
text-decoration: none;
129132
background-color: var(--ifm-menu-color-background-hover);
130-
border-color: var(--ifm-color-gray-400);
133+
border-color: var(--ifm-color-gray-500);
131134
}
132135

133136
/* Docs version dropdown wrapper. The dropdown reuses the theme navbar dropdown;
@@ -137,9 +140,6 @@
137140
.versionDropdown {
138141
display: flex;
139142
align-items: center;
140-
141-
/* Sit closer to the section dropdown than the .start gap allows. */
142-
margin-left: -0.5rem;
143143
}
144144

145145
/* Copy page button — appearance shared with its former home in DocItem */
@@ -150,59 +150,63 @@
150150

151151
button.copyPageButton {
152152
border-radius: var(--ifm-global-radius);
153-
border-color: var(--ifm-color-gray-500);
154-
}
153+
border-color: var(--ifm-color-gray-400);
154+
padding: 7px 12px;
155+
margin-bottom: 0;
155156

156-
button.copyPageButton:hover {
157-
background-color: var(--ifm-menu-color-background-hover) !important;
158-
border-color: var(--ifm-color-gray-400) !important;
159-
}
157+
&:hover {
158+
background-color: var(--ifm-menu-color-background-hover) !important;
159+
border-color: var(--ifm-color-gray-500) !important;
160+
}
160161

161-
button.copyPageButton svg {
162-
opacity: 0.75;
162+
svg {
163+
opacity: 0.75;
164+
}
163165
}
164166

165167
.copyPageDropdown {
166168
border-color: var(--ifm-table-border-color) !important;
167-
}
169+
margin-top: -3px;
168170

169-
.copyPageDropdown button[class^="dropdownItem"] {
170-
border-bottom-color: var(--ifm-table-border-color) !important;
171-
}
172-
173-
.copyPageDropdown button[class^="dropdownItem"]:hover {
174-
background-color: var(--ifm-menu-color-background-hover);
175-
}
171+
button[class^="dropdownItem"] {
172+
border-bottom-color: var(--ifm-table-border-color) !important;
176173

177-
.copyPageDropdown div[class^="itemDescription"] {
178-
font-weight: 300;
179-
font-size: 12px;
180-
}
174+
&:hover {
175+
background-color: var(--ifm-menu-color-background-hover);
176+
}
177+
}
181178

182-
[data-theme="dark"] .dropdownToggle,
183-
[data-theme="dark"] .backLink {
184-
background-color: var(--light);
179+
div[class^="itemDescription"] {
180+
font-weight: 300;
181+
font-size: 12px;
182+
}
185183
}
186184

187-
[data-theme="dark"] .dropdownToggle:hover,
188-
[data-theme="dark"] .backLink:hover {
189-
background-color: color-mix(in srgb, var(--light), white 10%);
190-
border-color: var(--ifm-color-gray-800);
191-
}
185+
[data-theme="dark"] {
186+
.dropdownToggle,
187+
.backLink,
188+
button.copyPageButton {
189+
background-color: color-mix(in srgb, var(--light), black 25%) !important;
190+
border-color: var(--ifm-hr-border-color) !important;
191+
}
192192

193-
[data-theme="dark"] button.copyPageButton:hover {
194-
background-color: var(--dark) !important;
195-
border-color: var(--ifm-color-gray-800) !important;
196-
}
193+
.dropdownToggle:hover,
194+
.backLink:hover,
195+
button.copyPageButton:hover {
196+
background-color: color-mix(in srgb, var(--light), black 10%) !important;
197+
border-color: var(--ifm-color-gray-800) !important;
198+
}
197199

198-
[data-theme="dark"] .copyPageDropdown {
199-
background-color: var(--ifm-navbar-background-color);
200-
}
200+
.copyPageDropdown {
201+
background-color: var(--ifm-navbar-background-color);
202+
background-color: color-mix(in srgb, var(--light), black 40%) !important;
201203

202-
[data-theme="dark"] .copyPageDropdown button[class^="dropdownItem"]:hover {
203-
background-color: var(--dark);
204-
}
204+
button[class^="dropdownItem"]:hover {
205+
background-color: color-mix(in srgb, var(--light), black 20%);
206+
}
205207

206-
[data-theme="dark"] .copyPageDropdown div[class^="itemDescription"] {
207-
color: var(--ifm-color-gray-600) !important;
208+
div[class^="itemDescription"] {
209+
color: var(--ifm-color-gray-600) !important;
210+
}
211+
}
208212
}

‎website/src/css/docs-secondary-nav.scss‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,32 +79,62 @@ html.plugin-docs {
7979
line-height: normal;
8080
color: var(--ifm-font-color-base);
8181
background: transparent;
82-
border: 1px solid var(--ifm-color-emphasis-300);
82+
border: 1px solid var(--ifm-color-emphasis-400);
8383
border-radius: 999px;
84+
transition:
85+
background-color 0.2s ease,
86+
border-color 0.2s ease;
8487

8588
// Match the section dropdown caret: nudged down and dimmed to grey.
8689
&:after {
8790
opacity: 0.6;
8891
transform: translateY(-1px);
92+
border-width: 0.3rem 0.3rem 0;
93+
margin-left: 0.35rem;
8994
}
9095

9196
&:hover {
9297
color: var(--ifm-font-color-base);
9398
background-color: var(--ifm-menu-color-background-hover);
94-
border-color: var(--ifm-color-gray-400);
99+
border-color: var(--ifm-color-gray-500);
95100
}
96101
}
97102
}
98103

104+
[class*="dropdown"] {
105+
.dropdown__menu {
106+
border: 1px solid var(--ifm-table-border-color);
107+
transform: translateY(4px);
108+
overflow: visible;
109+
110+
// Make sure that menu does not close on hover, with dropdown portion detached via transform
111+
&:before {
112+
content: "";
113+
position: absolute;
114+
height: 5px;
115+
top: -5px;
116+
left: 0;
117+
right: 0;
118+
}
119+
}
120+
}
121+
122+
[data-theme="dark"] [class*="dropdown"] {
123+
.dropdown__menu {
124+
background-color: color-mix(in srgb, var(--light), black 40%);
125+
}
126+
}
127+
99128
// Placed before the `[data-version-next]` block so the brand-blue "Next" state
100129
// still wins.
101130
[data-theme="dark"] [class*="versionDropdown"] .navbar__link {
102-
background-color: var(--light);
103-
}
131+
background-color: color-mix(in srgb, var(--light), black 25%);
132+
border-color: var(--ifm-hr-border-color);
104133

105-
[data-theme="dark"] [class*="versionDropdown"] .navbar__link:hover {
106-
background-color: color-mix(in srgb, var(--light), white 10%);
107-
border-color: var(--ifm-color-gray-800);
134+
&:hover {
135+
background-color: color-mix(in srgb, var(--light), black 10%);
136+
border-color: var(--ifm-color-gray-800);
137+
}
108138
}
109139

110140
[class*="versionDropdown"][data-version-next] .navbar__link {

0 commit comments

Comments
 (0)