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.
@@ -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
  }
@@ -16,6 +16,11 @@
16
16
  max-width: 792px;
17
17
  flex-grow: 8;
18
18
 
19
+ fieldset {
20
+ border: 0;
21
+ font-size: 0;
22
+ }
23
+
19
24
  .c-icon {
20
25
  font-size: 1.375rem;
21
26
  }
@@ -21,7 +21,7 @@
21
21
  color: inherit;
22
22
  }
23
23
 
24
- thead th {
24
+ th {
25
25
  background: color('petrol');
26
26
  color: color('white');
27
27
  }
@@ -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, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));
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,0% 0%,100% 100%,from(color('petrol')),to(color('blue')));
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;
@@ -3,10 +3,6 @@
3
3
 
4
4
  {% extends "layout.njk" %}
5
5
 
6
- {% block head %}
7
- <link rel="stylesheet" href="https://www.malvernpanalytical.com/resource/css/malvernpanalytical.min.css?v=637466523520000000" />
8
- {% endblock %}
9
-
10
6
  {% block inner %}
11
7
  {{ header({
12
8
  siteNav: siteNav
@@ -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
- .mp {
60
+ body {
14
61
  @include mp-reset-base();
62
+ }
15
63
 
16
- a,
17
- a:hover {
18
- cursor: pointer;
19
- color: inherit;
20
- }
21
-
22
- p {
23
- margin-bottom: 0;
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
- ul, ol {
27
- line-height: lh();
28
- }
77
+ ul, ol, p {
78
+ line-height: lh();
79
+ }
29
80
 
30
- ol, p, ul {
31
- line-height: lh();
32
- }
81
+ a {
82
+ text-decoration: none;
33
83
  }
34
84
 
35
- html {
36
- scroll-behavior: smooth;
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
+ }
@@ -1,6 +1,6 @@
1
1
  @import './tools';
2
2
  @import './foundations';
3
- @import './elements/reset-full';
3
+ @import './elements/reset';
4
4
  @import './objects/syntax-highlighting';
5
5
  @import './utilities/hr.scss';
6
6
  @import './objects/grid';
@@ -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) {
@@ -13,9 +13,9 @@
13
13
  @extend .c-h,.c-h--step-1;
14
14
  }
15
15
 
16
- &.mp p,
17
- &.mp ul,
18
- &.mp ol {
16
+ p,
17
+ ul,
18
+ ol {
19
19
  line-height: lh('prose');
20
20
  }
21
21
 
@@ -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
+ }
@@ -1,3 +1,5 @@
1
+ @import './breakout.scss';
2
+
1
3
  @function color($palette, $tone: 'step-0') {
2
4
  @return map-get(map-get($colours, $palette), $tone);
3
5
  }
@@ -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><th>Hex</th><td>#{{step.hex | upper}}</td></tr>
185
- <tr><th>CMYK</th><td>{{step.cmyk}}</td></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>
@@ -5,7 +5,7 @@ layout: patterns-page
5
5
 
6
6
  {% from "components/card/macro.njk" import card %}
7
7
 
8
- <div class="o-grid o-grid--of-three">
8
+ <div class="o-grid o-grid--of-three o-grid--swipeable">
9
9
  {% for _ in [0, 1, 2] %}
10
10
  {{ card({
11
11
  theme: {
@@ -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, and the impossible possible.</p>',
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-1">Pharmaceuticals and food</a></li>
119
- <li><a class="c-tabs__control" href="#tab-industry-1">Advanced materials</a></li>
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',
@@ -24,7 +24,7 @@ tagTitle: Webinars
24
24
 
25
25
  <aside class="u-flow">
26
26
  <h3 class="c-h c-h--upper">Featured events</h3>
27
- <div class="o-grid o-grid--of-three">
27
+ <div class="o-grid o-grid--of-three o-grid--swipeable">
28
28
  {{ card({
29
29
  theme: {
30
30
  layout: 'single',