Skip to content

Commit aa96910

Browse files
100stacks100stacks
authored
Merge pull request #826 from lalithkarikelli/surf2115
feat(topnav): document styles and update component specs
2 parents 2a7a698 + 85c7566 commit aa96910

File tree

2 files changed

+65
-61
lines changed

2 files changed

+65
-61
lines changed

‎src/scss/components/topnav/index.scss‎

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@
88

99
#hxTopNav {
1010
background-color: $gray-0;
11+
background-color: var(--hxTopNav-bgcolor, $gray-0);
12+
border-bottom: 0.125rem solid $gray-300;
13+
border-bottom: 0.125rem solid var(--hxTopNav-borderbottom, $gray-300);
1114
overflow: hidden;
1215
width: 100vw;
13-
border-bottom: 0.125rem solid $gray-300;
1416

1517
.hxNavGradient {
1618
width: 100vw;
@@ -21,9 +23,9 @@
2123
.img-left, // deprecated
2224
.hxTopNavLogo {
2325
float: left;
24-
height: 3.5rem;
26+
height: 3.8rem;
2527
padding: 1rem 1.25rem;
26-
width: 10rem;
28+
width: 9.75rem;
2729

2830
&[disabled] {
2931
@include hxTopNavControl(disabled);
@@ -37,11 +39,13 @@
3739

3840
a:hover {
3941
color: $gray-950;
42+
color: var(--hxTopNav-hover, $gray-950);
4043
}
4144

4245
.straightLine, // deprecated
4346
.hxSpacer {
4447
background-color: $gray-300;
48+
background-color: var(--hxTopNav-hxSpacer-bgcolor, $gray-300);
4549
height: 2.75rem;
4650
margin: 0.5rem 0 0.5rem 0.5rem;
4751
width: 1px;
@@ -53,24 +57,27 @@
5357
float: left;
5458

5559
> hx-disclosure {
56-
padding: 0.625rem 1.25rem 0;
5760
border-bottom: 2px solid $purple-500;
58-
height: 3.5rem;
61+
border-bottom: 2px solid var(--hxTopNav-hxTopNavOptionMenu-borderbottom, $purple-500);
62+
height: 3.8rem;
63+
padding: 0.625rem 1.25rem 0;
5964
width: auto;
65+
outline: none;
6066
}
6167
}
6268

6369
#right-menu, // deprecated
6470
.hxTopNavIconMenu {
6571
display: flex;
6672
float: right;
67-
height: 3.5rem;
73+
height: 3.8rem;
6874

6975
a {
70-
color: $gray-0;
76+
color: $gray-950;
77+
color: var(--hxTopNav-hxTopNavIconMenu-color, $gray-950);
7178
float: left;
72-
font-size: 0.813rem;
73-
height: 3.5rem;
79+
font-size: 1rem;
80+
height: 3.8rem;
7481
line-height: 1;
7582
text-align: center;
7683
text-decoration: none;
@@ -79,15 +86,13 @@
7986
}
8087

8188
hx-icon {
82-
color: $gray-600;
8389
font-size: 0.938rem;
8490
height: 1.375rem;
8591
margin: 0.688rem 0 0.313rem;
8692
width: 1.25rem;
8793
}
8894

8995
p {
90-
color: $gray-700;
9196
line-height: 1.5;
9297
font-size: 0.875rem;
9398
padding: 0.625rem;
@@ -96,7 +101,8 @@
96101
a:hover {
97102
> hx-icon,
98103
p {
99-
color: $gray-950;
104+
color: $purple-500;
105+
color: var(--hxTopNav-hxTopNavIconMenu-para-hover-color, $purple-500);
100106
}
101107
}
102108

@@ -106,83 +112,94 @@
106112
}
107113

108114
a.selected {
109-
> hx-icon,
110-
p {
111-
color: $gray-950;
112-
}
113-
}
114-
115-
#topnav-menu:hover, // deprecated
116-
#topnavMenuId hx-menuitem:hover {
117-
// deprecated
118-
color: $gray-950 !important;
115+
border-bottom: 2px solid $purple-500;
116+
border-bottom: 2px solid var(--hxTopNav-hxTopNavIconMenu-selected-borderbottom, $purple-500);
119117
}
120118
}
121119

122120
#topnav-menu, // deprecated
123121
#topnav-productMenu, // deprecated
124122
.hxTopNavMenu > hx-disclosure {
125-
height: 3.5rem;
126-
padding: 0.625rem 1.25rem 0;
123+
height: 3.8rem;
124+
outline: none;
125+
padding: 1.3rem 1.25rem 1.12rem 1rem;
127126
width: auto;
128127

129128
> hx-icon {
130-
color: $gray-400;
129+
color: $gray-600;
130+
color: var(--hxTopNav-hxTopNavMenu-hxIcon-color, $gray-600);
131131
font-size: 0.875rem;
132132
margin-left: 0.75rem;
133-
margin-top: 0.75rem;
133+
margin-top: 0;
134134
width: 0.75rem;
135135
}
136136

137137
.hxNavUser {
138-
color: $gray-700;
139-
height: 0.94rem;
138+
color: $gray-950;
139+
color: var(--hxTopNav-hxTopNavMenu-hxNavUser-color, $gray-950);
140+
height: 1rem;
140141
margin-right: 0.44rem;
141-
width: 0.81rem;
142+
margin-top: 0;
143+
outline: none;
144+
width: 1rem;
142145
}
143146

144147
&[disabled] {
145148
@include hxTopNavControl(disabled);
146149
}
147150

148-
&:hover {
149-
color: $gray-950 !important;
151+
&[aria-expanded="true"] {
152+
> hx-icon {
153+
color: $purple-500;
154+
}
155+
156+
> span {
157+
color: $purple-500;
158+
}
150159
}
151160

152161
> span {
153-
color: $gray-700;
162+
color: $gray-950;
163+
color: var(--hxTopNav-hxTopNavMenu-span-color, $gray-950);
154164
font-size: 1rem;
165+
outline: none;
155166
}
156167
}
157168

158169
#topnavMenuId, // deprecated
159170
#topnavProductDropdown, // deprecated
160171
.hxTopNavMenu > hx-menu {
161172
background-color: $gray-0;
173+
background-color: var(--hxTopNav-hxTopNavMenu-hxMenu-bgcolor, $gray-0);
162174
box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
163175
color: $gray-1000;
176+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-color, $gray-1000);
164177
min-width: 10.5rem;
165178
padding: 0;
166179
top: 14.5rem;
167180

168181
hx-menuitem {
169182
color: $gray-950;
183+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxMenuItem-color, $gray-950);
170184
padding: 1rem 1.25rem;
171185
}
172186

173187
hx-menuitem[disabled] {
174188
@include hxTopNavControl(disabled);
175189

176190
color: $gray-600;
191+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxMenuItem-disabled-color, $gray-600);
177192
}
178193

179194
hx-menuitem:not(.hxMenuKey):hover {
180195
color: $purple-500;
196+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxMenuItem-hover-color, $purple-500);
181197
}
182198

