Skip to content

Commit 2a01972

Browse files
sghowerisghoweri
authored
Merge branch 'dev' into fix-1019
2 parents a46718b + 9c4c821 commit 2a01972

3 files changed

Lines changed: 68 additions & 45 deletions

File tree

‎packages/live-server/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -367,9 +367,17 @@ LiveServer.start = function(options) {
367367
// Launch browser
368368
if (openPath !== null)
369369
if (typeof openPath === 'object') {
370-
openPath.forEach(p => open(openURL + p, { app: browser }));
370+
openPath.forEach(p =>
371+
open(openURL + p, { app: browser }).catch(() =>
372+
console.log(
373+
'Warning: Could not open pattern lab in default browser.'
374+
)
375+
)
376+
);
371377
} else {
372-
open(openURL + openPath, { app: browser });
378+
open(openURL + openPath, { app: browser }).catch(() =>
379+
console.log('Warning: Could not open pattern lab in default browser.')
380+
);
373381
}
374382
});
375383

‎packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
*/
99
.pl-c-body--theme-sidebar {
1010
/**
11-
* Header
12-
* 1) Set width to sidebar width defined above
13-
* 2) Make header 100% of the viewport height
14-
* 3) Stack header items on top of each other
15-
* 4) void bottom border for light theme
16-
*/
11+
* Header
12+
* 1) Set width to sidebar width defined above
13+
* 2) Make header 100% of the viewport height
14+
* 3) Stack header items on top of each other
15+
* 4) void bottom border for light theme
16+
*/
1717
.pl-c-header {
1818
width: $pl-sidebar-width; /* 1 */
1919
height: 100vh; /* 2 */
@@ -25,53 +25,53 @@
2525
}
2626

2727
/**
28-
* Nav sub sub list
29-
*/
28+
* Nav sub sub list
29+
*/
3030
.pl-c-nav {
3131
flex-grow: 1;
3232
flex-direction: column;
3333
flex-flow: column-reverse;
3434
}
3535

3636
/**
37-
* Nav list
38-
* 1) Stack main categories on top of each other
39-
* 2) Put typeahead search above nav list
40-
*/
37+
* Nav list
38+
* 1) Stack main categories on top of each other
39+
* 2) Put typeahead search above nav list
40+
*/
4141
.pl-c-nav__list {
4242
flex-direction: column; /* 1 */
4343
order: 2; /* 2 */
4444
}
4545

4646
/**
47-
* Nav sublist
48-
*/
47+
* Nav sublist
48+
*/
4949
.pl-c-nav__sublist {
5050
position: relative;
5151
border-radius: 0;
5252
}
5353

5454
/**
55-
* Nav sublist inside the light theme
56-
*/
55+
* Nav sublist inside the light theme
56+
*/
5757
&.pl-c-body--theme-light {
5858
.pl-c-nav__subsublist {
5959
border-left-color: $pl-color-gray-07;
6060
}
6161
}
6262

6363
/**
64-
* All Nav links inside of subnav dropdown
65-
*/
64+
* All Nav links inside of subnav dropdown
65+
*/
6666
.pl-c-nav__sublist .pl-c-nav__link {
6767
border-left: 0;
6868
border-right: 0;
6969
}
7070

7171
/**
72-
* Last sublist item
73-
* 1) Undo bottom border radius when in sidebar
74-
*/
72+
* Last sublist item
73+
* 1) Undo bottom border radius when in sidebar
74+
*/
7575
.pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link {
7676
@media all and (min-width: $pl-bp-med) {
7777
border-bottom-left-radius: 0; /* 1 */
@@ -81,26 +81,26 @@
8181
}
8282

8383
/**
84-
* Nav controls
85-
* 1) Push off of navigation in flex container so
86-
* they appear at the bottom
87-
*/
84+
* Nav controls
85+
* 1) Push off of navigation in flex container so
86+
* they appear at the bottom
87+
*/
8888
.pl-c-controls {
8989
display: block; // Display flex + flex direction column gives a similar result, but this fixes a bunch of rendering quirks in IE 11
9090
justify-self: flex-end;
9191
margin-left: 0;
9292
}
9393

9494
/**
95-
* Tools toggle button
96-
*/
95+
* Tools toggle button
96+
*/
9797
.pl-c-tools__toggle {
9898
display: none;
9999
}
100100

