FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: uikit fixes and minor CSS updates intended for the v5.3.0 release · pattern-lab/patternlab-node@26c4ced · GitHub

This repository was archived by the owner on May 13, 2026. It is now read-only.
/ patternlab-node Public archive

Commit 26c4ced

Browse files
sghoweri
committed
fix: uikit fixes and minor CSS updates intended for the v5.3.0 release
1 parent 017b855 commit 26c4ced

14 files changed

Lines changed: 75 additions & 142 deletions

File tree

‎packages/uikit-workshop/src/sass/pattern-lab.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
/*------------------------------------*\
4444
#COMPONENTS
4545
\*------------------------------------*/
46-
4746
@import '../scripts/components/pl-nav/pl-nav.scss';
4847
@import '../scripts/components/pl-search/pl-search.scss';
4948
@import '../scripts/components/pl-tooltip/pl-tooltip.scss';
@@ -112,6 +111,10 @@
112111
}
113112
}
114113

114+
.pl-c-body {
115+
overflow: hidden;
116+
}
117+
115118
.pl-c-main {
116119
overflow: hidden;
117120
max-width: 100vw;

‎packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@
1212
margin-bottom: 0.5rem;
1313
display: flex;
1414
font-size: $pl-font-size-sm;
15-
color: currentColor;
15+
color: inherit;
1616
text-transform: capitalize;
1717
}
1818

