Skip to content

Commit 304ba26

Browse files
castastrophegithub-actions[bot]starryeyez024
authored
fix: Navigation styles for mobile accordion (#1353)
* fix: Fix navigation styles for mobile accordion * fix: Update changelog * fix: Add a mobile snapshot * fix: Fix link styles in IE11 on mobile * fix: Remove commented out code * fix: Update comments * fix: Update baseline images * fix: Limit height of navigation in IE11 * fix: Update baselines * fix: Swap fetch to var in the light dom heading styles * fix: Update accordion * fix: Update light dom styles re feedback * fix: Add wait to codeblock and primary detail * move to pixel values for IE11 nav links Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kendall Totten <[email protected]>
1 parent cd174e3 commit 304ba26

File tree

13 files changed

+212
-132
lines changed

13 files changed

+212
-132
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## 1.2.0 ( 2021-02-11 )
1+
## 1.2.0 ( 2021-02-12 )
22

33
### Features
44
- [89ddfd](https://github.com/patternfly/patternfly-elements/commit/89ddfdc00382e46946309f02719a5faa1190248f) feat: Add Sassdoc and update build tasks to include link
@@ -12,6 +12,7 @@
1212
- [03899cc](https://github.com/patternfly/patternfly-elements/commit/03899ccf7a4421186a7316926955b3a3bd1068f7) fix: Typography: mixins & extends (#1303)
1313
- [5d661cb](https://github.com/patternfly/patternfly-elements/commit/5d661cb7e85921ed72f324a0b635873c23bc69e9) fix: pfe-clipboard docs; add font-size
1414
- [30c77d0](https://github.com/patternfly/patternfly-elements/commit/30c77d0225d235b68367097e8e462621266cab7b) fix: Adjust font-weight on pfe text modifier classes & define custom font-face for Red Hat Text font
15+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Navigation mobile styles
1516

1617
## 1.1.1 ( 2021-01-18 )
1718

‎elements/pfe-navigation/src/_shared-assets.scss‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
@import "../../pfe-sass/pfe-sass";
22

3-
$overlay--BackgroundColor--fallback: rgba(37, 37, 37, 0.5);
4-
5-
$trigger--FontSize--fallback: #{pfe-var(FontSize--md)};
6-
$trigger--FontWeight--fallback: #{pfe-var(font-weight--light)};
7-
$trigger--Color--fallback: #{pfe-var(text--on-dark)};
8-
93
$LOCAL: navigation;
104
$LOCAL-VARIABLES: (
115
// Supplemental breakpoints,
126
// Usage: @media screen and (min-width: pfe-breakpoint(lg-mobile, $map: false)) {
13-
147
// grid-breakpoint--xs: 0,
158
sm-mobile: 500px,
169
// grid-breakpoint--sm: 576px,
@@ -20,44 +13,3 @@ $LOCAL-VARIABLES: (
2013
sm-desktop: 1024px,
2114
// grid-breakpoint--xl: 1200px,
2215
);
23-
24-
// turn on automatic fallbacks for broadcasted variables
25-
26-
// -- Typography
27-
%link-styles {
28-
color: pfe-broadcasted(link);
29-
text-decoration: pfe-broadcasted(link-decoration);
30-
&:visited {
31-
color: pfe-broadcasted(link--visited);
32-
}
33-
&:hover {
34-
color: pfe-broadcasted(link--hover);
35-
text-decoration: pfe-broadcasted(link-decoration--hover);
36-
}
37-
&:focus {
38-
outline-offset: 1px;
39-
outline-style: dotted;
40-
outline-width: 1px;
41-
outline-color: pfe-broadcasted(link--focus);
42-
color: pfe-broadcasted(link--focus);
43-
}
44-
}
45-
46-
%trigger {
47-
font-family: pfe-var(font-family);
48-
font-size: pfe-local(FontSize, $region: trigger, $fallback: $trigger--FontSize--fallback) !important;
49-
font-weight: pfe-local(FontWeight, $fallback: $trigger--FontWeight--fallback);
50-
color: pfe-local(Color, $fallback: $trigger--Color--fallback);
51-
z-index: 2;
52-
line-height: 1.1;
53-
margin: 0 !important;
54-
max-width: 100%; // added
55-
text-align: center;
56-
57-
@media screen and (min-width: pfe-breakpoint(xs) ) {
58-
max-width: 100%;
59-
}
60-
@media screen and (min-width: pfe-breakpoint(xl) ) {
61-
max-width: 190px;
62-
}
63-
}

‎elements/pfe-navigation/src/pfe-navigation--lightdom.scss‎

Lines changed: 119 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88

99
// IE11 styles
1010
@include browser-query(ie11) {
11+
pfe-navigation {
12+
font-size: pfe-fetch(FontSize);
13+
}
14+
1115
pfe-navigation-item {
1216
[slot="trigger"] {
1317
width: 100%;
@@ -19,17 +23,23 @@
1923
color: pfe-var(text--on-dark);
2024
}
2125
}
26+
27+
[slot="tray"] {
28+
width: 100%;
29+
min-height: 60px;
30+
flex-direction: column;
31+
}
32+
2233
// Accordion trigger styles when expanded.
2334
&.expanded {
2435
@media screen and (min-width: pfe-breakpoint(lg)) {
2536
background-color: pfe-var(surface--lightest);
2637
border-top-color: pfe-var(ui-accent);
2738
}
28-
[slot="trigger"] {
29-
a {
30-
color: pfe-var(text);
31-
}
39+
[slot="trigger"] a {
40+
color: pfe-var(text);
3241
}
42+
3343
}
3444
}
3545

@@ -43,43 +53,59 @@
4353
max-width: 1140px;
4454
}
4555
}
46-
.pfe-navigation-item__tray--container {
47-
padding: 1em 0;
48-
}
49-
50-
[slot="tray"] {
51-
width: 100%;
52-
min-height: 60px;
53-
flex-direction: column;
54-
}
5556

56-
@media screen and (min-width: pfe-breakpoint(lg)) {
57-
.pfe-navigation-item__tray--container {
58-
margin: 0 auto;
57+
.pfe-navigation-item__tray {
58+
&--container {
59+
padding: 1em 0;
60+
@media screen and (min-width: pfe-breakpoint(lg)) {
61+
margin: 0 auto;
62+
}
5963
}
60-
}
6164

62-
[is_nested][parent_hidden] .pfe-navigation-item__tray {
63-
max-height: none;
64-
overflow: visible;
65+
[is_nested][parent_hidden] & {
66+
max-height: none;
67+
overflow: visible;
68+
}
6569
}
6670

6771
@media screen and (max-width: 1023px) {
72+
pfe-navigation-main,
73+
.pfe-navigation__main > :not([hidden]) {
74+
height: auto;
75+
}
76+
6877
.pfe-navigation__main {
6978
display: block !important;
7079
}
7180

81+
[class*="pfe-navigation-item-"] .pfe-navigation-item__trigger.pfe-navigation-item {
82+
background-color: transparent !important;
83+
}
84+
85+
[class*="pfe-navigation-item-"] .pfe-navigation-item__trigger.pfe-navigation-item[aria-expanded=true] {
86+
background-color: white !important;
87+
}
88+
7289
.pfe-navigation-item__tray {
7390
max-height: none !important;
7491
}
92+
93+
.pfe-navigation-item-2 .pfe-navigation-item__trigger.pfe-navigation-item:hover,
94+
.pfe-navigation-item-2 .pfe-navigation-item__trigger.pfe-navigation-item:focus,
7595
.pfe-navigation-item-2 .pfe-navigation-item__trigger.pfe-navigation-item[aria-expanded=true] {
76-
border-left: 4px solid #06c;
77-
border-right: 1px solid #d2d2d2;
96+
border-left-width: 4px;
97+
border-top-style: solid;
98+
border-left-color: pfe-var(ui-accent);
99+
border-right-width: 1px;
100+
border-right-style: solid;
101+
border-right-color: #d2d2d2;
78102
}
79103

80104
[class*="pfe-navigation-item-"] .pfe-navigation-item__trigger.pfe-navigation-item[aria-expanded=true] {
81105
background-color: white;
82-
border-top: 3px solid #ee0000;
106+
border-top-width: 3px;
107+
border-top-style: solid;
108+
border-top-color: pfe-var(ui-accent);
83109
}
84110

85111
[pfe-icon=web-mobile-menu]:not([show_links]) {
@@ -89,10 +115,13 @@
89115
.pfe-navigation-item__tray.pfe-navigation-item .pfe-navigation-item__tray.pfe-navigation-item {
90116
max-height: 500px !important;
91117
overflow-y: scroll;
118+
background-color: white;
92119
}
93120

94121
.pfe-navigation-item__tray.pfe-navigation-item .pfe-navigation-item__trigger.pfe-navigation-item:not([aria-expanded=true]) {
95-
border-bottom: 1px solid pfe-var(surface--border);
122+
border-bottom-width: 1px;
123+
border-bottom-style: solid;
124+
border-bottom-color: pfe-var(surface--border);
96125
}
97126
}
98127

@@ -109,30 +138,39 @@
109138
}
110139
}
111140

112-
.pfe-navigation-1 .pfe-navigation__wrapper.pfe-navigation {
113-
min-height: 0;
141+
.pfe-navigation-1 {
142+
.pfe-navigation__wrapper.pfe-navigation {
143+
min-height: 0;
144+
}
145+
146+
.pfe-navigation__logo.pfe-navigation {
147+
height: 80px;
148+
}
149+
}
150+
151+
pfe-navigation [slot="logo"] {
152+
max-width: 100%;
114153
}
115154

116155
.pfe-navigation-item__trigger {
117-
&.pfe-navigation-item {
118-
&:hover {
119-
cursor: pointer;
120-
border-top: pfe-var(surface--border-width--heavy) solid pfe-var(ui-accent);
121-
}
156+
&.pfe-navigation-item:hover {
157+
cursor: pointer;
158+
border-top: pfe-var(surface--border-width--heavy) solid pfe-var(ui-accent);
122159
}
123160

124161
.pfe-navigation__utility--mobile > *:not(:last-child) {
125162
margin-bottom: pfe-var(container-spacer);
126163
}
127164

128-
.pfe-navigation-item__tray--container {
129-
padding-top: pfe-var(container-spacer);
130-
}
131-
165+
pfe-icon,
132166
> *.pfe-navigation-item__trigger--icon:first-child {
133167
display: none;
134168
}
135169

170+
.pfe-navigation-item__tray--container {
171+
padding-top: pfe-var(container-spacer);
172+
}
173+
136174
> *:not(.pfe-navigation-item__trigger--icon) {
137175
color: pfe-local($cssvar: Color, $fallback: #{map-get($pfe-colors, text--on-dark)});
138176

@@ -146,22 +184,20 @@
146184
color: inherit;
147185
}
148186
}
149-
pfe-icon {
150-
display: none;
151-
}
152187
}
188+
153189
.pfe-navigation--column-span-2 {
154190
-ms-grid-column-span: 1 !important;
155191
}
192+
156193
:not([pfe-icon=web-mobile-menu]):not([is_nested]).pfe-navigation-item-1 .pfe-navigation-item__tray.pfe-navigation-item {
157194
color: pfe-var(ui-base) !important;
158195
}
196+
159197
[pfe-icon=web-mobile-menu]:not([show_links]).pfe-navigation-item-3 .pfe-navigation__main .pfe-navigation-item__tray.pfe-navigation-item {
160198
top: 0 !important;
161199
}
162-
pfe-navigation [slot="logo"] {
163-
max-width: 100%;
164-
}
200+
165201
.pfe-navigation--footer .pfe-navigation--column {
166202
@media (min-width: pfe-breakpoint(md)) {
167203
display: flex;
@@ -280,14 +316,22 @@
280316
}
281317
}
282318

283-
pfe-navigation [slot="logo"] {
284-
margin: 0;
285-
> a {
286-
display: flex;
287-
align-items: center;
319+
pfe-navigation {
320+
[slot="logo"] {
321+
margin: 0;
322+
> a {
323+
display: flex;
324+
align-items: center;
325+
326+
> * {
327+
max-height: 32px;
328+
}
329+
}
330+
}
288331

289-
> * {
290-
max-height: 32px;
332+
[slot="mobile-search"] {
333+
input[type="text"] {
334+
padding: 5px 10px;
291335
}
292336
}
293337
}
@@ -302,6 +346,10 @@ pfe-navigation-item {
302346
// Utility links.
303347
pfe-icon + [slot="trigger"] > a {
304348
font-size: pfe-fetch(FontSize--xs);
349+
350+
@include browser-query(ie11) {
351+
font-size: 16px;
352+
}
305353
}
306354
[slot="trigger"] > a {
307355
outline: none;
@@ -340,12 +388,6 @@ pfe-navigation-item {
340388
}
341389
}
342390

343-
[slot="mobile-search"] {
344-
input[type="text"] {
345-
padding: 5px 10px;
346-
}
347-
}
348-
349391
.pfe-navigation {
350392
&-grid {
351393
@media (min-width: pfe-breakpoint(sm)) {
@@ -486,7 +528,7 @@ pfe-navigation-item {
486528
}
487529
}
488530

489-
pfe-navigation-item .pfe-link-list {
531+
.pfe-link-list {
490532
-webkit-column-break-inside: avoid;
491533
page-break-inside: avoid;
492534
break-inside: avoid;
@@ -498,8 +540,8 @@ pfe-navigation-item .pfe-link-list {
498540
&--header {
499541
font-family: pfe-var(font-family);
500542
margin: 0 0 .75em 0;
501-
font-size: pfe-fetch(FontSize--md);
502-
font-weight: pfe-fetch(font-weight--light);
543+
font-size: pfe-var(FontSize--md);
544+
font-weight: pfe-var(font-weight--light);
503545
line-height: 1.75;
504546
color: pfe-var(text);
505547

@@ -535,8 +577,23 @@ pfe-navigation-item .pfe-link-list {
535577
}
536578

537579
&-item > a {
538-
@extend %link-styles;
539580
font-size: 16px;
581+
color: pfe-broadcasted(link);
582+
text-decoration: pfe-broadcasted(link-decoration);
583+
&:visited {
584+
color: pfe-broadcasted(link--visited);
585+
}
586+
&:hover {
587+
color: pfe-broadcasted(link--hover);
588+
text-decoration: pfe-broadcasted(link-decoration--hover);
589+
}
590+
&:focus {
591+
outline-offset: 1px;
592+
outline-style: dotted;
593+
outline-width: 1px;
594+
outline-color: pfe-broadcasted(link--focus);
595+
color: pfe-broadcasted(link--focus);
596+
}
540597
}
541598
}
542599
}
@@ -555,7 +612,10 @@ pfe-navigation-item.expanded pfe-navigation-item[parent_hidden]:not(.expanded) [
555612

556613
pfe-navigation-main [slot="trigger"],
557614
pfe-navigation-main [slot="trigger"] > a {
558-
font-size: $trigger--FontSize--fallback;
615+
font-size: pfe-var(FontSize--md);
616+
@include browser-query(ie11) {
617+
font-size: 16px;
618+
}
559619

560620
@media screen and (min-width: pfe-breakpoint("sm-desktop", $map: false) )
561621
and (max-width: pfe-breakpoint("xl", $max: true) ) {

0 commit comments

Comments
 (0)