Skip to content

Commit 661d494

Browse files
marissahuysentruytmarissahuysentruyt
committed
feat(appframesidenav): new styles
1 parent 58245c5 commit 661d494

File tree

1 file changed

+65
-27
lines changed

1 file changed

+65
-27
lines changed

‎components/appframesidenav/index.css

Lines changed: 65 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
Copyright 2023 Adobe. All rights reserved.
2+
Copyright 2025 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -11,15 +11,17 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-AppFrameSideNav {
14-
--spectrum-app-side-nav-min-inline-size: 140px;
15-
--spectrum-app-side-nav-max-inline-size: 260px;
16-
--spectrum-app-side-nav-padding: var(--spectrum-spacing-200);
14+
--spectrum-app-side-nav-min-inline-size: var(--spectrum-app-side-nav-min-inline-size-expanded);
15+
--spectrum-app-side-nav-max-inline-size: 240px;
16+
--spectrum-app-side-nav-padding-inline: var(--spectrum-spacing-200);
17+
--spectrum-app-side-nav-padding-block-start: var(--spectrum-spacing-300);
18+
--spectrum-app-side-nav-padding-block-end: var(--spectrum-spacing-200);
1719
--spectrum-app-side-nav-item-gap: var(--spectrum-spacing-100);
1820
--spectrum-app-side-nav-top-button-to-items: var(--spectrum-spacing-300);
19-
--spectrum-app-side-nav-items-to-end-section: var(--spectrum-spacing-300);
20-
--spectrum-app-side-nav-label-padding-block: var(--spectrum-component-top-to-text-100) var(--spectrum-component-bottom-to-text-100);
21-
--spectrum-app-side-nav-label-padding-inline: var(--spectrum-spacing-100);
22-
--spectrum-app-side-nav-icon-border-radius: var(--spectrum-corner-radius-medium-default);
21+
--spectrum-app-side-nav-label-padding-block: var(--spectrum-component-top-to-text-100) var(--spectrum-spacing-100);
22+
--spectrum-app-side-nav-label-padding-inline-start: 6px;
23+
--spectrum-app-side-nav-label-padding-inline-end: var(--spectrum-spacing-100);
24+
--spectrum-app-side-nav-expand-button-spacing-block-start: var(--spectrum-spacing-300);
2325

2426
--spectrum-app-side-nav-line-height: var(--spectrum-line-height-100);
2527
--spectrum-app-side-nav-font-family: var(--spectrum-sans-font-family-stack);
@@ -28,28 +30,39 @@ governing permissions and limitations under the License.
2830
--spectrum-app-side-nav-font-size: var(--spectrum-font-size-100);
2931

3032
--spectrum-app-side-nav-content-color: var(--spectrum-neutral-content-color-default);
31-
--spectrum-app-side-nav-icon-color: var(--spectrum-neutral-content-color-default);
33+
--spectrum-app-side-nav-icon-color: var(--spectrum-neutral-subdued-content-color-default);
3234
--spectrum-app-side-nav-focus-indicator-color: var(--spectrum-focus-indicator-color);
3335
--spectrum-app-side-nav-icon-background-default: transparent;
34-
--spectrum-app-side-nav-icon-background-focus: var(--spectrum-gray-200);
3536

36-
--spectrum-app-side-nav-icon-background-current: #292929;
37-
--spectrum-app-side-nav-icon-color-current: var(--spectrum-white);
37+
--spectrum-app-side-nav-icon-indicator-color: var(--spectrum-app-side-nav-icon-color);
38+
--spectrum-app-side-nav-icon-indicator-color-current: var(--spectrum-app-side-nav-content-color);
39+
--spectrum-app-side-nav-icon-indicator-color-hover: var(--spectrum-gray-400);
40+
--spectrum-app-side-nav-icon-indicator-inline-size: 2px;
41+
--spectrum-app-side-nav-icon-indicator-block-size: 18px;
42+
--spectrum-app-side-nav-expand-icon-color: var(--spectrum-gray-600);
3843

3944
&:lang(ja),
4045
&:lang(zh),
4146
&:lang(ko) {
4247
--spectrum-app-side-nav-line-height: var(--spectrum-cjk-line-height-100);
4348
}
4449

45-
/* To-do: For demo purposes only; would not convert to SWC. Would need a token. This value is just a guesstimate. */
46-
.spectrum--large & {
47-
--spectrum-app-side-nav-min-inline-size: 160px;
50+
&.spectrum-AppFrameSideNav--minimized {
51+
--spectrum-app-side-nav-min-inline-size: var(--spectrum-app-side-nav-min-inline-size-minimized);
52+
}
53+
54+
.spectrum-AppFrameSideNav-list-item-link {
55+
&:hover {
56+
--spectrum-app-side-nav-icon-indicator-color: var(--spectrum-app-side-nav-icon-indicator-color-hover);
57+
}
4858
}
49-
}
5059

51-
.spectrum-AppFrameSideNav.spectrum-AppFrameSideNav--minimized {
52-
--spectrum-app-side-nav-min-inline-size: var(--spectrum-component-height-400);
60+
/* passthroughs for expand button action button */
61+
--mod-actionbutton-content-color-default: var(--spectrum-app-side-nav-expand-icon-color);
62+
--mod-actionbutton-background-color-hover: transparent;
63+
--mod-actionbutton-background-color-down: transparent;
64+
--mod-actionbutton-background-color-focus: transparent;
65+
/* end passthroughs */
5366
}
5467

5568
.spectrum-AppFrameSideNav {
@@ -58,7 +71,8 @@ governing permissions and limitations under the License.
5871

5972
box-sizing: border-box;
6073
margin: 0;
61-
padding: var(--spectrum-app-side-nav-padding);
74+
padding-block: var(--spectrum-app-side-nav-padding-block-start) var(--spectrum-app-side-nav-padding-block-end);
75+
padding-inline: var(--spectrum-app-side-nav-padding-inline);
6276
display: flex;
6377
flex-direction: column;
6478
align-items: flex-start;
@@ -67,10 +81,17 @@ governing permissions and limitations under the License.
6781
max-inline-size: var(--spectrum-app-side-nav-max-inline-size);
6882
}
6983

84+
/* Optional button at the top of the side nav */
7085
.spectrum-AppFrameSideNav .spectrum-AppFrameSideNav-button {
7186
margin-block-end: var(--spectrum-app-side-nav-top-button-to-items);
7287
}
7388

89+
/* Expand/collapse button at the bottom of the side nav */
90+
.spectrum-AppFrameSideNav-expand-button {
91+
margin-block-start: var(--spectrum-app-side-nav-expand-button-spacing-block-start);
92+
color: var(--spectrum-app-side-nav-expand-icon-color);
93+
}
94+
7495
.spectrum-AppFrameSideNav-list {
7596
list-style-type: none;
7697
margin: 0;
@@ -102,8 +123,8 @@ governing permissions and limitations under the License.
102123
.spectrum-AppFrameSideNav-list-item-icon {
103124
inline-size: var(--spectrum-component-height-100);
104125
block-size: var(--spectrum-component-height-100);
105-
border-radius: var(--spectrum-app-side-nav-icon-border-radius);
106126
display: flex;
127+
flex-shrink: 0;
107128
align-items: center;
108129
justify-content: center;
109130
background: var(--_spectrum-app-side-nav-icon-background);
@@ -114,21 +135,35 @@ governing permissions and limitations under the License.
114135
display: flex;
115136
flex-direction: row;
116137
flex-wrap: nowrap;
138+
align-items: center;
117139

118140
text-decoration: none;
119141
outline: none;
120142
color: var(--spectrum-app-side-nav-content-color);
121143

144+
position: relative;
145+
122146
&:focus-visible {
123147
outline: 2px solid var(--spectrum-app-side-nav-focus-indicator-color);
148+
border-radius: var(--spectrum-corner-radius-medium-default);
124149
outline-offset: 2px;
125-
border-radius: var(--spectrum-app-side-nav-icon-border-radius);
126150
}
127151

128-
&:focus-visible,
129-
&:active,
152+
/* Indicator line for hover and current item */
153+
&::before {
154+
position: absolute;
155+
content: "";
156+
inset-inline-start: calc(var(--spectrum-app-side-nav-icon-indicator-inline-size) * -1);
157+
block-size: var(--spectrum-app-side-nav-icon-indicator-block-size);
158+
inline-size: var(--spectrum-app-side-nav-icon-indicator-inline-size);
159+
background: transparent;
160+
border-radius: var(--spectrum-corner-radius-full);
161+
}
162+
130163
&:hover {
131-
--_spectrum-app-side-nav-icon-background: var(--spectrum-app-side-nav-icon-background-focus);
164+
&::before {
165+
background: var(--spectrum-app-side-nav-icon-indicator-color);
166+
}
132167
}
133168

134169
&:active {
@@ -138,14 +173,17 @@ governing permissions and limitations under the License.
138173
}
139174

140175
.spectrum-AppFrameSideNav-list-item.spectrum-AppFrameSideNav-list-item--current & {
141-
--_spectrum-app-side-nav-icon-background: var(--spectrum-app-side-nav-icon-background-current);
142-
--_spectrum-app-side-nav-icon-color: var(--spectrum-app-side-nav-icon-color-current);
176+
--_spectrum-app-side-nav-icon-color: var(--spectrum-app-side-nav-icon-indicator-color-current);
177+
178+
&::before {
179+
background: var(--spectrum-app-side-nav-icon-indicator-color-current);
180+
}
143181
}
144182
}
145183

146184
.spectrum-AppFrameSideNav-list-item-label {
147185
padding-block: var(--spectrum-app-side-nav-label-padding-block);
148-
padding-inline: var(--spectrum-app-side-nav-label-padding-inline);
186+
padding-inline: var(--spectrum-app-side-nav-label-padding-inline-start) var(--spectrum-app-side-nav-label-padding-inline-end);
149187
}
150188

151189
.spectrum-AppFrameSideNav--minimized .spectrum-AppFrameSideNav-list-item-label {

0 commit comments

Comments
 (0)