Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4b0f191

Browse filesBrowse files
SevenOutmanSevenOutman
committed
wip feat(Sidenav): new design
1 parent b4cb5f9 commit 4b0f191
Copy full SHA for 4b0f191

File tree

6 files changed

+95
-57
lines changed
Filter options

6 files changed

+95
-57
lines changed

‎src/Sidenav/SidenavDropdown.tsx

Copy file name to clipboardExpand all lines: src/Sidenav/SidenavDropdown.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const SidenavDropdown: SidenavDropdownComponent = React.forwardRef<HTMLElement>(
238238
disabled,
239239
open,
240240
submenu: true,
241-
'selected-within': hasSelectedItems
241+
'selected-within': hasSelectedItems // TODO-Doma Remove in v6 in favor of :has() selector
242242
})
243243
);
244244
return (

‎src/Sidenav/styles/index.less

Copy file name to clipboardExpand all lines: src/Sidenav/styles/index.less
+63-47Lines changed: 63 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,22 @@
1818

1919
.rs-sidenav-nav {
2020
list-style: none;
21-
padding: 0;
21+
padding: @sidenav-padding-top @sidenav-item-margin-x 0;
2222

23-
.rs-sidenav-item,
2423
.rs-dropdown-toggle,
2524
.rs-dropdown-item,
2625
.rs-dropdown-item-toggle {
2726
padding: @sidenav-padding-vertical @sidenav-padding-horizontal;
2827
transition: @nav-item-transition;
29-
border-radius: 0;
3028
color: inherit;
3129

3230
.high-contrast-mode({
3331
transition: none;
3432
});
3533
}
3634

37-
> .rs-sidenav-item,
38-
> .rs-dropdown {
39-
margin: 0 !important;
40-
}
41-
4235
// <Dropdown> within <Sidenav>
36+
// TODO-Doma Don't mess up with .rs-dropdown. Assign special class names.
4337
> .rs-dropdown {
4438
// Submenu toggle
4539
.rs-dropdown-item-toggle {
@@ -108,10 +102,8 @@
108102
z-index: 1;
109103
}
110104

111-
> .rs-dropdown .rs-dropdown-menu-item-focus,
112-
> .rs-dropdown .rs-dropdown-item-active {
105+
> .rs-dropdown .rs-dropdown-menu-item-focus {
113106
font-weight: normal;
114-
background: transparent;
115107
}
116108

117109
> .rs-dropdown .rs-dropdown-menu {
@@ -139,8 +131,8 @@
139131
> .rs-sidenav-item,
140132
> .rs-dropdown .rs-dropdown-toggle {
141133
font-size: @sidenav-level1-item-font-size;
134+
font-weight: 600; // Semibold
142135
line-height: @sidenav-level1-item-line-height;
143-
padding-left: (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
144136
width: 100%;
145137
white-space: normal;
146138

@@ -149,16 +141,6 @@
149141
&:focus-visible {
150142
.focus-ring(inset);
151143
}
152-
153-
> .rs-icon:not(.rs-dropdown-toggle-caret) {
154-
font-size: @sidenav-level1-item-font-size;
155-
margin-right: @sidenav-icon-spacing;
156-
position: absolute;
157-
left: @sidenav-padding-horizontal;
158-
top: @sidenav-padding-vertical;
159-
line-height: @sidenav-level1-item-line-height;
160-
height: @sidenav-level1-item-font-size;
161-
}
162144
}
163145

164146
> .rs-dropdown-focus .rs-dropdown-toggle,
@@ -175,9 +157,23 @@
175157

176158
.rs-sidenav-item {
177159
position: relative;
178-
display: block;
160+
display: flex;
161+
align-items: center;
179162
outline: 0;
180163
overflow: hidden;
164+
border-radius: @sidenav-item-border-radius;
165+
line-height: @sidenav-item-line-height;
166+
padding: @sidenav-item-padding-y @sidenav-item-padding-x;
167+
transition: @nav-item-transition;
168+
color: inherit;
169+
170+
.high-contrast-mode({
171+
transition: none;
172+
});
173+
174+
&:not(:last-child) {
175+
margin-bottom: @sidenav-item-gap-y;
176+
}
181177

182178
&:hover,
183179
&:focus {
@@ -190,6 +186,31 @@
190186

191187
z-index: 2;
192188
}
189+
190+
// .rs-sidenav-item-icon
191+
// The icon displayed at the start of a Sidenav item
192+
&-icon {
193+
font-size: @sidenav-level1-item-font-size;
194+
margin-right: @sidenav-icon-spacing;
195+
line-height: @sidenav-level1-item-line-height;
196+
height: @sidenav-level1-item-font-size;
197+
}
198+
}
199+
200+
.rs-sidenav .rs-dropdown-item,
201+
.rs-sidenav .rs-dropdown-item-toggle {
202+
border-radius: @sidenav-item-border-radius;
203+
line-height: @sidenav-menuitem-line-height;
204+
padding: @sidenav-menuitem-padding-y @sidenav-item-padding-x;
205+
}
206+
207+
.rs-sidenav-item-active,
208+
.rs-sidenav .rs-dropdown-item-active {
209+
font-size: 600; // Semibold
210+
}
211+
212+
.rs-sidenav .rs-dropdown-menu > * + * {
213+
margin-top: @sidenav-item-gap-y;
193214
}
194215

195216
// TODO Consider rename as sidenav-footer
@@ -212,11 +233,6 @@
212233
.rs-sidenav-collapse-in {
213234
width: @sidenav-collapse-in-width;
214235

215-
//Nav item
216-
.rs-sidenav-item {
217-
border-radius: 0;
218-
}
219-
220236
//Dropdown style rewrite
221237
.rs-dropdown {
222238
display: flex;
@@ -333,8 +349,7 @@
333349
// -----------------
334350
.rs-dropdown-item,
335351
.rs-dropdown-item-submenu > .rs-dropdown-item-toggle {
336-
padding: @sidenav-children-padding-vertical @sidenav-padding-horizontal
337-
@sidenav-children-padding-vertical @sidenav-level2-retract;
352+
padding-left: @sidenav-level2-retract;
338353
}
339354

340355
.rs-dropdown-item {
@@ -450,9 +465,14 @@
450465
color: var(--rs-sidenav-default-hover-text);
451466
}
452467

453-
.rs-sidenav-item.rs-sidenav-item-active,
468+
.rs-sidenav-item-active,
469+
.rs-dropdown-item-active {
470+
background-color: var(--rs-sidenav-default-selected-bg);
471+
}
472+
473+
.rs-sidenav-item-active,
454474
.rs-dropdown-item.rs-dropdown-item-active,
455-
.rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
475+
.rs-dropdown:has(.rs-dropdown-item-active) .rs-sidenav-item-icon {
456476
color: var(--rs-sidenav-default-selected-text);
457477
}
458478

@@ -493,15 +513,6 @@
493513
}
494514
}
495515

496-
.rs-sidenav-default.rs-sidenav-collapse-in,
497-
.rs-sidenav-default.rs-sidenav-collapsing,
498-
.rs-sidenav-default.rs-sidenav-collapse-out {
499-
// Set active Level1 style
500-
.rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
501-
color: var(--rs-sidenav-default-selected-text);
502-
}
503-
}
504-
505516
// Inverse Sidenav
506517
.rs-sidenav-inverse {
507518
background-color: var(--rs-sidenav-inverse-bg);
@@ -535,14 +546,14 @@
535546

536547
// Active
537548
.rs-sidenav-item.rs-sidenav-item-active,
538-
.rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
549+
.rs-dropdown:has(.rs-dropdown-item-active) .rs-dropdown-toggle {
539550
.high-contrast-mode({
540551
color: var(--rs-sidenav-inverse-selected-text);
541552
});
542553
}
543554

544555
// Active
545-
.rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
556+
.rs-dropdown:has(.rs-dropdown-item-active) .rs-dropdown-toggle,
546557
.rs-sidenav-item,
547558
.rs-dropdown .rs-dropdown-toggle {
548559
color: var(--rs-sidenav-inverse-text);
@@ -583,9 +594,14 @@
583594
}
584595

585596
// Active
586-
.rs-sidenav-item.rs-sidenav-item-active,
587-
.rs-dropdown-item.rs-dropdown-item-active,
588-
.rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
597+
.rs-sidenav-item-active,
598+
.rs-dropdown-item-active {
599+
background-color: var(--rs-sidenav-subtle-selected-bg);
600+
}
601+
602+
.rs-sidenav-item-active,
603+
.rs-dropdown-item-active,
604+
.rs-dropdown:has(.rs-dropdown-item-active) .rs-sidenav-item-icon {
589605
color: var(--rs-sidenav-subtle-selected-text);
590606
}
591607

@@ -626,7 +642,7 @@
626642
.rs-sidenav-subtle.rs-sidenav-collapsing,
627643
.rs-sidenav-subtle.rs-sidenav-collapse-out {
628644
// Set active Level1 style
629-
.rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
645+
.rs-dropdown:has(.rs-dropdown-item-active) .rs-dropdown-toggle {
630646
&:hover {
631647
background-color: var(--rs-sidenav-subtle-hover-bg);
632648
}

‎src/styles/color-modes/light.less

Copy file name to clipboardExpand all lines: src/styles/color-modes/light.less
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,8 @@
214214
--rs-sidenav-default-bg: @B050;
215215
--rs-sidenav-default-text: @B800;
216216
--rs-sidenav-default-selected-text: @H700;
217-
--rs-sidenav-default-hover-bg: @B200;
217+
--rs-sidenav-default-selected-bg: @sidenav-default-item-selected-bg;
218+
--rs-sidenav-default-hover-bg: @sidenav-default-item-hover-bg;
218219
--rs-sidenav-default-hover-text: @B800;
219220
--rs-sidenav-default-footer-border: @B200;
220221
--rs-sidenav-inverse-bg: @H500;
@@ -225,6 +226,7 @@
225226
--rs-sidenav-subtle-bg: #fff;
226227
--rs-sidenav-subtle-text: @B600;
227228
--rs-sidenav-subtle-selected-text: @H700;
229+
--rs-sidenav-subtle-selected-bg: @sidenav-subtle-item-selected-bg;
228230
--rs-sidenav-subtle-hover-bg: @B050;
229231
--rs-sidenav-subtle-hover-text: @B800;
230232
--rs-sidenav-subtle-footer-border: @B200;

‎src/styles/colors/light.less

Copy file name to clipboardExpand all lines: src/styles/colors/light.less
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
@B500: #a6a6a6;
2323
@B600: #8e8e93;
2424
@B700: #7a7a7a;
25-
@B800: #575757;
26-
@B900: #272c36;
25+
@B800: #343434;
26+
@B900: #121212;
2727

2828
// Secondary palette
2929

‎src/styles/variables.less

Copy file name to clipboardExpand all lines: src/styles/variables.less
+24-5Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -419,27 +419,46 @@
419419

420420
// Sidenav
421421

422+
@sidenav-padding-vertical: 10px; // Deprecated in v6. Use @sidenav-item-padding-y instead.
423+
@sidenav-padding-horizontal: 12px; // Deprecated in v6, Use @sidenav-item-padding-x instead.
424+
425+
@sidenav-padding-top: 4px; // TODO-Doma consider better naming.
426+
427+
@sidenav-item-margin-x: 8px;
428+
@sidenav-item-padding-y: @sidenav-padding-vertical;
429+
@sidenav-item-padding-x: @sidenav-padding-horizontal;
430+
@sidenav-item-line-height: 22px;
431+
@sidenav-item-height: (@sidenav-item-padding-y * 2 + @sidenav-item-line-height);
432+
@sidenav-item-gap-y: 4px;
433+
@sidenav-item-border-radius: 6px;
422434
@sidenav-item-caret-size: 16px;
423-
@sidenav-padding-vertical: 15px;
435+
436+
@sidenav-default-item-selected-bg: #e5e5ea80;
437+
@sidenav-default-item-hover-bg: @B200;
438+
439+
@sidenav-subtle-item-selected-bg: #CCE9FF80;
440+
441+
@sidenav-menuitem-padding-y: 8px;
442+
@sidenav-menuitem-line-height: 20px;
443+
@sidenav-menuitem-height: (@sidenav-menuitem-padding-y * 2 + @sidenav-menuitem-line-height);
444+
424445
@sidenav-children-padding-vertical: 11px;
425-
@sidenav-padding-horizontal: 20px;
426446
@sidenav-collapse-in-width: 100%;
427447
@sidenav-default-width: 56px;
428448
@sidenav-compact-width: @sidenav-default-width; // TODO Replace sidenav-default-width
429-
@sidenav-item-height: (@sidenav-padding-vertical * 2 + @line-height-computed);
430449
@sidenav-menu-max-height: (@sidenav-item-height * 40);
431450
@sidenav-menu-animation-time: 1.5s;
432451
@sidenav-footer-height: @sidenav-item-height; // Footer is same height as a sidenav item
433452
@sidenav-level1-item-font-size: @font-size-large;
434453
@sidenav-level1-item-line-height: unit((@line-height-computed / @font-size-large));
435-
@sidenav-icon-spacing: 20px;
454+
@sidenav-icon-spacing: 12px;
436455
@sidenav-icon-width: @sidenav-level1-item-font-size;
437456
@sidenav-dropdown-toggle-caret-width: 20px;
438457
@sidenav-collapse-transition-config: 0.15s ease-in;
439458

440459
@sidenav-level-retract: 9px;
441460
@sidenav-level2-retract: (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
442-
@sidenav-level3-retract: (@sidenav-level2-retract + @sidenav-level-retract); //60 px
461+
@sidenav-level3-retract: 54px;
443462
@sidenav-level4-retract: (@sidenav-level2-retract + @sidenav-level-retract * 2);
444463
@sidenav-level5-retract: (@sidenav-level2-retract + @sidenav-level-retract * 3);
445464
@sidenav-level6-retract: (@sidenav-level2-retract + @sidenav-level-retract * 4);

‎stylelint.config.js

Copy file name to clipboardExpand all lines: stylelint.config.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@ module.exports = {
107107
'target',
108108
// Level 4 (including Working Drafts)
109109
'focus-within',
110-
'focus-visible'
110+
'focus-visible',
111+
'has'
111112
],
112113

113114
// String using single quotes

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.