Skip to content

Commit 81f7ebd

Browse files
bolt-botbolt-bot
committed
refactor: reorganize remaining UI components + split apart the header controls into separate smaller components; break out up theming specific CSS into the specific components being styled
1 parent 97ecdad commit 81f7ebd

14 files changed

Lines changed: 137 additions & 99 deletions

File tree

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,28 +44,29 @@
4444
#COMPONENTS
4545
\*------------------------------------*/
4646

47+
@import '../scripts/components/pl-controls/pl-controls.scss';
4748
@import '../scripts/components/pl-drawer/pl-drawer.scss';
49+
@import '../scripts/components/pl-header/pl-header.scss';
4850
@import '../scripts/components/pl-layout/pl-layout.scss';
51+
@import '../scripts/components/pl-nav/pl-nav.scss';
4952
@import '../scripts/components/pl-search/pl-search.scss';
5053
@import '../scripts/components/pl-toggle-info/pl-toggle-info.scss';
5154
@import '../scripts/components/pl-toggle-layout/pl-toggle-layout.scss';
5255
@import '../scripts/components/pl-toggle-theme/pl-toggle-theme.scss';
56+
@import '../scripts/components/pl-tools-menu/pl-tools-menu.scss';
57+
@import '../scripts/components/pl-viewport/pl-viewport.scss';
58+
@import '../scripts/components/pl-viewport-size/pl-viewport-size.scss';
59+
@import '../scripts/components/pl-viewport-size-list/pl-viewport-size-list.scss';
5360
@import 'scss/04-components/annotations';
5461
@import 'scss/04-components/breadcrumbs';
55-
@import 'scss/04-components/controls';
56-
@import 'scss/04-components/header';
57-
@import 'scss/04-components/ish-sizing';
5862
@import 'scss/04-components/logo';
59-
@import 'scss/04-components/navigation';
6063
@import 'scss/04-components/pattern-category';
6164
@import 'scss/04-components/pattern-info';
6265
@import 'scss/04-components/pattern-lineage';
6366
@import 'scss/04-components/pattern-states';
6467
@import 'scss/04-components/pattern';
6568
@import 'scss/04-components/tabs';
6669
@import 'scss/04-components/text-passage';
67-
@import 'scss/04-components/tools';
68-
@import 'scss/04-components/viewport';
6970

7071
/*------------------------------------*\
7172
#THEMES

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
padding: 0;
106106
border: 0;
107107
display: block;
108+
width: 100%; // fill parent container
108109
}
109110

110111
code[class*='language-'] {

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

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,6 @@
77
* PL header and modal are light instead of dark
88
*/
99
.pl-c-body--theme-light {
10-
/**
11-
* Header
12-
*/
13-
.pl-c-header {
14-
background-color: $pl-color-white;
15-
border-bottom: 1px solid $pl-color-gray-20;
16-
}
17-
1810
/**
1911
* Tools dropdown
2012
*/
@@ -100,15 +92,6 @@
10092
}
10193
}
10294

103-
/**
104-
* Modal inside a light theme
105-
*/
106-
.pl-c-drawer {
107-
background-color: $pl-color-white;
108-
color: $pl-color-gray-70;
109-
border-top: 1px solid $pl-color-gray-20;
110-
}
111-
11295
/**
11396
* Modal close button
11497
* 1) Closes the modal popup

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

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,6 @@
77
* A theme that places displays the header as a sidebar
88
*/
99
.pl-c-body--theme-sidebar {
10-
/**
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-
*/
17-
.pl-c-header {
18-
width: $pl-sidebar-width; /* 1 */
19-
height: 100vh; /* 2 */
20-
flex-direction: column; /* 3 */
21-
border-bottom: 0; /* 4 */
22-
padding: 1rem;
23-
overflow: auto;
24-
-webkit-overflow-scrolling: touch;
25-
justify-content: space-between;
26-
}
27-
28-
/**
29-
* Header within light theme
30-
*/
31-
&.pl-c-body--theme-light {
32-
.pl-c-header {
33-
border-right: 1px solid $pl-color-gray-20;
34-
}
35-
}
36-
3710
/**
3811
* Logo
3912
*/

packages/uikit-workshop/src/sass/scss/04-components/_controls.scss renamed to packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,20 @@
22
#CONTROLS
33
\*------------------------------------*/
44

5+
pl-controls {
6+
margin-left: auto; /* 2 */
7+
display: flex;
8+
flex-wrap: nowrap;
9+
10+
.pl-c-body--theme-sidebar & {
11+
display: block;
12+
13+
@media all and (min-width: $pl-bp-med) {
14+
width: 100%;
15+
}
16+
}
17+
}
18+
519
/**
620
* 1) Controls contains viewport resizer and tools dropdown
721
* 2) Right-align inside of header

packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js renamed to packages/uikit-workshop/src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js

File renamed without changes.

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,16 @@ pl-drawer {
1515
right: 0;
1616
z-index: 20;
1717
overflow: visible;
18+
19+
.pl-c-body--theme-light & {
20+
// Modal / Drawer inside a light theme
21+
background-color: $pl-color-white;
22+
color: $pl-color-gray-70;
23+
border-top: 1.1px solid $pl-color-gray-20; // sub-pixel bug in Chrome. border disappears sometimes when set to 1px
24+
}
1825
}
1926

27+
2028
/**
2129
* 1) The drawer slides up from the bottom of the viewport when
2230
* "show pattern info" is selected on the pattern detail screen.
@@ -40,6 +48,12 @@ pl-drawer {
4048
}
4149
}
4250

51+
.pl-c-body--theme-light & {
52+
// Modal / Drawer inside a light theme
53+
background-color: $pl-color-white;
54+
color: $pl-color-gray-70;
55+
}
56+
4357
/**
4458
* Active drawer
4559
*/

packages/uikit-workshop/src/sass/scss/04-components/_header.scss renamed to packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,7 @@
22
#HEADER
33
\*------------------------------------*/
44

5-
/**
6-
* 1) Pattern Lab's header is fixed across the top of the viewport and
7-
* contains the primary pattern navigation, viewport resizing items,
8-
* and tools.
9-
* 2) Display nav and controls horizontally
10-
*/
11-
.pl-c-header {
5+
pl-header {
126
position: fixed;
137
position: sticky;
148
top: 0;
@@ -18,14 +12,58 @@
1812
width: 100%;
1913
background-color: $pl-color-black;
2014
color: $pl-color-gray-50;
15+
16+
@media all and (min-width: $pl-bp-med) {
17+
.pl-c-body--theme-sidebar & {
18+
/**
19+
* Header
20+
* 1) Set width to sidebar width defined above
21+
* 2) Make header 100% of the viewport height
22+
* 3) Stack header content stack on top of each other
23+
* 4) void bottom border for light theme
24+
*/
25+
width: $pl-sidebar-width; /* 1 */
26+
height: 100vh; /* 2 */
27+
overflow: auto;
28+
padding: 1rem;
29+
-webkit-overflow-scrolling: touch;
30+
border-bottom: 0; /* 4 */
31+
}
32+
}
33+
34+
.pl-c-body--theme-light & {
35+
border-right: 1px solid $pl-color-gray-20;
36+
background-color: $pl-color-white;
37+
border-bottom: 1px solid $pl-color-gray-20;
38+
}
39+
}
40+
41+
/**
42+
* 1) Pattern Lab's header is fixed across the top of the viewport and
43+
* contains the primary pattern navigation, viewport resizing items,
44+
* and tools.
45+
* 2) Display nav and controls horizontally
46+
*/
47+
.pl-c-header {
48+
display: flex; /* 2 */
49+
flex-direction: row;
50+
width: 100%;
2151
font-family: $pl-font;
2252
font-size: $pl-font-size-sm;
2353
min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
54+
background-color: inherit;
2455

2556
@supports(padding: max(0px)) {
2657
padding-left: env(safe-area-inset-left);
2758
padding-right: env(safe-area-inset-right);
2859
}
60+
61+
@media all and (min-width: $pl-bp-med) {
62+
.pl-c-body--theme-sidebar & {
63+
flex-direction: column; /* 3 */
64+
justify-content: space-between;
65+
}
66+
}
2967
}
3068

3169
/**

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ pl-layout {
1313
overflow: hidden;
1414
}
1515

16+
.pl-c-layout {
17+
flex-grow: 1;
18+
}
19+
1620
&.pl-c-body--theme-sidebar {
1721
@media all and (min-width: $pl-bp-med) {
1822
flex-direction: row;

packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss renamed to packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
#NAVIGATION
33
\*------------------------------------*/
44

5+
pl-nav {
6+
background-color: inherit; // so the inside of dropdowns inherits the correct color
7+
}
8+
59
/**
610
* Navigation container
711
* 1) Collapse height on small screens. Menu trigger button

0 commit comments

Comments
 (0)