mp-design-system 0.4.13 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/_includes/components/card/card.scss +6 -9
- package/src/_includes/components/filter-search/filter-search.scss +5 -0
- package/src/_includes/components/table/table.scss +1 -1
- package/src/_includes/components/usp/usp.scss +8 -2
- package/src/_includes/page.njk +0 -4
- package/src/assets/scss/elements/reset.scss +102 -19
- package/src/assets/scss/library.scss +1 -1
- package/src/assets/scss/objects/grid.scss +21 -0
- package/src/assets/scss/objects/prose.scss +3 -3
- package/src/assets/scss/tools/breakout.scss +15 -0
- package/src/assets/scss/tools/index.scss +2 -0
- package/src/brand/visual/colors.njk +55 -2
- package/src/patterns/grid-of-cards.njk +1 -1
- package/src/prototype/index.njk +133 -7
- package/src/prototype/webinars-3-2-1.njk +1 -1
- package/src/prototype/webinars.njk +1 -1
- package/src/assets/scss/elements/reset-full.scss +0 -123
@@ -5,8 +5,13 @@
|
|
5
5
|
flex-direction: column;
|
6
6
|
align-items: stretch;
|
7
7
|
|
8
|
-
&--alt
|
8
|
+
&--alt,
|
9
|
+
&--event {
|
9
10
|
background: color("petrol", "step-3");
|
11
|
+
|
12
|
+
&__specs {
|
13
|
+
color: color("grey", "step-1")
|
14
|
+
}
|
10
15
|
}
|
11
16
|
|
12
17
|
&--featured {
|
@@ -156,14 +161,6 @@
|
|
156
161
|
@extend .u-16\/9;
|
157
162
|
}
|
158
163
|
|
159
|
-
&--event {
|
160
|
-
background: color("petrol", "step-3");
|
161
|
-
}
|
162
|
-
|
163
|
-
&--event &__specs {
|
164
|
-
color: color("grey", "step-1");
|
165
|
-
}
|
166
|
-
|
167
164
|
&__primary {
|
168
165
|
@include flow("s");
|
169
166
|
}
|
@@ -2,14 +2,20 @@
|
|
2
2
|
@include padding('s-m');
|
3
3
|
border: 1px solid;
|
4
4
|
border-image-slice: 1;
|
5
|
-
border-image-source: linear-gradient(to right,
|
5
|
+
border-image-source: linear-gradient( to right,
|
6
|
+
rgba(color('blue'), 0.5),
|
7
|
+
rgba(color('green'), 0.5));
|
8
|
+
position: relative;
|
6
9
|
|
7
10
|
&__title {
|
8
11
|
max-width: 300px;
|
9
12
|
color: color('petrol');
|
10
13
|
|
11
14
|
@supports(-webkit-text-fill-color:transparent) {
|
12
|
-
background-image: -webkit-gradient(linear,
|
15
|
+
background-image: -webkit-gradient(linear,
|
16
|
+
0% 0%,100% 100%,
|
17
|
+
from(color('petrol')),
|
18
|
+
to(color('blue')));
|
13
19
|
-webkit-background-clip: text;
|
14
20
|
-webkit-text-fill-color: transparent;
|
15
21
|
display: inline-block;
|
package/src/_includes/page.njk
CHANGED
@@ -1,46 +1,109 @@
|
|
1
|
+
|
1
2
|
*,
|
2
3
|
*:before,
|
3
4
|
*:after {
|
4
5
|
box-sizing: border-box;
|
5
6
|
}
|
6
7
|
|
8
|
+
body {
|
9
|
+
display: flex;
|
10
|
+
flex-direction: column;
|
11
|
+
justify-content: flex-start;
|
12
|
+
align-items: stretch;
|
13
|
+
min-height: 100vh;
|
14
|
+
margin: 0;
|
15
|
+
}
|
16
|
+
|
17
|
+
html {
|
18
|
+
scroll-behavior: smooth;
|
19
|
+
}
|
20
|
+
|
21
|
+
blockquote,
|
22
|
+
pre,
|
23
|
+
ol,
|
24
|
+
ul,
|
25
|
+
figure {
|
26
|
+
padding: 0;
|
27
|
+
margin: 0;
|
28
|
+
}
|
29
|
+
|
30
|
+
img {
|
31
|
+
max-width: 100%;
|
32
|
+
display: block;
|
33
|
+
height: auto;
|
34
|
+
border: none;
|
35
|
+
}
|
36
|
+
|
37
|
+
article,
|
38
|
+
aside,
|
39
|
+
figure,
|
40
|
+
footer,
|
41
|
+
header,
|
42
|
+
aside,
|
43
|
+
main,
|
44
|
+
nav {
|
45
|
+
display: block;
|
46
|
+
}
|
47
|
+
|
48
|
+
iframe {
|
49
|
+
border: none;
|
50
|
+
}
|
51
|
+
|
52
|
+
// Typography
|
53
|
+
|
7
54
|
@mixin mp-reset-base {
|
8
55
|
font: weight() #{1.125rem}/lh() $font-stack;
|
9
56
|
@include step();
|
10
57
|
color: color('grey');
|
11
58
|
}
|
12
59
|
|
13
|
-
|
60
|
+
body {
|
14
61
|
@include mp-reset-base();
|
62
|
+
}
|
15
63
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
64
|
+
h1,
|
65
|
+
h2,
|
66
|
+
h3,
|
67
|
+
h4,
|
68
|
+
h5,
|
69
|
+
h6,
|
70
|
+
p,
|
71
|
+
ul,
|
72
|
+
ol,
|
73
|
+
dl {
|
74
|
+
margin: 0
|
75
|
+
}
|
25
76
|
|
26
|
-
|
27
|
-
|
28
|
-
|
77
|
+
ul, ol, p {
|
78
|
+
line-height: lh();
|
79
|
+
}
|
29
80
|
|
30
|
-
|
31
|
-
|
32
|
-
}
|
81
|
+
a {
|
82
|
+
text-decoration: none;
|
33
83
|
}
|
34
84
|
|
35
|
-
|
36
|
-
|
85
|
+
a,
|
86
|
+
a:hover {
|
87
|
+
cursor: pointer;
|
88
|
+
color: inherit;
|
37
89
|
}
|
38
90
|
|
91
|
+
// Lists
|
92
|
+
|
39
93
|
.mp ol,
|
40
94
|
.mp ul {
|
41
95
|
list-style: none;
|
42
96
|
}
|
43
97
|
|
98
|
+
// Font styles
|
99
|
+
|
100
|
+
cite,
|
101
|
+
address {
|
102
|
+
font-style: normal;
|
103
|
+
}
|
104
|
+
|
105
|
+
// Form
|
106
|
+
|
44
107
|
[type="submit"],
|
45
108
|
[type="button"],
|
46
109
|
button {
|
@@ -59,4 +122,24 @@ button {
|
|
59
122
|
.mp.c-button[disabled] {
|
60
123
|
opacity: 0.5;
|
61
124
|
cursor: not-allowed;
|
62
|
-
}
|
125
|
+
}
|
126
|
+
|
127
|
+
label {
|
128
|
+
cursor: pointer;
|
129
|
+
}
|
130
|
+
|
131
|
+
fieldset {
|
132
|
+
border: 0;
|
133
|
+
padding: 0.01em 0 0 0;
|
134
|
+
}
|
135
|
+
|
136
|
+
// Animation
|
137
|
+
|
138
|
+
@media (prefers-reduced-motion:reduce) {
|
139
|
+
* {
|
140
|
+
-webkit-animation: none!important;
|
141
|
+
animation: none!important;
|
142
|
+
transition: none!important;
|
143
|
+
scroll-behavior: auto!important;
|
144
|
+
}
|
145
|
+
}
|
@@ -179,6 +179,27 @@ $grid-gutter-width: 36;
|
|
179
179
|
}
|
180
180
|
}
|
181
181
|
|
182
|
+
&--swipeable {
|
183
|
+
@media (max-width: 54.9375em) {
|
184
|
+
@include breakout('gutter');
|
185
|
+
flex-wrap: nowrap;
|
186
|
+
overflow-x: scroll;
|
187
|
+
scroll-snap-type: x mandatory;
|
188
|
+
-webkit-overflow-scrolling: touch;
|
189
|
+
|
190
|
+
& > * {
|
191
|
+
flex: 0 0 auto;
|
192
|
+
max-width: 23em;
|
193
|
+
width: calc(85vw - var(--gutter)*2.333); // !important
|
194
|
+
scroll-snap-align: center;
|
195
|
+
}
|
196
|
+
|
197
|
+
& > * + * {
|
198
|
+
margin-left: var(--gutter) !important;
|
199
|
+
}
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
182
203
|
@media (min-width: 55em) {
|
183
204
|
&--4\/7 > :nth-child(2n + 2),
|
184
205
|
&--4\/7-switch > :nth-child(2n + 2) {
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// Breakout
|
2
|
+
// Force an element to fill 100% of the window width, ignoring its container
|
3
|
+
|
4
|
+
@mixin breakout($pad: 0) {
|
5
|
+
left: 50%;
|
6
|
+
position: relative;
|
7
|
+
transform: translateX(-50vw);
|
8
|
+
width: 100vw;
|
9
|
+
padding-left: safe-space($pad);
|
10
|
+
padding-right: safe-space($pad);
|
11
|
+
}
|
12
|
+
|
13
|
+
.u-breakout {
|
14
|
+
@include breakout
|
15
|
+
}
|
@@ -130,6 +130,38 @@ status: 'In production'
|
|
130
130
|
}
|
131
131
|
]
|
132
132
|
},
|
133
|
+
{
|
134
|
+
name: 'MP21UtilGold',
|
135
|
+
key: 'Utility-Orange',
|
136
|
+
steps: [
|
137
|
+
|
138
|
+
{
|
139
|
+
name: "-1",
|
140
|
+
hex: 'AE7809',
|
141
|
+
cmyk: '29.51.100.10'
|
142
|
+
},
|
143
|
+
{
|
144
|
+
name: 0,
|
145
|
+
hex: 'F2A60D',
|
146
|
+
cmyk: '04.38.100.00'
|
147
|
+
},
|
148
|
+
{
|
149
|
+
name: 1,
|
150
|
+
hex: 'F6BF51',
|
151
|
+
cmyk: '03.26.79.00'
|
152
|
+
},
|
153
|
+
{
|
154
|
+
name: 2,
|
155
|
+
hex: 'FCEAC5',
|
156
|
+
cmyk: '01.07.25.00'
|
157
|
+
},
|
158
|
+
{
|
159
|
+
name: 3,
|
160
|
+
hex: 'FEF8EC',
|
161
|
+
cmyk: '00.02.06.00'
|
162
|
+
}
|
163
|
+
]
|
164
|
+
},
|
133
165
|
{
|
134
166
|
name: 'MP21Charcoal',
|
135
167
|
key: 'Grey',
|
@@ -181,8 +213,8 @@ status: 'In production'
|
|
181
213
|
</div>
|
182
214
|
<table class="c-table">
|
183
215
|
<tbody>
|
184
|
-
<tr><
|
185
|
-
<tr><
|
216
|
+
<tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
|
217
|
+
<tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
|
186
218
|
</tbody>
|
187
219
|
</table>
|
188
220
|
{% endfor %}
|
@@ -190,6 +222,27 @@ status: 'In production'
|
|
190
222
|
{% endfor%}
|
191
223
|
</div>
|
192
224
|
|
225
|
+
{{ markdown({
|
226
|
+
content: "# When to use color
|
227
|
+
|
228
|
+
The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Grey text, and splashes of color to highlight important elements.
|
229
|
+
|
230
|
+
**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Along with **Blue** it is the color you will use most often in your designs.
|
231
|
+
|
232
|
+
**Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
|
233
|
+
|
234
|
+
**Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
|
235
|
+
|
236
|
+
**Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
|
237
|
+
|
238
|
+
**Grey** is widely used for text in all designs.
|
239
|
+
|
240
|
+
## Tints and shades
|
241
|
+
Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
|
242
|
+
|
243
|
+
Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design."
|
244
|
+
}) }}
|
245
|
+
|
193
246
|
{{ alert({
|
194
247
|
type: 'warning',
|
195
248
|
content: '<ul>
|
package/src/prototype/index.njk
CHANGED
@@ -20,7 +20,7 @@ tags: prototype
|
|
20
20
|
{% block content %}
|
21
21
|
{{ hero({
|
22
22
|
title: "We’re BIG on small.",
|
23
|
-
content: '<p>We make scientific instruments and services that make the invisible visible,
|
23
|
+
content: '<p>We make scientific instruments and services that make the invisible visible, so you can make the impossible possible.</p>',
|
24
24
|
cta: {
|
25
25
|
label: 'About Malvern Panalytical',
|
26
26
|
link: ''
|
@@ -115,16 +115,14 @@ tags: prototype
|
|
115
115
|
<nav class="c-tabs__controls u-scroll-shadows--h">
|
116
116
|
<ul class="c-tabs__controls-list">
|
117
117
|
<li><a class="c-tabs__control c-tabs__control--active" href="#tab-industry-1">Primary materials</a></li>
|
118
|
-
<li><a class="c-tabs__control" href="#tab-industry-
|
119
|
-
<li><a class="c-tabs__control" href="#tab-industry-
|
120
|
-
<li><a class="c-tabs__control" href="#tab-industry-1">Contract research services</a></li>
|
121
|
-
<li><a class="c-tabs__control" href="#tab-industry-1">Academia</a></li>
|
118
|
+
<li><a class="c-tabs__control" href="#tab-industry-2">Pharmaceuticals and food</a></li>
|
119
|
+
<li><a class="c-tabs__control" href="#tab-industry-3">Advanced materials</a></li>
|
122
120
|
</ul>
|
123
121
|
</nav>
|
124
122
|
|
125
123
|
<div class="c-tabs__content">
|
126
124
|
<div id="tab-industry-1" class="c-tab c-tab--active">
|
127
|
-
<div class="o-grid o-grid--of-four">
|
125
|
+
<div class="o-grid o-grid--of-four o-grid--swipeable">
|
128
126
|
{{ industryCard({
|
129
127
|
title: 'Building materials',
|
130
128
|
link: '',
|
@@ -165,6 +163,134 @@ tags: prototype
|
|
165
163
|
alt: ''
|
166
164
|
}
|
167
165
|
}) }}
|
166
|
+
{{ industryCard({
|
167
|
+
title: 'Academia',
|
168
|
+
link: '',
|
169
|
+
image: {
|
170
|
+
src: '/static/img/sector-1.jpg',
|
171
|
+
alt: ''
|
172
|
+
}
|
173
|
+
}) }}
|
174
|
+
</div>
|
175
|
+
</div>
|
176
|
+
<div id="tab-industry-2" class="c-tab">
|
177
|
+
<div class="o-grid o-grid--of-four o-grid--swipeable">
|
178
|
+
{{ industryCard({
|
179
|
+
title: 'Biologics',
|
180
|
+
link: '',
|
181
|
+
image: {
|
182
|
+
src: '/static/img/sector-3.jpg',
|
183
|
+
alt: ''
|
184
|
+
}
|
185
|
+
}) }}
|
186
|
+
{{ industryCard({
|
187
|
+
title: 'Food and drink analysis',
|
188
|
+
link: '',
|
189
|
+
image: {
|
190
|
+
src: '/static/img/sector-4.jpg',
|
191
|
+
alt: ''
|
192
|
+
}
|
193
|
+
}) }}
|
194
|
+
{{ industryCard({
|
195
|
+
title: 'Pharmaceutical solutions',
|
196
|
+
link: '',
|
197
|
+
image: {
|
198
|
+
src: '/static/img/sector-5.jpg',
|
199
|
+
alt: ''
|
200
|
+
}
|
201
|
+
}) }}
|
202
|
+
{{ industryCard({
|
203
|
+
title: 'Contract research services',
|
204
|
+
link: '',
|
205
|
+
image: {
|
206
|
+
src: '/static/img/sector-1.jpg',
|
207
|
+
alt: ''
|
208
|
+
}
|
209
|
+
}) }}
|
210
|
+
{{ industryCard({
|
211
|
+
title: 'Academia',
|
212
|
+
link: '',
|
213
|
+
image: {
|
214
|
+
src: '/static/img/sector-2.jpg',
|
215
|
+
alt: ''
|
216
|
+
}
|
217
|
+
}) }}
|
218
|
+
</div>
|
219
|
+
</div>
|
220
|
+
<div id="tab-industry-3" class="c-tab">
|
221
|
+
<div class="o-grid o-grid--of-four o-grid--swipeable">
|
222
|
+
{{ industryCard({
|
223
|
+
title: 'Advanced manufacturing',
|
224
|
+
link: '',
|
225
|
+
image: {
|
226
|
+
src: '/static/img/sector-5.jpg',
|
227
|
+
alt: ''
|
228
|
+
}
|
229
|
+
}) }}
|
230
|
+
{{ industryCard({
|
231
|
+
title: 'Aerospace and automotive',
|
232
|
+
link: '',
|
233
|
+
image: {
|
234
|
+
src: '/static/img/sector-1.jpg',
|
235
|
+
alt: ''
|
236
|
+
}
|
237
|
+
}) }}
|
238
|
+
{{ industryCard({
|
239
|
+
title: 'Battery and energy',
|
240
|
+
link: '',
|
241
|
+
image: {
|
242
|
+
src: '/static/img/sector-2.jpg',
|
243
|
+
alt: ''
|
244
|
+
}
|
245
|
+
}) }}
|
246
|
+
{{ industryCard({
|
247
|
+
title: 'Electronics and semiconductors',
|
248
|
+
link: '',
|
249
|
+
image: {
|
250
|
+
src: '/static/img/sector-3.jpg',
|
251
|
+
alt: ''
|
252
|
+
}
|
253
|
+
}) }}
|
254
|
+
{{ industryCard({
|
255
|
+
title: 'Environmental monitoring and analysis',
|
256
|
+
link: '',
|
257
|
+
image: {
|
258
|
+
src: '/static/img/sector-4.jpg',
|
259
|
+
alt: ''
|
260
|
+
}
|
261
|
+
}) }}
|
262
|
+
{{ industryCard({
|
263
|
+
title: 'Forensic analysis',
|
264
|
+
link: '',
|
265
|
+
image: {
|
266
|
+
src: '/static/img/sector-5.jpg',
|
267
|
+
alt: ''
|
268
|
+
}
|
269
|
+
}) }}
|
270
|
+
{{ industryCard({
|
271
|
+
title: 'Nanomaterials',
|
272
|
+
link: '',
|
273
|
+
image: {
|
274
|
+
src: '/static/img/sector-1.jpg',
|
275
|
+
alt: ''
|
276
|
+
}
|
277
|
+
}) }}
|
278
|
+
{{ industryCard({
|
279
|
+
title: 'Polymers, plastics, fibers and elastomers',
|
280
|
+
link: '',
|
281
|
+
image: {
|
282
|
+
src: '/static/img/sector-2.jpg',
|
283
|
+
alt: ''
|
284
|
+
}
|
285
|
+
}) }}
|
286
|
+
{{ industryCard({
|
287
|
+
title: 'Specialty chemicals',
|
288
|
+
link: '',
|
289
|
+
image: {
|
290
|
+
src: '/static/img/sector-3.jpg',
|
291
|
+
alt: ''
|
292
|
+
}
|
293
|
+
}) }}
|
168
294
|
</div>
|
169
295
|
</div>
|
170
296
|
</div>
|
@@ -199,7 +325,7 @@ tags: prototype
|
|
199
325
|
|
200
326
|
<div class="c-tabs__content">
|
201
327
|
<div id="tab-webinars" class="c-tab c-tab--active">
|
202
|
-
<div class="o-grid o-grid--of-three">
|
328
|
+
<div class="o-grid o-grid--of-three o-grid--swipeable">
|
203
329
|
{{ card({
|
204
330
|
theme: {
|
205
331
|
layout: 'single',
|
@@ -22,7 +22,7 @@ tagTitle: Webinars - featured layout
|
|
22
22
|
|
23
23
|
<aside class="u-flow">
|
24
24
|
<h3 class="c-h c-h--upper">Featured events</h3>
|
25
|
-
<div class="o-grid o-grid--of-three">
|
25
|
+
<div class="o-grid o-grid--of-three o-grid--swipeable">
|
26
26
|
{{ card({
|
27
27
|
theme: {
|
28
28
|
layout: 'single',
|