101101
/**
102-
* Tools list
103-
*/
102+
* Tools list
103+
*/
104104
.pl-c-tools__list {
105105
max-height: none;
106106
overflow: visible;
@@ -121,5 +121,10 @@
121121
right: 0; /* 1 */
122122
width: auto;
123123
}
124+
125+
.pl-is-active + .pl-c-nav__subsublist,
126+
.pl-is-active + .pl-js-acc-panel {
127+
max-height: none;
128+
}
124129
}
125130
}

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ pl-nav {
7575
transform: translateX(-100%);
7676
transition: all 0.3s ease;
7777
opacity: 0;
78-
box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
78+
box-shadow: 0 3px 6px rgba(21, 22, 25, 0.16),
79+
0 3px 6px rgba(21, 22, 25, 0.23);
7980
visibility: visible;
8081

8182
&.pl-is-active {
@@ -276,7 +277,7 @@ pl-nav {
276277
padding-left: 1.45rem;
277278
padding-right: 0.75rem;
278279
flex-grow: 1;
279-
font-size: .8rem;
280+
font-size: 0.8rem;
280281

281282
@media all and (min-width: $pl-bp-med) {
282283
.pl-c-body--theme-horizontal & {
@@ -303,7 +304,9 @@ pl-nav {
303304
font-size: 1.3rem; // temp solution till new pl-button used in Navigation
304305
}
305306

306-
.pl-c-nav__link--overview-wrapper.pl-is-active > .pl-c-nav__link--section-dropdown > .pl-c-nav__link-icon,
307+
.pl-c-nav__link--overview-wrapper.pl-is-active
308+
> .pl-c-nav__link--section-dropdown
309+
> .pl-c-nav__link-icon,
307310
.pl-c-nav__link--title.pl-is-active > .pl-c-nav__link-icon,
308311
.pl-c-nav__link--section-dropdown.pl-is-active > .pl-c-nav__link-icon,
309312
.pl-c-nav__link--dropdown.pl-is-active > .pl-c-nav__link-icon {
@@ -327,8 +330,8 @@ pl-nav {
327330
border-radius: $pl-border-radius-med;
328331
border-style: solid;
329332
border-width: 1px;
330-
box-shadow: 0 2px 5px rgba(0,0,0,.1);
331-
transition: all .2s ease;
333+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
334+
transition: all 0.2s ease;
332335
transform: translateY(-12px);
333336
z-index: 1;
334337
transition: all $pl-animate-quick ease-out;
@@ -340,11 +343,11 @@ pl-nav {
340343
}
341344

342345
.pl-c-body--theme-light & {
343-
border-color: rgba($pl-color-black, .2);
346+
border-color: rgba($pl-color-black, 0.2);
344347
}
345348

346349
.pl-c-body--theme-dark & {
347-
border-color: rgba($pl-color-white, .2);
350+
border-color: rgba($pl-color-white, 0.2);
348351
}
349352
}
350353
}
@@ -370,7 +373,7 @@ pl-nav {
370373
}
371374

372375
.pl-c-nav__link--sublink {
373-
padding-left: 1.5rem + .75rem;
376+
padding-left: 1.5rem + 0.75rem;
374377
}
375378

376379
@media all and (max-width: $pl-bp-med - 1) {
@@ -379,7 +382,7 @@ pl-nav {
379382
}
380383

381384
.pl-c-nav__link--sublink {
382-
padding-left: 1.5rem + .75rem;
385+
padding-left: 1.5rem + 0.75rem;
383386
}
384387
}
385388
}
@@ -404,7 +407,7 @@ pl-nav {
404407

405408
.pl-c-nav__sublist--dropdown.pl-is-active {
406409
@media all and (min-width: $pl-bp-med) {
407-
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
410+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
408411
border-left: 1px solid $pl-color-gray-87;
409412
border-right: 1px solid $pl-color-gray-87;
410413

@@ -421,7 +424,6 @@ pl-nav {
421424
}
422425
}
423426

424-
425427
.pl-c-nav__link--overview.pl-is-active {
426428
&:hover:before {
427429
opacity: 0.1;
@@ -452,8 +454,8 @@ pl-nav {
452454
opacity: 0;
453455
top: 0;
454456
bottom: 0;
455-
border-top: 1px solid rgba(0, 0, 0, .1);
456-
border-bottom: 1px solid rgba(0, 0, 0, .1);
457+
border-top: 1px solid rgba(0, 0, 0, 0.1);
458+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
457459
pointer-events: none;
458460
}
459461

@@ -470,7 +472,7 @@ pl-nav {
470472
}
471473

472474
&:after {
473-
border-bottom: 1px solid rgba(255, 255, 255, .1);
475+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
474476
}
475477
}
476478
}
@@ -594,3 +596,11 @@ pl-nav {
594596
max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */
595597
}
596598
}
599+
600+
.pl-c-body--theme-horizontal {
601+
@media all and (min-width: $pl-bp-med) {
602+
.pl-is-active + .pl-c-nav__subsublist {
603+
max-height: none;
604+
}
605+
}
606+
}

0 commit comments

Comments
 (0)