mp-design-system 0.9.8 → 0.9.16
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/accordion/macro.njk +1 -1
- package/src/_includes/components/features-table/features-table.config.js +16 -0
- package/src/_includes/components/features-table/features-table.njk +360 -0
- package/src/_includes/components/features-table/features-table.scss +101 -0
- package/src/_includes/components/features-table/macro.njk +5 -0
- package/src/_includes/components/footer/footer.scss +2 -2
- package/src/_includes/components/header/header.scss +15 -1
- package/src/_includes/components/table/table.scss +13 -0
- package/src/_includes/library-navigation/brand-nav.njk +2 -1
- package/src/_includes/navigation/corporate.njk +5 -2
- package/src/assets/scss/components/index.scss +1 -0
- package/src/assets/scss/components/lightbox.scss +1 -0
- package/src/assets/scss/library.scss +15 -2
- package/src/assets/scss/objects/grid.scss +46 -91
- package/src/assets/scss/objects/prose.scss +2 -1
- package/src/assets/scss/utilities/space.scss +12 -0
- package/src/assets/scss/utilities/typography.scss +4 -0
- package/src/brand/colors.njk +15 -6
- package/src/brand/illustration.md +44 -0
- package/src/brand/images.md +1 -1
- package/src/components/grid/generic.njk +31 -0
- package/src/components/grid/index.njk +21 -2
- package/src/components/grid/layout.njk +5 -5
- package/src/prototype/sections.njk +290 -0
package/package.json
CHANGED
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
{% from "components/button/macro.njk" import button %}
|
|
2
|
+
{% from "components/icon/macro.njk" import icon %}
|
|
3
|
+
|
|
4
|
+
<div id="product-features-table" class="mp c-features u-pad-bottom-l">
|
|
5
|
+
<div class="c-features__mobile">
|
|
6
|
+
<div class="mp c-tabs c-tabs--anchor">
|
|
7
|
+
<nav class="c-tabs__controls">
|
|
8
|
+
<ul class="c-tabs__controls-list">
|
|
9
|
+
<li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Mastersizer 3000</a></li>
|
|
10
|
+
<li><a class="c-tabs__control" href="#tab-2">Mastersizer 3000E</a></li>
|
|
11
|
+
<li><a class="c-tabs__control" href="#tab-3">Mastersizer 3000E</a></li>
|
|
12
|
+
</ul>
|
|
13
|
+
</nav>
|
|
14
|
+
<div class="c-tabs__content">
|
|
15
|
+
<div id="tab-1" class="c-tab c-tab--active">
|
|
16
|
+
<table class="c-table c-table--features">
|
|
17
|
+
<thead>
|
|
18
|
+
<tr>
|
|
19
|
+
<th class="c-features__product u-flow--prose">
|
|
20
|
+
<img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
|
|
21
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
|
|
22
|
+
</th>
|
|
23
|
+
</tr>
|
|
24
|
+
</thead>
|
|
25
|
+
<tbody>
|
|
26
|
+
<tr class="c-features__introduction">
|
|
27
|
+
<td>Advanced features</td>
|
|
28
|
+
</tr>
|
|
29
|
+
<tr class="c-features__label-text">
|
|
30
|
+
<td>
|
|
31
|
+
<span class="u-strong">0.01µm to 3500µm</span>
|
|
32
|
+
<span>Extended particle size range</span>
|
|
33
|
+
</td>
|
|
34
|
+
</tr>
|
|
35
|
+
<tr class="c-features__checklist-title">
|
|
36
|
+
<th>Compatible sample dispersions</th>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr class="c-features__checklist">
|
|
39
|
+
<td>
|
|
40
|
+
{{ icon({ id: 'tick' }) }}Automated wet
|
|
41
|
+
</td>
|
|
42
|
+
</tr>
|
|
43
|
+
<tr class="c-features__checklist">
|
|
44
|
+
<td>
|
|
45
|
+
{{ icon({ id: 'tick' }) }}Automated dry powder
|
|
46
|
+
</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr class="c-features__checklist">
|
|
49
|
+
<td>
|
|
50
|
+
{{ icon({ id: 'tick' }) }}Manual wet
|
|
51
|
+
</td>
|
|
52
|
+
</tr>
|
|
53
|
+
<tr class="c-features__checklist c-features__checklist--last">
|
|
54
|
+
<td class="u-grey-step-1">
|
|
55
|
+
{{ icon({ id: 'cross' }) }}Manual dry powder
|
|
56
|
+
</td>
|
|
57
|
+
</tr>
|
|
58
|
+
<tr class="c-features__text">
|
|
59
|
+
<td>
|
|
60
|
+
Advanced method development and comparison software
|
|
61
|
+
</td>
|
|
62
|
+
</tr>
|
|
63
|
+
<tr class="c-features__text">
|
|
64
|
+
<td>
|
|
65
|
+
Advanced data quality assessment and reporting software
|
|
66
|
+
</td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr class="c-features__text">
|
|
69
|
+
<td>
|
|
70
|
+
IQ/OQ validation
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
<tr class="c-features__text">
|
|
74
|
+
<td>
|
|
75
|
+
21 CFR Part 11 support
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
</tbody>
|
|
79
|
+
<tfoot>
|
|
80
|
+
<tr>
|
|
81
|
+
<td>
|
|
82
|
+
<a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
|
|
83
|
+
</td>
|
|
84
|
+
</tr>
|
|
85
|
+
</tfoot>
|
|
86
|
+
</table>
|
|
87
|
+
</div>
|
|
88
|
+
<div id="tab-2" class="c-tab">
|
|
89
|
+
<table class="c-table c-table--features">
|
|
90
|
+
<thead>
|
|
91
|
+
<tr>
|
|
92
|
+
<th class="c-features__product u-flow--prose">
|
|
93
|
+
<img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
|
|
94
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
|
|
95
|
+
<span>with Extended software</span>
|
|
96
|
+
</th>
|
|
97
|
+
</tr>
|
|
98
|
+
</thead>
|
|
99
|
+
<tbody>
|
|
100
|
+
<tr class="c-features__introduction">
|
|
101
|
+
<td>Flexible features</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr class="c-features__label-text">
|
|
104
|
+
<td>
|
|
105
|
+
<span class="u-strong">0.1µm to 1000µm</span>
|
|
106
|
+
<span>Standard particle size range</span>
|
|
107
|
+
</td>
|
|
108
|
+
</tr>
|
|
109
|
+
<tr class="c-features__checklist-title">
|
|
110
|
+
<th>Compatible sample dispersions</th>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr class="c-features__checklist">
|
|
113
|
+
<td>
|
|
114
|
+
{{ icon({ id: 'tick' }) }}Automated wet
|
|
115
|
+
</td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr class="c-features__checklist">
|
|
118
|
+
<td class="u-grey-step-1">
|
|
119
|
+
{{ icon({ id: 'cross' }) }}Automated dry powder
|
|
120
|
+
</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<tr class="c-features__checklist">
|
|
123
|
+
<td>
|
|
124
|
+
{{ icon({ id: 'tick' }) }}Manual wet
|
|
125
|
+
</td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr class="c-features__checklist c-features__checklist--last">
|
|
128
|
+
<td>
|
|
129
|
+
{{ icon({ id: 'tick' }) }}Manual dry powder
|
|
130
|
+
</td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr class="c-features__text">
|
|
133
|
+
<td>
|
|
134
|
+
Advanced method development and comparison software
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
<tr class="c-features__text">
|
|
138
|
+
<td>
|
|
139
|
+
Advanced data quality assessment and reporting software
|
|
140
|
+
</td>
|
|
141
|
+
</tr>
|
|
142
|
+
</tbody>
|
|
143
|
+
<tfoot>
|
|
144
|
+
<tr>
|
|
145
|
+
<td>
|
|
146
|
+
<a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
|
|
147
|
+
</td>
|
|
148
|
+
</tr>
|
|
149
|
+
</tfoot>
|
|
150
|
+
</table>
|
|
151
|
+
</div>
|
|
152
|
+
<div id="tab-3" class="c-tab">
|
|
153
|
+
<table class="c-table c-table--features">
|
|
154
|
+
<thead>
|
|
155
|
+
<tr>
|
|
156
|
+
<th class="c-features__product u-flow--prose">
|
|
157
|
+
<img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
|
|
158
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
|
|
159
|
+
<span>with Basic software</span>
|
|
160
|
+
</th>
|
|
161
|
+
</tr>
|
|
162
|
+
</thead>
|
|
163
|
+
<tbody>
|
|
164
|
+
<tr class="c-features__introduction">
|
|
165
|
+
<td>Entry-level features</td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr class="c-features__label-text">
|
|
168
|
+
<td>
|
|
169
|
+
<span class="u-strong">0.1µm to 1000µm</span>
|
|
170
|
+
<span>Standard particle size range</span>
|
|
171
|
+
</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr class="c-features__checklist-title">
|
|
174
|
+
<th>Compatible sample dispersions</th>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr class="c-features__checklist">
|
|
177
|
+
<td class="u-grey-step-1">
|
|
178
|
+
{{ icon({ id: 'cross' }) }}Automated wet
|
|
179
|
+
</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr class="c-features__checklist">
|
|
182
|
+
<td class="u-grey-step-1">
|
|
183
|
+
{{ icon({ id: 'cross' }) }}Automated dry powder
|
|
184
|
+
</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr class="c-features__checklist">
|
|
187
|
+
<td>
|
|
188
|
+
{{ icon({ id: 'tick' }) }} Manual wet
|
|
189
|
+
</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr class="c-features__checklist c-features__checklist--last">
|
|
192
|
+
<td>
|
|
193
|
+
{{ icon({ id: 'tick' }) }} Manual dry powder
|
|
194
|
+
</td>
|
|
195
|
+
</tr>
|
|
196
|
+
</tbody>
|
|
197
|
+
<tfoot>
|
|
198
|
+
<tr>
|
|
199
|
+
<td>
|
|
200
|
+
<a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
|
|
201
|
+
</td>
|
|
202
|
+
</tr>
|
|
203
|
+
</tfoot>
|
|
204
|
+
</table>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="c-features__wrapper">
|
|
210
|
+
<table class="c-table c-table--features">
|
|
211
|
+
<thead>
|
|
212
|
+
<tr>
|
|
213
|
+
<th class="c-features__product u-flow--prose">
|
|
214
|
+
<img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
|
|
215
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
|
|
216
|
+
</th>
|
|
217
|
+
<th class="c-features__product u-flow--prose">
|
|
218
|
+
<img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
|
|
219
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
|
|
220
|
+
<span>with Extended software</span>
|
|
221
|
+
</th>
|
|
222
|
+
<th class="c-features__product u-flow--prose">
|
|
223
|
+
<img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
|
|
224
|
+
<h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
|
|
225
|
+
<span>with Basic software</span>
|
|
226
|
+
</th>
|
|
227
|
+
</tr>
|
|
228
|
+
</thead>
|
|
229
|
+
<tbody>
|
|
230
|
+
<tr class="c-features__introduction">
|
|
231
|
+
<td>
|
|
232
|
+
Advanced features
|
|
233
|
+
</td>
|
|
234
|
+
<td>
|
|
235
|
+
Flexible features
|
|
236
|
+
</td>
|
|
237
|
+
<td>
|
|
238
|
+
Entry-level features
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr class="c-features__label-text">
|
|
242
|
+
<td>
|
|
243
|
+
<span class="u-strong">0.01µm to 3500µm</span>
|
|
244
|
+
<span>Extended particle size range</span>
|
|
245
|
+
</td>
|
|
246
|
+
<td>
|
|
247
|
+
<span class="u-strong">0.1µm to 1000µm</span>
|
|
248
|
+
<span>Standard particle size range</span>
|
|
249
|
+
</td>
|
|
250
|
+
<td>
|
|
251
|
+
<span class="u-strong">0.1µm to 1000µm</span>
|
|
252
|
+
<span>Standard particle size range</span>
|
|
253
|
+
</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr class="c-features__checklist-title">
|
|
256
|
+
<th>Compatible sample dispersions</th>
|
|
257
|
+
<th>Compatible sample dispersions</th>
|
|
258
|
+
<th>Compatible sample dispersions</th>
|
|
259
|
+
</tr>
|
|
260
|
+
<tr class="c-features__checklist">
|
|
261
|
+
<td>
|
|
262
|
+
{{ icon({ id: 'tick' }) }} Automated wet
|
|
263
|
+
</td>
|
|
264
|
+
<td>
|
|
265
|
+
{{ icon({ id: 'tick' }) }} Automated wet
|
|
266
|
+
</td>
|
|
267
|
+
<td class="u-grey-step-1">
|
|
268
|
+
{{ icon({ id: 'cross' }) }} Automated wet
|
|
269
|
+
</td>
|
|
270
|
+
</tr>
|
|
271
|
+
<tr class="c-features__checklist">
|
|
272
|
+
<td>
|
|
273
|
+
{{ icon({ id: 'tick' }) }} Automated dry powder
|
|
274
|
+
</td>
|
|
275
|
+
<td class="u-grey-step-1">
|
|
276
|
+
{{ icon({ id: 'cross' }) }} Automated dry powder
|
|
277
|
+
</td>
|
|
278
|
+
<td class="u-grey-step-1">
|
|
279
|
+
{{ icon({ id: 'cross' }) }} Automated dry powder
|
|
280
|
+
</td>
|
|
281
|
+
</tr>
|
|
282
|
+
<tr class="c-features__checklist">
|
|
283
|
+
<td>
|
|
284
|
+
{{ icon({ id: 'tick' }) }} Manual wet
|
|
285
|
+
</td>
|
|
286
|
+
<td>
|
|
287
|
+
{{ icon({ id: 'tick' }) }} Manual wet
|
|
288
|
+
</td>
|
|
289
|
+
<td>
|
|
290
|
+
{{ icon({ id: 'tick' }) }} Manual wet
|
|
291
|
+
</td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr class="c-features__checklist c-features__checklist--last">
|
|
294
|
+
<td class="u-grey-step-1">
|
|
295
|
+
{{ icon({ id: 'cross' }) }} Manual dry powder
|
|
296
|
+
</td>
|
|
297
|
+
<td>
|
|
298
|
+
{{ icon({ id: 'tick' }) }} Manual dry powder
|
|
299
|
+
</td>
|
|
300
|
+
<td>
|
|
301
|
+
{{ icon({ id: 'tick' }) }} <span>Manual dry powder</span>
|
|
302
|
+
</td>
|
|
303
|
+
</tr>
|
|
304
|
+
<tr class="c-features__text">
|
|
305
|
+
<td>
|
|
306
|
+
Advanced method development and comparison software
|
|
307
|
+
</td>
|
|
308
|
+
<td>
|
|
309
|
+
Advanced method development and comparison software
|
|
310
|
+
</td>
|
|
311
|
+
<td>
|
|
312
|
+
-
|
|
313
|
+
</td>
|
|
314
|
+
</tr>
|
|
315
|
+
<tr class="c-features__text">
|
|
316
|
+
<td>
|
|
317
|
+
Advanced data quality assessment and reporting software
|
|
318
|
+
</td>
|
|
319
|
+
<td>
|
|
320
|
+
Advanced data quality assessment and reporting software
|
|
321
|
+
</td>
|
|
322
|
+
<td>
|
|
323
|
+
-
|
|
324
|
+
</td>
|
|
325
|
+
</tr>
|
|
326
|
+
<tr class="c-features__text">
|
|
327
|
+
<td>
|
|
328
|
+
IQ/OQ validation
|
|
329
|
+
</td>
|
|
330
|
+
<td>
|
|
331
|
+
-
|
|
332
|
+
</td>
|
|
333
|
+
<td>
|
|
334
|
+
-
|
|
335
|
+
</td>
|
|
336
|
+
</tr>
|
|
337
|
+
<tr class="c-features__text">
|
|
338
|
+
<td>
|
|
339
|
+
21 CFR Part 11 support
|
|
340
|
+
</td>
|
|
341
|
+
<td>
|
|
342
|
+
-
|
|
343
|
+
</td>
|
|
344
|
+
<td>
|
|
345
|
+
-
|
|
346
|
+
</td>
|
|
347
|
+
</tr>
|
|
348
|
+
</tbody>
|
|
349
|
+
<tfoot>
|
|
350
|
+
<tr>
|
|
351
|
+
{% for product in params.products %}
|
|
352
|
+
<td>
|
|
353
|
+
{{ button({ label: 'Request a quote', type: 'span', inline: true }) }}
|
|
354
|
+
</td>
|
|
355
|
+
{% endfor %}
|
|
356
|
+
</tr>
|
|
357
|
+
</tfoot>
|
|
358
|
+
</table>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
.c-features {
|
|
2
|
+
max-width: $wrapper;
|
|
3
|
+
@include step(-1);
|
|
4
|
+
|
|
5
|
+
&__wrapper {
|
|
6
|
+
overflow: auto;
|
|
7
|
+
width: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&__wrapper .c-table {
|
|
11
|
+
width: 100%;
|
|
12
|
+
table-layout: fixed;
|
|
13
|
+
|
|
14
|
+
@media (min-width: 60em) {
|
|
15
|
+
min-width: $wrapper;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__title {
|
|
20
|
+
@include step();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__product {
|
|
24
|
+
padding-bottom: 0 !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__introduction td {
|
|
28
|
+
color: color('green');
|
|
29
|
+
font-weight: weight('bold');
|
|
30
|
+
@include padding-top('2xs');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__label-text td {
|
|
34
|
+
@include flow('3xs');
|
|
35
|
+
|
|
36
|
+
span {
|
|
37
|
+
display: block;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__checklist-title th {
|
|
42
|
+
color: inherit;
|
|
43
|
+
background: transparent !important;
|
|
44
|
+
padding-bottom: 0 !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
tr.c-features__checklist:nth-last-child {
|
|
48
|
+
background: red;
|
|
49
|
+
@include padding-bottom('m');
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&__checklist {
|
|
53
|
+
td {
|
|
54
|
+
@include padding-top('3xs');
|
|
55
|
+
padding-bottom: 0;
|
|
56
|
+
vertical-align: middle;
|
|
57
|
+
line-height: 20px;
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
height: 16px;
|
|
61
|
+
width: 16px;
|
|
62
|
+
vertical-align: middle;
|
|
63
|
+
display: inline-block;
|
|
64
|
+
margin-bottom: 2px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&--last {
|
|
69
|
+
td {
|
|
70
|
+
@include padding-bottom('m');
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&__mobile {
|
|
76
|
+
display: none;
|
|
77
|
+
|
|
78
|
+
& > * + * {
|
|
79
|
+
@include margin-top('m-l');
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.c-table {
|
|
83
|
+
table-layout: fixed;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media (max-width: 40em) {
|
|
88
|
+
&__mobile {
|
|
89
|
+
display: block;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&__wrapper {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
thead img {
|
|
98
|
+
@include space('max-height', '3xl');
|
|
99
|
+
object-fit: contain;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -183,7 +183,12 @@
|
|
|
183
183
|
width: 100%;
|
|
184
184
|
|
|
185
185
|
&:after {
|
|
186
|
-
background: linear-gradient(270deg,
|
|
186
|
+
background: linear-gradient(270deg,
|
|
187
|
+
color('green') -12%,
|
|
188
|
+
color('blue') 11%,
|
|
189
|
+
color('petrol') 43%,
|
|
190
|
+
color('petrol') 70%,
|
|
191
|
+
color('petrol', 'step--1') 100%);
|
|
187
192
|
content: '';
|
|
188
193
|
position: absolute;
|
|
189
194
|
width: 100vw;
|
|
@@ -192,6 +197,15 @@
|
|
|
192
197
|
top: 0;
|
|
193
198
|
transform: translateX(-50%);
|
|
194
199
|
z-index: -2;
|
|
200
|
+
|
|
201
|
+
// Hack for IE11
|
|
202
|
+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
203
|
+
background: linear-gradient(270deg,
|
|
204
|
+
color('green') -12%,
|
|
205
|
+
color('blue') 11%,
|
|
206
|
+
color('petrol') 43%,
|
|
207
|
+
color('petrol', 'step--1') 100%);
|
|
208
|
+
}
|
|
195
209
|
}
|
|
196
210
|
|
|
197
211
|
ul {
|
|
@@ -83,6 +83,19 @@
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
&--features {
|
|
87
|
+
thead th,
|
|
88
|
+
tbody td,
|
|
89
|
+
tfoot td {
|
|
90
|
+
background: transparent;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
thead th {
|
|
94
|
+
color: inherit;
|
|
95
|
+
font-weight: weight();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
86
99
|
@media (min-width: 30em) {
|
|
87
100
|
.c-icon {
|
|
88
101
|
font-size: 1.5rem;
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
{{ libraryList('Logo', '/brand/logo/', page.url) }}
|
|
11
11
|
{{ libraryList('Colors', '/brand/colors/', page.url) }}
|
|
12
12
|
{{ libraryList('Typography', '/brand/typography/', page.url) }}
|
|
13
|
-
{{ libraryList('
|
|
13
|
+
{{ libraryList('Photography', '/brand/images/', page.url) }}
|
|
14
|
+
{{ libraryList('Illustration', '/brand/illustration/', page.url) }}
|
|
14
15
|
</ul>
|
|
15
16
|
{# <h3>Brand identity</h3>
|
|
16
17
|
<ul>
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
<a href="/prototype/products">Products</a>
|
|
5
5
|
</li>
|
|
6
6
|
<li>
|
|
7
|
-
<a href="/prototype/
|
|
7
|
+
<a href="/prototype/sections">Solutions</a>
|
|
8
8
|
</li>
|
|
9
9
|
<li>
|
|
10
|
-
<a href="">
|
|
10
|
+
<a href="">CRO services</a>
|
|
11
11
|
</li>
|
|
12
12
|
<li>
|
|
13
13
|
<a href="/prototype/webinars">Webinars and events</a>
|
|
@@ -15,6 +15,9 @@
|
|
|
15
15
|
<li>
|
|
16
16
|
<a href="">Resources</a>
|
|
17
17
|
</li>
|
|
18
|
+
<li>
|
|
19
|
+
<a href="">Support & downloads</a>
|
|
20
|
+
</li>
|
|
18
21
|
<li class="c-header__push">
|
|
19
22
|
<a href="">Log in</a>
|
|
20
23
|
</li>
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
@import '~comp/scroll-spy/scroll-spy.scss';
|
|
24
24
|
@import '~comp/series/series.scss';
|
|
25
25
|
@import '~comp/comparison-table/comparison-table.scss';
|
|
26
|
+
@import '~comp/features-table/features-table.scss';
|
|
26
27
|
@import '~comp/meta-box/meta-box.scss';
|
|
27
28
|
@import '~comp/slat/slat.scss';
|
|
28
29
|
@import '~comp/hero/hero.scss';
|
|
@@ -321,10 +321,13 @@
|
|
|
321
321
|
}
|
|
322
322
|
|
|
323
323
|
&__swatch-grid--has-labels {
|
|
324
|
-
grid-template-columns: 15em auto;
|
|
325
|
-
grid-template-rows: auto;
|
|
326
324
|
grid-auto-flow: row;
|
|
327
325
|
|
|
326
|
+
@media only screen and (min-width: 40em) {
|
|
327
|
+
grid-template-columns: minmax(15%, 15em) auto;
|
|
328
|
+
grid-template-rows: auto;
|
|
329
|
+
}
|
|
330
|
+
|
|
328
331
|
@media only screen and (min-width:1000px) {
|
|
329
332
|
grid-auto-flow: column;
|
|
330
333
|
grid-template-columns: repeat(5, 1fr);
|
|
@@ -571,6 +574,16 @@
|
|
|
571
574
|
|
|
572
575
|
}
|
|
573
576
|
|
|
577
|
+
&__illustration-grid {
|
|
578
|
+
display:grid;
|
|
579
|
+
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
|
|
580
|
+
gap:var(--gutter);
|
|
581
|
+
|
|
582
|
+
& :nth-child(odd):nth-last-child(3) {
|
|
583
|
+
grid-column: 1/-1;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
|
|
574
587
|
.c-alert ul li {
|
|
575
588
|
list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;
|
|
576
589
|
margin-left: 1em;
|