183199
.menuKey, // deprecated
184200
.hxMenuKey {
185201
color: $gray-700;
202+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxMenuItem-hxMenuKey-color, $gray-700);
186203
font-size: 0.75rem;
187204
line-height: 1;
188205
padding: 1.25rem 1.25rem 0;
@@ -196,6 +213,8 @@
196213
.menuValue, // deprecated
197214
.hxMenuValue {
198215
color: $gray-950;
216+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxMenuItem-hxMenuValue-color, $gray-950);
217+
font-size: 1rem;
199218
line-height: 1;
200219
padding-bottom: 0.5rem;
201220
padding-top: 0.5rem;
@@ -205,6 +224,7 @@
205224
.divider, // deprecated
206225
.hxDivider {
207226
border-color: $gray-300;
227+
border-color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxDivider-border-color, $gray-300);
208228
height: 1px;
209229
margin: 0.5rem auto;
210230
}
@@ -220,20 +240,27 @@
220240

221241
.hxBtn {
222242
background-color: $blue-500;
243+
background-color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-bgcolor, $blue-500);
223244
border: 1px solid $blue-500;
245+
border: 1px solid var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-border-color, $blue-500);
224246
color: $gray-0;
247+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-color, $gray-0);
225248
margin-left: auto;
226249
margin-right: auto;
227250
width: 100%;
228251

229252
&:hover {
230253
background-color: $blue-700;
254+
background-color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-hover-bgcolor, $blue-700);
231255
color: $gray-0;
256+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-hover-color, $gray-0);
232257
}
233258

234259
&:active {
235260
background-color: $blue-900;
261+
background-color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-active-bgcolor, $blue-900);
236262
color: $gray-0;
263+
color: var(--hxTopNav-hxTopNavMenu-hxMenu-hxBtn-active-color, $gray-0);
237264
}
238265
}
239266
}

‎src/scss/components/topnav/mixins/_topNavControl.scss‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,27 @@
22
// ===== Mixins for top nav states =====
33
//
44

5-
// ========== PRISTINE ==========
6-
@mixin __topNavControl($pseudo-state: null) {
7-
@if $pseudo-state == focus {
8-
box-shadow: $focus-glow;
9-
10-
&::-ms-check {
11-
border-color: $cyan-700;
12-
}
13-
} @else if $pseudo-state == hover {
14-
background-color: $gray-900;
15-
color: $gray-0;
16-
} @else {
17-
color: $gray-500;
18-
19-
&::-ms-check {
20-
background-color: $gray-0;
21-
border-color: currentColor;
22-
border-style: solid;
23-
border-width: 0.063rem;
24-
color: inherit;
25-
}
26-
}
27-
}
28-
295
// ========== DISABLED ==========
306
@mixin __topNavControl--disabled($pseudo-state: null) {
317
cursor: not-allowed;
328

33-
hx-icon, p {
9+
hx-icon,
10+
p {
3411
color: $gray-600;
12+
color: var(--hxTopNav-hxTopNavControl-disabled-para-color, $gray-600);
3513
}
3614
@if $pseudo-state == hover {
3715
background-color: $gray-950;
16+
background-color: var(--hxTopNav-hxTopNavControl-disabled-hover-bgcolor, $gray-950);
3817

3918
&::-ms-check {
4019
background-color: $gray-100;
20+
background-color: var(--hxTopNav-hxTopNavControl-disabled-hover-ie-bgcolor, $gray-100);
4121
}
4222
}
4323
}
4424

45-
@mixin hxTopNavControl(
46-
$state: null,
47-
$pseudo-state: null,
48-
) {
25+
@mixin hxTopNavControl($state: null, $pseudo-state: null) {
4926
@if $state == disabled {
5027
@include __topNavControl--disabled($pseudo-state);
5128
} @else {

0 commit comments

Comments
 (0)