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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "1.2.11",
3
+ "version": "1.2.12",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
@@ -52,7 +52,6 @@
52
52
  @include space('max-height', '3xl');
53
53
  @include margin(0, 'auto');
54
54
  object-fit: contain;
55
- mix-blend-mode: multiply;
56
55
  }
57
56
 
58
57
  p {
@@ -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&amp;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"> &nbsp;</strong><strong>Works with&nbsp;<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&amp;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&amp;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&amp;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&amp;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('u-bg-white', !isIntersecting);
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
- ![alt text][login]
28
+ ![An illustration of several small people sitting and standing around an oversized laptop][login]
29
29
 
30
- ![alt text][thankyou]
30
+ ![An illustration of several small people carrying an oversized envelope][thankyou]
31
31
 
32
- ![alt text][confirm]
32
+ ![An illustration of one person welcoming another through a doorway, with golden light on the other side][confirm]
33
33
 
34
- ![alt text][support]
34
+ ![An illustration of people helping each other up a staircase][support]
35
35
 
36
- ![alt text][opt-in]
36
+ ![An illustration of a postal worker delivering a speech bubble to a mother and child][opt-in]
37
37
 
38
- ![alt text][404]
38
+ ![An illustration of a person stepping through an empty frame of an oversized web browser window][404]
39
39
 
40
- ![alt text][500]
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://www.malvernpanalytical.com/resource/svg/login3.svg
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