Skip to content

Commit c00bb20

Browse files
bolt-botbolt-bot
committed
refactor: porting in latest bug fixes and UI updates relating to overall PL layout, cross browser fixes and scrolling improvements. add prettier and prettier-quick dev-dependencies to always run, even when not globally available
1 parent 29fec05 commit c00bb20

File tree

20 files changed

+256
-168
lines changed

20 files changed

+256
-168
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"devDependencies": {
3-
"lerna": "3.2.1"
3+
"lerna": "3.2.1",
4+
"prettier": "^1.14.3",
5+
"pretty-quick": "^1.8.0"
46
},
57
"private": true,
68
"scripts": {

‎packages/uikit-workshop/src/css/prism-okaidia.css

100644100755
Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,82 @@
55
* @author Lea Verou
66
*/
77

8-
code[class*="language-"],
9-
pre[class*="language-"] {
10-
color: black;
11-
text-shadow: 0 1px white;
12-
font-family: Consolas, Monaco, 'Andale Mono', monospace;
13-
direction: ltr;
14-
text-align: left;
15-
white-space: pre;
16-
word-spacing: normal;
17-
word-break: normal;
18-
line-height: 1.5;
19-
20-
-moz-tab-size: 4;
21-
-o-tab-size: 4;
22-
tab-size: 4;
23-
24-
-webkit-hyphens: none;
25-
-moz-hyphens: none;
26-
-ms-hyphens: none;
27-
hyphens: none;
28-
}
29-
30-
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
31-
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
32-
text-shadow: none;
33-
background: #b3d4fc;
34-
}
35-
36-
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
37-
code[class*="language-"]::selection, code[class*="language-"] ::selection {
38-
text-shadow: none;
39-
background: #b3d4fc;
8+
code[class*='language-'],
9+
pre[class*='language-'] {
10+
color: black;
11+
text-shadow: 0 1px white;
12+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
13+
direction: ltr;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
line-height: 1.5;
19+
20+
-moz-tab-size: 4;
21+
-o-tab-size: 4;
22+
tab-size: 4;
23+
24+
-webkit-hyphens: none;
25+
-moz-hyphens: none;
26+
-ms-hyphens: none;
27+
hyphens: none;
28+
}
29+
30+
pre[class*='language-']::-moz-selection,
31+
pre[class*='language-'] ::-moz-selection,
32+
code[class*='language-']::-moz-selection,
33+
code[class*='language-'] ::-moz-selection {
34+
text-shadow: none;
35+
background: #b3d4fc;
36+
}
37+
38+
pre[class*='language-']::selection,
39+
pre[class*='language-'] ::selection,
40+
code[class*='language-']::selection,
41+
code[class*='language-'] ::selection {
42+
text-shadow: none;
43+
background: #b3d4fc;
4044
}
4145

4246
@media print {
43-
code[class*="language-"],
44-
pre[class*="language-"] {
45-
text-shadow: none;
46-
}
47+
code[class*='language-'],
48+
pre[class*='language-'] {
49+
text-shadow: none;
50+
}
4751
}
4852

4953
/* Code blocks */
50-
pre[class*="language-"] {
51-
padding: 1em;
52-
margin: .5em 0;
53-
overflow: auto;
54+
pre[class*='language-'] {
55+
padding: 1em;
56+
margin: 0.5em 0;
57+
overflow: auto;
5458
}
5559

56-
:not(pre) > code[class*="language-"],
57-
pre[class*="language-"] {
58-
background: #f5f2f0;
60+
:not(pre) > code[class*='language-'],
61+
pre[class*='language-'] {
62+
background: #f5f2f0;
5963
}
6064

6165
/* Inline code */
62-
:not(pre) > code[class*="language-"] {
63-
padding: .1em;
64-
border-radius: .3em;
66+
:not(pre) > code[class*='language-'] {
67+
padding: 0.1em;
68+
border-radius: 0.3em;
6569
}
6670

6771
.token.comment,
6872
.token.prolog,
6973
.token.doctype,
7074
.token.cdata {
71-
color: slategray;
75+
color: slategray;
7276
}
7377

7478
.token.punctuation {
75-
color: #999;
79+
color: #999;
7680
}
7781

7882
.namespace {
79-
opacity: .7;
83+
opacity: 0.7;
8084
}
8185

8286
.token.property,
@@ -86,7 +90,7 @@ pre[class*="language-"] {
8690
.token.constant,
8791
.token.symbol,
8892
.token.deleted {
89-
color: #905;
93+
color: #905;
9094
}
9195

9296
.token.selector,
@@ -95,86 +99,85 @@ pre[class*="language-"] {
9599
.token.char,
96100
.token.builtin,
97101
.token.inserted {
98-
color: #690;
102+
color: #690;
99103
}
100104

101105
.token.operator,
102106
.token.entity,
103107
.token.url,
104108
.language-css .token.string,
105109
.style .token.string {
106-
color: #a67f59;
107-
background: hsla(0, 0%, 100%, .5);
110+
color: #a67f59;
111+
background: hsla(0, 0%, 100%, 0.5);
108112
}
109113

110114
.token.atrule,
111115
.token.attr-value,
112116
.token.keyword {
113-
color: #07a;
117+
color: #07a;
114118
}
115119

116120
.token.function {
117-
color: #DD4A68;
121+
color: #dd4a68;
118122
}
119123

120124
.token.regex,
121125
.token.important,
122126
.token.variable {
123-
color: #e90;
127+
color: #e90;
124128
}
125129

126130
.token.important,
127131
.token.bold {
128-
font-weight: bold;
132+
font-weight: bold;
129133
}
130134
.token.italic {
131-
font-style: italic;
135+
font-style: italic;
132136
}
133137

134138
.token.entity {
135-
cursor: help;
139+
cursor: help;
136140
}
137141

138142
pre.line-numbers {
139-
position: relative;
140-
padding-left: 3.8em;
141-
counter-reset: linenumber;
143+
position: relative;
144+
padding-left: 3.8em;
145+
counter-reset: linenumber;
142146
}
143147

144148
pre.line-numbers > code {
145-
position: relative;
149+
position: relative;
146150
}
147151

148152
.line-numbers .line-numbers-rows {
149-
position: absolute;
150-
pointer-events: none;
151-
top: 0;
152-
font-size: 100%;
153-
left: -3.8em;
154-
width: 3em; /* works for line-numbers below 1000 lines */
155-
letter-spacing: -1px;
156-
border-right: 1px solid #999;
157-
158-
-webkit-user-select: none;
159-
-moz-user-select: none;
160-
-ms-user-select: none;
161-
user-select: none;
162-
163-
}
164-
165-
.line-numbers-rows > span {
166-
pointer-events: none;
167-
display: block;
168-
counter-increment: linenumber;
169-
}
170-
171-
.line-numbers-rows > span:before {
172-
content: counter(linenumber);
173-
color: #999;
174-
display: block;
175-
padding-right: 0.8em;
176-
text-align: right;
177-
}
153+
position: absolute;
154+
pointer-events: none;
155+
top: 0;
156+
font-size: 100%;
157+
left: -3.8em;
158+
width: 3em; /* works for line-numbers below 1000 lines */
159+
letter-spacing: -1px;
160+
border-right: 1px solid #999;
161+
162+
-webkit-user-select: none;
163+
-moz-user-select: none;
164+
-ms-user-select: none;
165+
user-select: none;
166+
}
167+
168+
.line-numbers-rows > span {
169+
pointer-events: none;
170+
display: block;
171+
counter-increment: linenumber;
172+
}
173+
174+
.line-numbers-rows > span:before {
175+
content: counter(linenumber);
176+
color: #999;
177+
display: block;
178+
padding-right: 0.8em;
179+
text-align: right;
180+
}
178181
.token a {
179-
color: inherit;
180-
}
182+
color: inherit;
183+
}

‎packages/uikit-workshop/src/favicon.ico

32.2 KB
Binary file not shown.

‎packages/uikit-workshop/src/html/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html class="pl-c-html">
33

44
<head>
55
<title id="title">Pattern Lab</title>
66
<meta charset="UTF-8">
7-
<meta name="viewport" content="width=device-width" />
7+
<meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
88
<meta name="theme-color" content="#ababab" />
9-
109
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
1110

1211
</head>

‎packages/uikit-workshop/src/html/partials/base-template.html

100644100755
File mode changed.

‎packages/uikit-workshop/src/html/partials/modal.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<div class="pl-c-modal pl-js-modal">
33
<div class="pl-c-modal__toolbar">
44
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
5+
</div>
6+
<div class="pl-c-modal__content-wrapper">
57
<div class="pl-c-modal__toolbar-controls">
68
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
79
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
@@ -11,6 +13,6 @@
1113
</button>
1214
<pl-toggle-layout></pl-toggle-layout>
1315
</div>
16+
<div class="pl-c-modal__content pl-js-modal-content"></div>
1417
</div>
15-
<div class="pl-c-modal__content pl-js-modal-content"></div>
1618
</div>

‎packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,8 @@
101101
*/
102102
&.pl-is-active {
103103
max-height: calc(100vh - #{$offset-top} - 1rem);
104-
max-height: var(
105-
calc(--pl-viewport-height - 1rem),
106-
calc(100vh - #{$offset-top} - 1rem)
104+
max-height: calc(
105+
var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
107106
); /* [1] */
108107
overflow: auto;
109108
-webkit-overflow-scrolling: touch;

‎packages/uikit-workshop/src/sass/scss/02-base/_body.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@
77
* 1) These exist indepenedent of any project-specific styles
88
* 2) Styled as IDs to avoid collisions with user <body> tag
99
*/
10+
.pl-c-html {
11+
min-height: 100%;
12+
}
13+
1014
.pl-c-body {
1115
margin: 0;
1216
padding: 0;
1317
-webkit-text-size-adjust: 100%;
14-
display: flex;
15-
flex-direction: column;
16-
height: 100vh;
18+
display: flex; // Required for IE 11 to display overall PL layout correctly
1719
}

‎packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ pre[class*='language-'] {
1616
word-spacing: normal;
1717
word-break: normal;
1818
line-height: 1.5;
19+
word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly
1920

2021
-moz-tab-size: 4;
2122
-o-tab-size: 4;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
color: $pl-color-gray-50;
2121
font-family: $pl-font;
2222
font-size: $pl-font-size-sm;
23+
24+
@supports (padding: max(0px)) {
25+
padding-left: env(safe-area-inset-left);
26+
padding-right: env(safe-area-inset-right);
27+
}
2328
}
2429

2530
/**

0 commit comments

Comments
 (0)