1919
/**
2020
* Breadcrumb Item
2121
*/
2222
.pl-c-breadcrumb__item {
23+
color: inherit;
2324
&:after {
2425
content: '\25b6';
2526
opacity: 0.4;

‎packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@
1919
.pl-c-pattern & {
2020
max-height: 30rem;
2121
overflow: scroll;
22-
display: flex;
22+
display: block;
2323
-webkit-overflow-scrolling: touch;
2424

2525
@media all and (min-width: $pl-bp-large) {
2626
max-height: none;
2727
height: 18rem;
28+
display: flex;
2829
flex-direction: row;
2930
overflow: visible;
3031
}
@@ -52,16 +53,19 @@
5253
* Right side contains pattern code
5354
*/
5455
.pl-c-pattern-info__panel {
55-
padding: 1rem;
56-
width: auto;
57-
flex-shrink: 0;
56+
padding: .5rem;
57+
flex-shrink: 1;
5858
display: flex;
5959
flex-direction: column;
6060

61+
pl-drawer & {
62+
padding: 1rem;
63+
}
64+
6165
@media all and (min-width: $pl-bp-large) {
6266
flex-basis: 50%;
6367
flex-grow: 1;
64-
overflow: auto;
68+
padding: 1.5rem;
6569
}
6670
}
6771

@@ -77,7 +81,7 @@
7781
}
7882

7983
@media all and (min-width: $pl-bp-xl) {
80-
width: 55%;
84+
min-width: 50%;
8185
}
8286
}
8387

@@ -92,11 +96,14 @@
9296
.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code,
9397
.pl-c-pattern-info__panel--code:first-child {
9498
flex-grow: 1;
95-
flex-shrink: 1;
99+
flex-shrink: 0; // so the code panel doesn't get chopped off accidently
100+
min-width: 50%;
96101
}
97102

98-
.pl-c-pattern-info__panel--code:first-child {
99-
padding-top: 0;
103+
.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code {
104+
@media all and (max-width: $pl-bp-large) {
105+
padding-top: 0;
106+
}
100107
}
101108

102109
/**
@@ -111,7 +118,7 @@
111118
*/
112119
.pl-c-pattern-info__title {
113120
font-size: 1.4rem !important;
114-
font-weight: normal;
121+
font-weight: bold;
115122
margin-top: 0;
116123
margin-bottom: 0;
117124
color: inherit;

‎packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js‎

Lines changed: 8 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,6 @@ class Nav extends BaseComponent {
187187
e.target.closest('pl-toggle-layout') === null
188188
) {
189189
if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
190-
console.log('handlePageClick + cleaning up...');
191190
this.cleanupActiveNav(true);
192191
}
193192
}
@@ -326,24 +325,12 @@ class Nav extends BaseComponent {
326325
activeLink.classList.add('pl-is-active');
327326
this.previousActiveLinks.push(activeLink);
328327

329-
// handle overview links vs nested links
330-
if (activeLink.classList.contains('pl-js-link-overview')) {
331-
const childDropdownTrigger = activeLink.nextSibling;
332-
const childDropdown = activeLink.parentNode.nextSibling;
333-
334-
if (childDropdown && shouldAutoOpenNav) {
335-
if (childDropdown.tagName) {
336-
childDropdown.classList.add('pl-is-active');
337-
this.previousActiveLinks.push(childDropdown);
338-
}
339-
}
340-
341-
if (childDropdownTrigger && shouldAutoOpenNav) {
342-
if (childDropdownTrigger.tagName) {
343-
childDropdownTrigger.classList.add('pl-is-active');
344-
this.previousActiveLinks.push(childDropdownTrigger);
345-
}
346-
}
328+
if (
329+
activeLink.parentNode.classList.contains(
330+
'pl-c-nav__link--overview-wrapper'
331+
)
332+
) {
333+
activeLink.parentNode.classList.add('pl-is-active');
347334
}
348335

349336
const parentDropdown = activeLink.closest('.pl-js-acc-panel');
@@ -372,31 +359,6 @@ class Nav extends BaseComponent {
372359
const grandparentDropdownTrigger =
373360
grandparentDropdown.previousSibling;
374361

375-
if (parentDropdown && shouldAutoOpenNav) {
376-
parentDropdown.classList.add('pl-is-active');
377-
this.previousActiveLinks.push(parentDropdown);
378-
}
379-
380-
// don't auto-open
381-
if (parentDropdownTrigger) {
382-
if (
383-
shouldAutoOpenNav === true ||
384-
parentDropdownTrigger.classList.contains(
385-
'pl-c-nav__link--title'
386-
) === false
387-
) {
388-
parentDropdownTrigger.classList.add('pl-is-active');
389-
this.previousActiveLinks.push(parentDropdownTrigger);
390-
}
391-
}
392-
393-
if (grandparentDropdown && shouldAutoOpenNav) {
394-
if (shouldAutoOpenNav) {
395-
grandparentDropdown.classList.add('pl-is-active');
396-
}
397-
this.previousActiveLinks.push(grandparentDropdown);
398-
}
399-
400362
if (grandparentDropdownTrigger && shouldAutoOpenNav) {
401363
if (shouldAutoOpenNav) {
402364
grandparentDropdownTrigger.classList.add('pl-is-active');
@@ -425,72 +387,12 @@ class Nav extends BaseComponent {
425387

426388
toggleSpecialNavPanel(e) {
427389
const target = e.target;
428-
const panel = target.parentNode.nextSibling;
429-
const subnav = panel.parentNode.parentNode.classList.contains(
430-
'pl-js-acc-panel'
431-
);
432-
433-
if (!subnav) {
434-
const navTriggers = document.querySelectorAll(
435-
`.pl-js-acc-handle.pl-is-active`
436-
);
437-
const navPanels = document.querySelectorAll(
438-
`.pl-js-acc-panel.pl-is-active`
439-
);
440-
441-
navTriggers.forEach(navTrigger => {
442-
if (navTrigger !== target) {
443-
navTrigger.classList.remove('pl-is-active');
444-
}
445-
});
446-
447-
navPanels.forEach(navPanel => {
448-
if (navPanel !== target) {
449-
navPanel.classList.remove('pl-is-active');
450-
}
451-
});
452-
}
453-
454-
if (target.classList.contains('pl-is-active')) {
455-
target.classList.remove('pl-is-active');
456-
panel.classList.remove('pl-is-active');
457-
} else {
458-
target.classList.add('pl-is-active');
459-
panel.classList.add('pl-is-active');
460-
}
390+
target.parentNode.classList.toggle('pl-is-active');
461391
}
462392

463393
toggleNavPanel(e) {
464394
const target = e.target;
465-
const panel = target.nextSibling;
466-
const subnav = target.parentNode.parentNode.classList.contains(
467-
'pl-js-acc-panel'
468-
);
469-
470-
if (!subnav) {
471-
const navTriggers = document.querySelectorAll('.pl-js-acc-handle');
472-
const navPanels = document.querySelectorAll('.pl-js-acc-panel');
473-
474-
navTriggers.forEach(navTrigger => {
475-
if (navTrigger !== target) {
476-
navTrigger.classList.remove('pl-is-active');
477-
}
478-
});
479-
480-
navPanels.forEach(navPanel => {
481-
if (navPanel !== target) {
482-
navPanel.classList.remove('pl-is-active');
483-
}
484-
});
485-
}
486-
487-
if (target.classList.contains('pl-is-active')) {
488-
target.classList.remove('pl-is-active');
489-
panel.classList.remove('pl-is-active');
490-
} else {
491-
target.classList.add('pl-is-active');
492-
panel.classList.add('pl-is-active');
493-
}
395+
target.classList.toggle('pl-is-active');
494396
}
495397

496398
rendered() {

‎packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ pl-nav {
312312
.pl-c-body--theme-sidebar & {
313313
border-width: 0;
314314
transform: none;
315+
box-shadow: none;
315316
}
316317

317318
.pl-c-body--theme-light & {
@@ -556,6 +557,7 @@ pl-nav {
556557
.pl-is-active + .pl-js-acc-panel {
557558
visibility: visible;
558559
max-height: none;
560+
transform: translateY(0);
559561

560562
.pl-c-body--theme-horizontal & {
561563
overflow: auto;

‎packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ pl-button {
1212
@include buttonStyles;
1313
}
1414

15+
.pl-c-button__text {
16+
text-align: left;
17+
}
18+
1519
.pl-c-button--medium {
1620
padding: 0.65rem 1rem;
1721

‎packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ pl-drawer {
6262
will-change: height;
6363
overflow: hidden;
6464
margin-top: calc(#{$pl-drawer-resizer-height * -1} + 1px);
65+
padding-top: $pl-drawer-resizer-height;
6566
}
6667

6768
.pl-c-drawer__wrapper > * {

‎packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ pl-header {
3131
.pl-c-body--theme-sidebar & {
3232
position: fixed;
3333
position: sticky;
34+
overflow: auto;
3435
/**
3536
* Header
3637
* 1) Set width to sidebar width defined above

‎packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ pl-logo {
4949

5050
.pl-c-logo__img {
5151
display: block;
52-
height: auto;
52+
height: 100%; // fix to address scaling issue in ie 11 on windows 7
5353
max-width: 100%;
5454
max-height: 23px;
5555

‎packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
@import '../../../sass/scss/core.scss';
22

33
pl-toggle-layout {
4-
display: none;
4+
display: flex;
55
align-self: center;
66
justify-content: center;
77
align-items: center;
88
z-index: 10;
99
width: 100%;
1010
cursor: pointer;
11-
12-
@media all and (min-width: $pl-bp-med) {
13-
display: flex;
14-
}
1511
}
1612

1713
.pl-c-toggle-layout,

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL