mp-design-system 0.6.1 → 0.7.2
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/js/app.js +6 -4
- package/dist/build/js/app.js.map +1 -1
- 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/campaign/campaign.config.js +3 -3
- package/src/_includes/components/campaign/campaign.scss +5 -1
- package/src/_includes/components/card/card.config.js +20 -0
- package/src/_includes/components/card/card.scss +11 -7
- package/src/_includes/components/comparison-table/comparison-table.scss +5 -0
- package/src/_includes/components/header/header.scss +1 -1
- package/src/_includes/components/product-signpost/product-signpost.njk +11 -9
- package/src/_includes/components/scroll-spy/scroll-spy.scss +4 -0
- package/src/_includes/components/table/table.scss +4 -0
- package/src/_includes/components/usp/usp.scss +2 -7
- package/src/_includes/includes/related-events.njk +1 -1
- package/src/_includes/includes/resources.njk +1 -1
- package/src/_includes/includes/system-header.njk +1 -1
- package/src/_includes/layout.njk +28 -4
- package/src/assets/js/app.js +2 -0
- package/src/assets/js/imports/scrollbar-width.js +15 -0
- package/src/assets/js/imports/utilities.js +10 -0
- package/src/assets/scss/components/gallery.scss +16 -18
- package/src/assets/scss/library.scss +6 -2
- package/src/assets/scss/tools/breakout.scss +2 -0
- package/src/assets/scss/tools/index.scss +2 -0
- package/src/assets/scss/utilities/hr.scss +4 -0
- package/src/components/css.md +3 -2
- package/src/components/utilities.md +122 -0
- package/src/patterns/grid-of-cards.njk +57 -21
- package/src/prototype/card-test.njk +147 -0
- package/src/prototype/index.njk +1 -1
- package/src/static/svg/logo-small.svg +1 -0
- package/src/static/svg/logo.svg +1 -1
package/package.json
CHANGED
@@ -24,19 +24,19 @@ module.exports = {
|
|
24
24
|
{
|
25
25
|
title: 'Petrol',
|
26
26
|
context: {
|
27
|
-
classes: 'c-
|
27
|
+
classes: 'c-campaign--petrol'
|
28
28
|
}
|
29
29
|
},
|
30
30
|
{
|
31
31
|
title: 'Blue',
|
32
32
|
context: {
|
33
|
-
classes: 'c-
|
33
|
+
classes: 'c-campaign--blue'
|
34
34
|
}
|
35
35
|
},
|
36
36
|
{
|
37
37
|
title: 'Orange',
|
38
38
|
context: {
|
39
|
-
classes: 'c-
|
39
|
+
classes: 'c-campaign--orange'
|
40
40
|
}
|
41
41
|
}
|
42
42
|
],
|
@@ -711,6 +711,26 @@ module.exports = {
|
|
711
711
|
]
|
712
712
|
}
|
713
713
|
}
|
714
|
+
},
|
715
|
+
{
|
716
|
+
title: 'Product card - single',
|
717
|
+
preview: 'cards-three',
|
718
|
+
context: {
|
719
|
+
theme: {
|
720
|
+
layout: 'single',
|
721
|
+
border: true
|
722
|
+
},
|
723
|
+
image: {
|
724
|
+
src: '/static/img/blog-page-image-1.jpg',
|
725
|
+
alt: 'Product image alt'
|
726
|
+
},
|
727
|
+
header: {
|
728
|
+
title: '凝胶渗透色谱仪OMNISEC系统'
|
729
|
+
},
|
730
|
+
body: {
|
731
|
+
content: '<p>确定聚合物材料的分子量、粒度和结构</p>'
|
732
|
+
}
|
733
|
+
}
|
714
734
|
}
|
715
735
|
],
|
716
736
|
|
@@ -62,14 +62,13 @@
|
|
62
62
|
&__primary {
|
63
63
|
display: flex;
|
64
64
|
flex-direction: column;
|
65
|
+
}
|
65
66
|
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
width: 100%;
|
72
|
-
}
|
67
|
+
&--layout-multi .c-card__wrapper,
|
68
|
+
&__primary {
|
69
|
+
// Required for IE
|
70
|
+
flex-shrink: 0;
|
71
|
+
width: 100%;
|
73
72
|
}
|
74
73
|
|
75
74
|
&--layout-multi {
|
@@ -193,6 +192,7 @@
|
|
193
192
|
&--layout-multi &__wrapper {
|
194
193
|
@include padding("s-m");
|
195
194
|
width: 100%;
|
195
|
+
justify-content: space-between;
|
196
196
|
}
|
197
197
|
|
198
198
|
&--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {
|
@@ -418,3 +418,7 @@
|
|
418
418
|
@include gap("s-l");
|
419
419
|
}
|
420
420
|
}
|
421
|
+
|
422
|
+
// IE11 fix
|
423
|
+
// This forces IE11 to use display:block instead of flex for single-column cards
|
424
|
+
_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<article class="mp c-product-signpost {{ params.classes }}">
|
2
2
|
<a class="c-product-signpost__link" href="{{ params.link }}">{{ params.title }}</a>
|
3
|
-
|
4
|
-
|
5
|
-
<
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
<
|
10
|
-
|
11
|
-
|
3
|
+
<div class="c-product-signpost__wrapper">
|
4
|
+
{% if params.image.src %}
|
5
|
+
<figure class="c-product-signpost__image">
|
6
|
+
<img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
|
7
|
+
</figure>
|
8
|
+
{% endif %}
|
9
|
+
<div class="u-flow--3xs">
|
10
|
+
<h2 class="c-h c-h--step-0">{{ params.title }}</h2>
|
11
|
+
<div class="o-prose">
|
12
|
+
{{ params.description | safe }}
|
13
|
+
</div>
|
12
14
|
</div>
|
13
15
|
</div>
|
14
16
|
</article>
|
@@ -2,9 +2,7 @@
|
|
2
2
|
@include padding('s-m');
|
3
3
|
border: 1px solid;
|
4
4
|
border-image-slice: 1;
|
5
|
-
border-image-source: linear-gradient(
|
6
|
-
rgba(color('blue'), 0.5),
|
7
|
-
rgba(color('green'), 0.5));
|
5
|
+
border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
|
8
6
|
position: relative;
|
9
7
|
|
10
8
|
&__title {
|
@@ -12,10 +10,7 @@
|
|
12
10
|
color: color('petrol');
|
13
11
|
|
14
12
|
@supports(-webkit-text-fill-color:transparent) {
|
15
|
-
background-image: -
|
16
|
-
0% 0%,100% 100%,
|
17
|
-
from(color('petrol')),
|
18
|
-
to(color('blue')));
|
13
|
+
background-image: linear-gradient(to right, color('petrol'), color('blue') );
|
19
14
|
-webkit-background-clip: text;
|
20
15
|
-webkit-text-fill-color: transparent;
|
21
16
|
display: inline-block;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<aside class="c-slat c-slat--grey c-slat--padded">
|
4
4
|
<div class="u-wrap u-flow">
|
5
5
|
<h3 class="c-h c-h--upper">Related events</h3>
|
6
|
-
<div class="o-grid o-grid--of-three">
|
6
|
+
<div class="o-grid o-grid--of-three o-grid--swipeable">
|
7
7
|
{{ card({
|
8
8
|
theme: {
|
9
9
|
layout: 'single',
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<aside class="mp c-slat c-slat--grey c-slat--padded">
|
4
4
|
<div class="u-wrap u-flow--xl">
|
5
5
|
<h2 class="c-h c-h--step-3">Related resources</h2>
|
6
|
-
<div class="o-grid o-grid--of-three">
|
6
|
+
<div class="o-grid o-grid--of-three o-grid--swipeable">
|
7
7
|
{{ card({
|
8
8
|
theme: {
|
9
9
|
layout: 'single',
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
<header class="c-library__header u-split">
|
4
4
|
<a class="c-library__logo" href="/">
|
5
|
-
<img src="/static/svg/logo.svg" alt="Home" />
|
5
|
+
<img src="/static/svg/logo-small.svg" alt="Home" />
|
6
6
|
<span class="c-library__logo-name">
|
7
7
|
{% for item in config.logo %}
|
8
8
|
<span>{{ item }}</span>
|
package/src/_includes/layout.njk
CHANGED
@@ -14,10 +14,31 @@
|
|
14
14
|
<meta property="og:image:alt" content="{{ config.name }}" />
|
15
15
|
<meta name="twitter:image" content="{{ config.openGraphImage }}" />
|
16
16
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
17
|
-
<script>
|
18
|
-
document.documentElement
|
19
|
-
|
20
|
-
|
17
|
+
<script>
|
18
|
+
if(document.documentElement){
|
19
|
+
document.documentElement.classList.add('has-js');
|
20
|
+
document.documentElement.classList.remove('no-js');
|
21
|
+
}
|
22
|
+
// Calculate the height of the sidebar so it doesn't cause double scrollbars
|
23
|
+
function debounce(func, wait, immediate) {
|
24
|
+
var timeout;
|
25
|
+
return function() {
|
26
|
+
var context = this, args = arguments;
|
27
|
+
var later = function() {
|
28
|
+
timeout = null;
|
29
|
+
if (!immediate) func.apply(context, args);
|
30
|
+
};
|
31
|
+
var callNow = immediate && !timeout;
|
32
|
+
clearTimeout(timeout);
|
33
|
+
timeout = setTimeout(later, wait);
|
34
|
+
if (callNow) func.apply(context, args);
|
35
|
+
};
|
36
|
+
};
|
37
|
+
var resizeSidebar = debounce(function() {
|
38
|
+
var headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
|
39
|
+
document.documentElement.style.setProperty('--headerHeight', headerHeight)
|
40
|
+
}, 250);
|
41
|
+
</script>
|
21
42
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
|
22
43
|
<link rel="stylesheet" href="/build/scss/main.css" />
|
23
44
|
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
|
@@ -30,12 +51,15 @@
|
|
30
51
|
<script src="/build/js/app.js"></script>
|
31
52
|
<script>
|
32
53
|
(function() {
|
54
|
+
// Prevent empty links from jumping to the top of page when clicked
|
33
55
|
var links = document.querySelectorAll('a[href=""],a[href="#"]');
|
34
56
|
for(var i = 0; links.length > i; i++) {
|
35
57
|
links[i].addEventListener('click', function(event) {
|
36
58
|
event.preventDefault();
|
37
59
|
})
|
38
60
|
}
|
61
|
+
window.addEventListener('resize', resizeSidebar);
|
62
|
+
resizeSidebar();
|
39
63
|
})();
|
40
64
|
</script>
|
41
65
|
</body>
|
package/src/assets/js/app.js
CHANGED
@@ -5,6 +5,7 @@ import Gallery from './imports/gallery';
|
|
5
5
|
import HeroPattern from './imports/hero-pattern';
|
6
6
|
import ResponsiveTable from './imports/responsive-table';
|
7
7
|
import ScrollSpy from './imports/scroll-spy';
|
8
|
+
import ScrollbarWidth from './imports/scrollbar-width';
|
8
9
|
import Tabs from './imports/tabs';
|
9
10
|
|
10
11
|
(() => {
|
@@ -23,4 +24,5 @@ import Tabs from './imports/tabs';
|
|
23
24
|
Tabs();
|
24
25
|
ScrollSpy();
|
25
26
|
ResponsiveTable();
|
27
|
+
ScrollbarWidth();
|
26
28
|
})();
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { debounce } from './utilities';
|
2
|
+
|
3
|
+
function ScrollbarWidth() {
|
4
|
+
setScrollbarWidth();
|
5
|
+
window.addEventListener('resize', debounce(setScrollbarWidth, 250));
|
6
|
+
}
|
7
|
+
|
8
|
+
function setScrollbarWidth() {
|
9
|
+
document.documentElement.style.setProperty(
|
10
|
+
'--scrollbarWidth',
|
11
|
+
window.innerWidth - document.body.clientWidth + 'px'
|
12
|
+
);
|
13
|
+
}
|
14
|
+
|
15
|
+
export default ScrollbarWidth;
|
@@ -15,6 +15,16 @@ export function userPrefersReducedMotion() {
|
|
15
15
|
return prefersReducedMotion;
|
16
16
|
}
|
17
17
|
|
18
|
+
export const debounce = (func, limit) => {
|
19
|
+
let wait = false;
|
20
|
+
return () => {
|
21
|
+
if (wait) return;
|
22
|
+
func();
|
23
|
+
wait = true;
|
24
|
+
setTimeout(() => wait = false, limit);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
18
28
|
export const lerp = (x, y, a) => x * (1 - a) + y * a;
|
19
29
|
export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
|
20
30
|
export const invlerp = (x, y, a) => clamp((a - x) / (y - x));
|
@@ -10,8 +10,13 @@
|
|
10
10
|
width: 100%;
|
11
11
|
|
12
12
|
img {
|
13
|
-
margin: 0 auto;
|
14
13
|
display: block;
|
14
|
+
margin: 0 auto;
|
15
|
+
|
16
|
+
@supports (object-fit:contain) {
|
17
|
+
max-height: 500px;
|
18
|
+
object-fit: contain;
|
19
|
+
}
|
15
20
|
}
|
16
21
|
|
17
22
|
&:not(.active) {
|
@@ -24,29 +29,22 @@
|
|
24
29
|
@include padding-bottom('s');
|
25
30
|
display: flex;
|
26
31
|
flex-direction: row;
|
27
|
-
flex-wrap:
|
28
|
-
|
29
|
-
|
30
|
-
scroll-snap-type: x mandatory;
|
31
|
-
overflow-x: auto;
|
32
|
+
flex-wrap: wrap;
|
33
|
+
gap: 2%;
|
34
|
+
gap: max(8px, 2%);
|
32
35
|
|
33
36
|
& > * {
|
34
37
|
background: color('grey', 'step-3');
|
35
|
-
|
36
|
-
max-height
|
37
|
-
min-width
|
38
|
-
|
39
|
-
width: auto;
|
40
|
-
scroll-snap-align: start;
|
41
|
-
|
42
|
-
& + * {
|
43
|
-
margin-left: var(--space-xs-s);
|
44
|
-
}
|
38
|
+
@include space('min-height', 'l');
|
39
|
+
@include space('max-height', '2xl');
|
40
|
+
@include space('min-width', 'l');
|
41
|
+
max-width: 10.75%;
|
45
42
|
|
46
43
|
img {
|
47
|
-
|
48
|
-
opacity: 0.
|
44
|
+
height: 100%;
|
45
|
+
opacity: 0.8;
|
49
46
|
object-fit: cover;
|
47
|
+
width: 100%;
|
50
48
|
}
|
51
49
|
|
52
50
|
&.active img {
|
@@ -71,7 +71,7 @@
|
|
71
71
|
@media only screen and (min-width: 600px) {
|
72
72
|
&--components &__body > * {
|
73
73
|
overflow-y: scroll;
|
74
|
-
height: calc(100vh -
|
74
|
+
height: calc( 100vh - var(--headerHeight) - 1px );
|
75
75
|
}
|
76
76
|
}
|
77
77
|
|
@@ -212,7 +212,11 @@
|
|
212
212
|
}
|
213
213
|
|
214
214
|
&__main {
|
215
|
-
overflow-y:
|
215
|
+
overflow-y: auto;
|
216
|
+
|
217
|
+
@media only screen and (min-width: 600px) {
|
218
|
+
overflow-y: scroll;
|
219
|
+
}
|
216
220
|
}
|
217
221
|
|
218
222
|
&__frame {
|
@@ -3,9 +3,11 @@
|
|
3
3
|
|
4
4
|
@mixin breakout($pad: 0) {
|
5
5
|
left: 50%;
|
6
|
+
left: calc( 50% + var(--scrollbarWidth)/2.0001 );
|
6
7
|
position: relative;
|
7
8
|
transform: translateX(-50vw);
|
8
9
|
width: 100vw;
|
10
|
+
width: calc( 100vw - var(--scrollbarWidth) );
|
9
11
|
padding-left: safe-space($pad);
|
10
12
|
padding-right: safe-space($pad);
|
11
13
|
}
|
@@ -137,6 +137,7 @@
|
|
137
137
|
|
138
138
|
@mixin hyphenated {
|
139
139
|
@media only screen and (max-width: 28rem) {
|
140
|
+
word-break: break-word;
|
140
141
|
-webkit-hyphens: auto;
|
141
142
|
-ms-hyphens: auto;
|
142
143
|
hyphens: auto;
|
@@ -144,6 +145,7 @@
|
|
144
145
|
|
145
146
|
@media only screen and (max-width: 70rem) {
|
146
147
|
[lang='de-DE'] & {
|
148
|
+
word-break: break-word;
|
147
149
|
-webkit-hyphens: auto;
|
148
150
|
-ms-hyphens: auto;
|
149
151
|
hyphens: auto;
|
package/src/components/css.md
CHANGED
@@ -31,8 +31,7 @@ Most of the CSS lives in this group. Each component is an encapsulated 'block' (
|
|
31
31
|
Utilities are classes that do one thing really well. For example: `.u-hidden` hides elements on the page in a non destructive way (still visible to screenreaders). There are auto-generated spacing, typography and colour classes to help compose a page (and prototype new components before refactoring them into the above groups). The `u-` prefix is used for utilities.
|
32
32
|
|
33
33
|
## BEM
|
34
|
-
|
35
|
-
BEM is used as a naming methodology, with `__` used for elements, and `--` used for modifiers.
|
34
|
+
We use BEM as a naming methodology, with `__` used for elements, and `--` used for modifiers.
|
36
35
|
|
37
36
|
```scss
|
38
37
|
/* Pattern */
|
@@ -57,6 +56,8 @@ BEM is used as a naming methodology, with `__` used for elements, and `--` used
|
|
57
56
|
}
|
58
57
|
```
|
59
58
|
|
59
|
+
For more information about BEM see [getbem.com](http://getbem.com/)
|
60
|
+
|
60
61
|
### SCSS variables vs. CSS custom properties
|
61
62
|
|
62
63
|
{{ config.name }} is designed to support IE11+, which leaves a large support gap for custom properties—sadly, polyfilling is patchy at best. For this reason, the design system relies more on SCSS variables than custom properties.
|
@@ -0,0 +1,122 @@
|
|
1
|
+
---
|
2
|
+
title: Utilities
|
3
|
+
layout: content-page
|
4
|
+
sidebar: components
|
5
|
+
---
|
6
|
+
|
7
|
+
These utility classes each do a single, simple job. They can be applied to any HTML element, and are designed to be used in a wide variety of contexts, when creating a new component or variant might not be required.
|
8
|
+
|
9
|
+
## Typography
|
10
|
+
|
11
|
+
More typography utility classes are documented on the [typography page](/components/typography).
|
12
|
+
|
13
|
+
```html
|
14
|
+
<div class="u-strong">Bold text</div>
|
15
|
+
```
|
16
|
+
|
17
|
+
```html
|
18
|
+
<div class="u-normal">Regular-weight (non-bold) text</div>
|
19
|
+
```
|
20
|
+
|
21
|
+
```html
|
22
|
+
<div class="u-text-center">Center-aligned text</div>
|
23
|
+
```
|
24
|
+
|
25
|
+
```html
|
26
|
+
<div class="u-ls">Standard letter-spacing (-0.01em)</div>
|
27
|
+
```
|
28
|
+
|
29
|
+
## Display
|
30
|
+
|
31
|
+
```html
|
32
|
+
<div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
|
33
|
+
```
|
34
|
+
|
35
|
+
```html
|
36
|
+
<div class="u-display-none">Entirely hidden</div>
|
37
|
+
```
|
38
|
+
|
39
|
+
```html
|
40
|
+
<div class="u-display-block">Block-level layout</div>
|
41
|
+
```
|
42
|
+
|
43
|
+
```html
|
44
|
+
<div class="u-display-inline-block">Inline-block-level layout</div>
|
45
|
+
```
|
46
|
+
|
47
|
+
```html
|
48
|
+
<div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>
|
49
|
+
```
|
50
|
+
|
51
|
+
## Layout
|
52
|
+
|
53
|
+
```html
|
54
|
+
<div class="u-float-right">Floated right</div>
|
55
|
+
```
|
56
|
+
|
57
|
+
```html
|
58
|
+
<div class="u-clear-both">Cleared from floats</div>
|
59
|
+
```
|
60
|
+
|
61
|
+
```html
|
62
|
+
<div class="u-relative">Relative positioning</div>
|
63
|
+
```
|
64
|
+
|
65
|
+
```html
|
66
|
+
<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
|
67
|
+
```
|
68
|
+
|
69
|
+
```html
|
70
|
+
<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
|
71
|
+
```
|
72
|
+
|
73
|
+
```html
|
74
|
+
<div class="u-split">
|
75
|
+
<p>Split: aligned left</p>
|
76
|
+
<a class="u-link">Aligned right</a>
|
77
|
+
</div>
|
78
|
+
The two child items will be aligned in a horizontal row
|
79
|
+
```
|
80
|
+
<div class="u-split u-pad-s u-border">
|
81
|
+
<p>Split: aligned left</p>
|
82
|
+
<a class="u-link">Aligned right</a>
|
83
|
+
</div>
|
84
|
+
|
85
|
+
## Padding and margins
|
86
|
+
|
87
|
+
More padding and margin utility classes are documented on the [space page](/components/space).
|
88
|
+
|
89
|
+
#### Syntax:
|
90
|
+
`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
|
91
|
+
|
92
|
+
Sizes | Directions
|
93
|
+
------|-----------
|
94
|
+
3xs | top
|
95
|
+
2xs | bottom
|
96
|
+
xs | left
|
97
|
+
s | right
|
98
|
+
m | y
|
99
|
+
l | x
|
100
|
+
xl |
|
101
|
+
2xl |
|
102
|
+
3xl |
|
103
|
+
4xl |
|
104
|
+
|
105
|
+
N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.
|
106
|
+
|
107
|
+
```html
|
108
|
+
<div class="u-pad-s">Small padding on all sides</div>
|
109
|
+
```
|
110
|
+
|
111
|
+
```html
|
112
|
+
<div class="u-margin-y-xl">Extra large margin on top and bottom</div>
|
113
|
+
```
|
114
|
+
|
115
|
+
```html
|
116
|
+
<div class="u-margin-left-m">Medium margin on left side only</div>
|
117
|
+
```
|
118
|
+
|
119
|
+
```html
|
120
|
+
<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
|
121
|
+
Grows from small padding on small screens, to xl padding on large screens
|
122
|
+
```
|