@madgex/design-system 1.15.6 → 1.16.0
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/_tokens/css/_tokens.css +1 -1
- package/dist/_tokens/js/_tokens-module.js +1 -1
- package/dist/_tokens/scss/_tokens.scss +1 -1
- package/dist/css/index.css +15 -1
- package/package.json +1 -1
- package/src/layout/containers/README.md +2 -0
- package/src/layout/containers/containers.njk +5 -2
- package/src/scss/core/_containers.scss +14 -0
package/dist/css/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Do not edit directly
|
|
3
|
-
Generated on Fri, 12 Jul 2019
|
|
3
|
+
Generated on Fri, 12 Jul 2019 11:31:23 GMT
|
|
4
4
|
*/
|
|
5
5
|
html,
|
|
6
6
|
body,
|
|
@@ -489,6 +489,20 @@ body {
|
|
|
489
489
|
padding: 28px 32px;
|
|
490
490
|
}
|
|
491
491
|
|
|
492
|
+
.mds-fixed-container {
|
|
493
|
+
width: 100%;
|
|
494
|
+
background: #f8f8f8;
|
|
495
|
+
position: fixed;
|
|
496
|
+
left: 0;
|
|
497
|
+
bottom: 0;
|
|
498
|
+
z-index: 5;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.mds-fixed-container--top {
|
|
502
|
+
bottom: auto;
|
|
503
|
+
top: 0;
|
|
504
|
+
}
|
|
505
|
+
|
|
492
506
|
.mds-list {
|
|
493
507
|
margin: 0 0 20px 0;
|
|
494
508
|
padding: 0;
|
package/package.json
CHANGED
|
@@ -4,3 +4,5 @@ Class `mds-site-container` should be added right after the body, it contains all
|
|
|
4
4
|
`mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages
|
|
5
5
|
|
|
6
6
|
`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.
|
|
7
|
+
|
|
8
|
+
To add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="mds-site-container container-example">
|
|
1
|
+
<div class="mds-site-container container-example" style="margin: 80px 0;">
|
|
2
2
|
<div class="mds-wrapper">
|
|
3
3
|
<div class="content-example">
|
|
4
4
|
<div class="mds-surface">
|
|
@@ -10,4 +10,7 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
|
-
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="mds-fixed-container mds-padding-b5 mds-text-align-center">This a fixed container at the bottom</div>
|
|
16
|
+
<div class="mds-fixed-container mds-fixed-container--top mds-padding-b5 mds-text-align-center">This a fixed container at the top</div>
|
|
@@ -26,3 +26,17 @@ body {
|
|
|
26
26
|
.mds-surface__inner {
|
|
27
27
|
padding: $mds-size-surface-padding;
|
|
28
28
|
}
|
|
29
|
+
|
|
30
|
+
.mds-fixed-container {
|
|
31
|
+
width: 100%;
|
|
32
|
+
background: $mds-color-neutral-lightest;
|
|
33
|
+
position: fixed;
|
|
34
|
+
left: 0;
|
|
35
|
+
bottom: 0;
|
|
36
|
+
z-index: 5;
|
|
37
|
+
|
|
38
|
+
&--top {
|
|
39
|
+
bottom: auto;
|
|
40
|
+
top: 0;
|
|
41
|
+
}
|
|
42
|
+
}
|