mp-design-system 1.2.11 → 1.2.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/build/js/app.js +1 -1
- package/dist/build/js/app.js.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/comparison-table/comparison-table.scss +0 -1
- package/src/_includes/components/internal-nav/internal-nav.njk +1 -6
- package/src/_includes/components/internal-nav/internal-nav.scss +10 -0
- package/src/assets/js/imports/internal-nav.js +1 -1
- package/src/brand/illustration.md +8 -8
package/package.json
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
<figure class="mp c-hero c-hero--image"><div class="u-wrap"><nav class="c-breadcrumb" aria-label="Breadcrumb"><ol class="c-breadcrumb__list" role="list"><li class="c-breadcrumb__item" role="listitem"><a href="/en/products" class="c-breadcrumb__link">Products</a></li><li class="c-breadcrumb__item" role="listitem"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down"><use xlink:href="/resource/svg/sprite.svg#chevron-down"></use></svg><a href="/en/products/product-range" class="c-breadcrumb__link">Product range</a></li><li class="c-breadcrumb__item" role="listitem"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down"><use xlink:href="/resource/svg/sprite.svg#chevron-down"></use></svg><span class="c-breadcrumb__current" aria-current="Mastersizer range">Mastersizer range</span></li></ol></nav><div class="c-hero__content"><header class="u-flow--xs"><h1 class="c-h c-h--page-title">Mastersizer range</h1><p class="u-step-1">World's most popular particle size analyzers</p></header><a id="brochureDownload" class="mp c-twi u-link c-twi--left" name="downloadTracking" href="/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf" onclick='dataLayer.push({event:"brochure_download",tcmId:"58994",filePath:"/en/products/product-range/mastersizer-range",type:"1"}),_paq.push(["trackEvent","Button click","Download brochure","/en/products/product-range/mastersizer-range"]),stc("1","58994","/en/products/product-range/mastersizer-range")' download="Mastersizer_range" target="_blank"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file"><use xlink:href="/resource/svg/sprite.svg#file"></use></svg><span>Download brochure</span></a></div></div><div class="c-hero__image-bg" style="background-image:url(https://p3.aprimocdn.net/malvernpanalytical/0492be50-1fa5-4f7b-89a6-ad9e00b5d058/636216826573577799SD_Original%20file.jpg?quality=60&width=1920)"></div></figure>
|
2
|
-
|
3
1
|
{%- from "components/button/macro.njk" import button -%}
|
4
2
|
|
5
3
|
<nav class="mp c-internal-nav {{ params.classes }}" aria-label="In-page">
|
@@ -21,7 +19,4 @@
|
|
21
19
|
{% endif %}
|
22
20
|
</ul>
|
23
21
|
</div>
|
24
|
-
</nav>
|
25
|
-
|
26
|
-
|
27
|
-
<div class="mp u-wrap u-pad-top-s u-margin-bottom-l-xl"><div class="o-grid o-grid--of-two-late u-pad-bottom-s"><div><div class="mp o-prose u-flow--prose"><p>The Mastersizer range of laser diffraction particle size analyzers set the standard for delivering rapid, accurate particle size distributions for both wet and dry dispersions. From assessing product uniformity and solubility, through to optimising packing density to improve final product performance and controlling powder flowability to increase manufacturing efficiency, particle size analysis is critical to understanding and controlling a wide range of properties. The Mastersizer range, with its intuitive software and industry-leading design and ergonomics, enables users to make these particle sizing measurements fast and routine.</p><p><strong><img src="https://p3.aprimocdn.net/malvernpanalytical/a2d29b47-f548-4104-82ad-ada400c38338/637353357645078214LB_Original%20file.png" style="float:left;width:40px;height:48px"> </strong><strong>Works with <a title="Analytical Instrument Qualification" href="/en/industries/pharmaceuticals/compliance-analytical-instrument-qualification">OmniTrust</a>: Malvern Panalytical's compliance solution for the regulated environment</strong></p></div><div class="u-margin-top-m"><a href="/en/products/request-a-quote?product=9446" class="mp c-button mp c-button c-button--inline">Request a quote</a><a href="/en/products/request-a-demonstration?product=9446" class="mp c-button mp c-button c-button--inline c-button--blue">Request a demo</a><a href="/en/about-us/contact-us/sales?product=9446" class="mp c-button mp c-button c-button--inline c-button--outline-green">Contact sales</a></div></div><div><figure class="c-embed"><div class="c-embed__wrapper"><iframe title="Video title" width="640" height="360" src="https://www.youtube.com/embed/Q4H7EdHFghs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" enablejsapi="true"></iframe></div></figure></div></div><div id="product-comparison-table" class="mp c-comparison u-margin-y-l"><div class="c-comparison__mobile"><article><div class="c-comparison__content"><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/39514ce3-3c03-4457-bd60-ad9e000133fb/636216692140429322FO_Original%20file.jpg?quality=60&width=200" alt="Mastersizer 3000" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000</h3><p>Delivering the data you need for outcomes you can trust</p><span class="mp c-button u-md-hidden">More details</span></a></div><table class="c-table"><tbody><tr><td>Particle size range</td><td>0.01µm - 3500µm</td></tr><tr class="c-table__title"><th colspan="2">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="2">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></article><article><div class="c-comparison__content"><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/c975939f-9b34-4cf8-9c05-ad9e00014d61/636216692720089326GR_Original%20file.jpg?quality=60&width=200" alt="Mastersizer 3000E" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000E</h3><p>Entry level particle size analyzer</p><span class="mp c-button u-md-hidden">More details</span></a></div><table class="c-table"><tbody><tr><td>Particle size range</td><td>0.1µm - 1000µm</td></tr><tr class="c-table__title"><th colspan="2">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="2">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></article></div><div class="c-comparison__wrapper"><table class="c-table c-table--comparison"><thead><tr><th></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/39514ce3-3c03-4457-bd60-ad9e000133fb/636216692140429322FO_Original%20file.jpg?quality=60&width=200" alt="Mastersizer 3000" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000</h3><p>Delivering the data you need for outcomes you can trust</p><span class="mp c-button u-md-hidden">More details</span></a></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/c975939f-9b34-4cf8-9c05-ad9e00014d61/636216692720089326GR_Original%20file.jpg?quality=60&width=200" alt="Mastersizer 3000E" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000E</h3><p>Entry level particle size analyzer</p><span class="mp c-button u-md-hidden">More details</span></a></th></tr><tr><th></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--tight">More details</a></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--tight">More details</a></th></tr></thead><tbody><tr><td class="title">Particle size range</td><td>0.01µm - 3500µm</td><td>0.1µm - 1000µm</td></tr><tr class="c-table__title"><th colspan="3" class="title">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="3" class="title">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></div></div></div>
|
22
|
+
</nav>
|
@@ -3,6 +3,14 @@
|
|
3
3
|
border-bottom: 1px solid color('grey', 'step-2');
|
4
4
|
transition: 300ms background-color;
|
5
5
|
|
6
|
+
&--stuck {
|
7
|
+
@extend .u-bg-white;
|
8
|
+
|
9
|
+
.c-internal-nav__title {
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
6
14
|
&__wrap {
|
7
15
|
@extend .u-wrap;
|
8
16
|
display: flex;
|
@@ -15,6 +23,8 @@
|
|
15
23
|
@include padding('s', 0);
|
16
24
|
flex-shrink: 0;
|
17
25
|
font-weight: bold;
|
26
|
+
transition: 300ms opacity;
|
27
|
+
opacity: 0;
|
18
28
|
}
|
19
29
|
|
20
30
|
&__list {
|
@@ -13,7 +13,7 @@ function InternalNav() {
|
|
13
13
|
|
14
14
|
const intersectionCallback = (entries, observer) => {
|
15
15
|
const isIntersecting = entries[0].isIntersecting;
|
16
|
-
internalNav.classList.toggle('
|
16
|
+
internalNav.classList.toggle('c-internal-nav--stuck', !isIntersecting);
|
17
17
|
};
|
18
18
|
|
19
19
|
const observer = new IntersectionObserver(intersectionCallback, observerOptions);
|
@@ -25,23 +25,23 @@ We have a library of pre-made characters which can be adapted for new designs, a
|
|
25
25
|
|
26
26
|
<div class="c-library__illustration-grid">
|
27
27
|
|
28
|
-
![
|
28
|
+
![An illustration of several small people sitting and standing around an oversized laptop][login]
|
29
29
|
|
30
|
-
![
|
30
|
+
![An illustration of several small people carrying an oversized envelope][thankyou]
|
31
31
|
|
32
|
-
![
|
32
|
+
![An illustration of one person welcoming another through a doorway, with golden light on the other side][confirm]
|
33
33
|
|
34
|
-
![
|
34
|
+
![An illustration of people helping each other up a staircase][support]
|
35
35
|
|
36
|
-
![
|
36
|
+
![An illustration of a postal worker delivering a speech bubble to a mother and child][opt-in]
|
37
37
|
|
38
|
-
![
|
38
|
+
![An illustration of a person stepping through an empty frame of an oversized web browser window][404]
|
39
39
|
|
40
|
-
![
|
40
|
+
![An illustration of several small people standing around an oversized janitor's warning sign][500]
|
41
41
|
|
42
42
|
</div>
|
43
43
|
|
44
|
-
[login]: https://
|
44
|
+
[login]: https://p3.aprimocdn.net/malvernpanalytical/192d2a88-af78-4670-a752-b0b90110745b/login3_Original%20file.svg
|
45
45
|
[thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
|
46
46
|
[support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
|
47
47
|
[opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
|