@madgex/design-system 1.21.6 → 1.21.8
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 +37 -5
- package/package.json +1 -1
- package/src/components/tabs/tabs.scss +11 -0
- package/src/helpers/edited-text/edited-text.njk +11 -0
- package/src/scss/core/_lists.scss +11 -3
- package/src/scss/helpers/_edited-text.scss +16 -9
package/dist/css/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Do not edit directly
|
|
3
|
-
Generated on
|
|
3
|
+
Generated on Tue, 20 Aug 2019 11:39:53 GMT
|
|
4
4
|
*/
|
|
5
5
|
html,
|
|
6
6
|
body,
|
|
@@ -525,14 +525,19 @@ body {
|
|
|
525
525
|
margin: 0 0 20px 0;
|
|
526
526
|
padding: 0;
|
|
527
527
|
list-style-type: none;
|
|
528
|
-
list-style-position:
|
|
528
|
+
list-style-position: inside;
|
|
529
529
|
}
|
|
530
530
|
|
|
531
531
|
.mds-list__item {
|
|
532
|
-
margin-bottom:
|
|
532
|
+
margin-bottom: 4px;
|
|
533
533
|
margin-left: 16px;
|
|
534
534
|
}
|
|
535
535
|
|
|
536
|
+
.mds-list--bullet,
|
|
537
|
+
.mds-list--number {
|
|
538
|
+
margin-left: 12px;
|
|
539
|
+
}
|
|
540
|
+
|
|
536
541
|
.mds-list--bullet {
|
|
537
542
|
list-style-type: disc;
|
|
538
543
|
}
|
|
@@ -544,6 +549,7 @@ body {
|
|
|
544
549
|
.mds-list--border {
|
|
545
550
|
border-left: 5px solid #f8f8f8;
|
|
546
551
|
padding-left: 20px;
|
|
552
|
+
margin-left: 0;
|
|
547
553
|
}
|
|
548
554
|
|
|
549
555
|
.mds-list__key,
|
|
@@ -560,9 +566,14 @@ body {
|
|
|
560
566
|
margin-bottom: 12px;
|
|
561
567
|
}
|
|
562
568
|
|
|
569
|
+
.mds-list--inline {
|
|
570
|
+
margin-left: 0;
|
|
571
|
+
}
|
|
572
|
+
|
|
563
573
|
.mds-list--inline li {
|
|
564
574
|
display: inline-block;
|
|
565
575
|
margin-bottom: 0;
|
|
576
|
+
margin-left: 0;
|
|
566
577
|
margin-right: 8px;
|
|
567
578
|
}
|
|
568
579
|
|
|
@@ -1518,6 +1529,13 @@ body {
|
|
|
1518
1529
|
|
|
1519
1530
|
.js .mds-tabs__list-item {
|
|
1520
1531
|
display: inline-block;
|
|
1532
|
+
width: 50%;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
@media (min-width: 37.5em) {
|
|
1536
|
+
.js .mds-tabs__list-item {
|
|
1537
|
+
width: auto;
|
|
1538
|
+
}
|
|
1521
1539
|
}
|
|
1522
1540
|
|
|
1523
1541
|
.mds-tabs__tab {
|
|
@@ -1526,7 +1544,9 @@ body {
|
|
|
1526
1544
|
}
|
|
1527
1545
|
|
|
1528
1546
|
.js .mds-tabs__tab {
|
|
1547
|
+
width: 100%;
|
|
1529
1548
|
text-decoration: none;
|
|
1549
|
+
text-align: center;
|
|
1530
1550
|
margin-right: 4px;
|
|
1531
1551
|
margin-bottom: 0;
|
|
1532
1552
|
padding: 28px 32px;
|
|
@@ -1534,6 +1554,12 @@ body {
|
|
|
1534
1554
|
padding-bottom: 20px;
|
|
1535
1555
|
}
|
|
1536
1556
|
|
|
1557
|
+
@media (min-width: 37.5em) {
|
|
1558
|
+
.js .mds-tabs__tab {
|
|
1559
|
+
text-align: left;
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1537
1563
|
.js .mds-tabs__tab.mds-tabs__tab--selected {
|
|
1538
1564
|
border-bottom: 6px solid #1b75bb;
|
|
1539
1565
|
color: #222222;
|
|
@@ -4663,7 +4689,7 @@ body {
|
|
|
4663
4689
|
|
|
4664
4690
|
.mds-edited-text ul,
|
|
4665
4691
|
.mds-edited-text ol {
|
|
4666
|
-
margin: 0 0 20px
|
|
4692
|
+
margin: 0 0 20px 12px;
|
|
4667
4693
|
padding: 0;
|
|
4668
4694
|
list-style-position: outside;
|
|
4669
4695
|
}
|
|
@@ -4684,6 +4710,12 @@ body {
|
|
|
4684
4710
|
}
|
|
4685
4711
|
|
|
4686
4712
|
.mds-edited-text li {
|
|
4687
|
-
margin-bottom:
|
|
4713
|
+
margin-bottom: 4px;
|
|
4688
4714
|
margin-left: 16px;
|
|
4689
4715
|
}
|
|
4716
|
+
|
|
4717
|
+
.mds-edited-text.mds-font-body-copy-bulk p,
|
|
4718
|
+
.mds-font-body-copy-bulk .mds-edited-text p,
|
|
4719
|
+
.mds-edited-text .mds-font-body-copy-bulk p {
|
|
4720
|
+
margin-bottom: 16px;
|
|
4721
|
+
}
|
package/package.json
CHANGED
|
@@ -13,7 +13,12 @@
|
|
|
13
13
|
|
|
14
14
|
.js .mds-tabs__list-item {
|
|
15
15
|
display: inline-block;
|
|
16
|
+
width: 50%;
|
|
16
17
|
@extend .mds-font-great-primer;
|
|
18
|
+
|
|
19
|
+
@include mq($from: $mds-size-breakpoint-md) {
|
|
20
|
+
width: auto;
|
|
21
|
+
}
|
|
17
22
|
}
|
|
18
23
|
|
|
19
24
|
.mds-tabs__tab {
|
|
@@ -21,12 +26,18 @@
|
|
|
21
26
|
margin-bottom: $mds-size-baseline * 2;
|
|
22
27
|
|
|
23
28
|
.js & {
|
|
29
|
+
width: 100%;
|
|
24
30
|
text-decoration: none;
|
|
31
|
+
text-align: center;
|
|
25
32
|
margin-right: $mds-size-baseline;
|
|
26
33
|
margin-bottom: 0;
|
|
27
34
|
padding: $mds-size-surface-padding;
|
|
28
35
|
padding-top: $mds-size-baseline * 6;
|
|
29
36
|
padding-bottom: $mds-size-baseline * 5;
|
|
37
|
+
|
|
38
|
+
@include mq($from: $mds-size-breakpoint-md) {
|
|
39
|
+
text-align: left;
|
|
40
|
+
}
|
|
30
41
|
}
|
|
31
42
|
}
|
|
32
43
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
<h4>Lists:</h4>
|
|
1
2
|
<div class="mds-edited-text">
|
|
2
3
|
<ol>
|
|
3
4
|
<li>
|
|
@@ -25,4 +26,14 @@
|
|
|
25
26
|
<a href="#two">five</a>
|
|
26
27
|
</li>
|
|
27
28
|
</ol>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<h4>Paragraph (combined with font-body-copy-bulk):</h4>
|
|
32
|
+
<div class="mds-edited-text mds-font-body-copy-bulk">
|
|
33
|
+
<h3>Paragraph 1</h3>
|
|
34
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
|
|
35
|
+
<h3>Paragraph 2</h3>
|
|
36
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
|
|
37
|
+
<h3>Paragraph 3</h3>
|
|
38
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
|
|
28
39
|
</div>
|
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
margin: 0 0 ($mds-size-baseline * 5) 0;
|
|
3
3
|
padding: 0;
|
|
4
4
|
list-style-type: none;
|
|
5
|
-
list-style-position:
|
|
5
|
+
list-style-position: inside;
|
|
6
6
|
}
|
|
7
7
|
.mds-list__item {
|
|
8
|
-
margin-bottom: $mds-size-baseline
|
|
8
|
+
margin-bottom: $mds-size-baseline;
|
|
9
9
|
margin-left: $mds-size-baseline * 4;
|
|
10
10
|
}
|
|
11
|
+
.mds-list--bullet,
|
|
12
|
+
.mds-list--number {
|
|
13
|
+
margin-left: ($mds-size-baseline * 3);
|
|
14
|
+
}
|
|
11
15
|
|
|
12
16
|
.mds-list--bullet {
|
|
13
17
|
list-style-type: disc;
|
|
@@ -20,6 +24,7 @@
|
|
|
20
24
|
.mds-list--border {
|
|
21
25
|
border-left: 5px solid $mds-color-neutral-lightest;
|
|
22
26
|
padding-left: $mds-size-baseline * 5;
|
|
27
|
+
margin-left: 0;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
.mds-list__key,
|
|
@@ -34,10 +39,13 @@
|
|
|
34
39
|
.mds-list__value {
|
|
35
40
|
margin-bottom: $mds-size-baseline * 3;
|
|
36
41
|
}
|
|
37
|
-
|
|
42
|
+
.mds-list--inline {
|
|
43
|
+
margin-left: 0;
|
|
44
|
+
}
|
|
38
45
|
.mds-list--inline li {
|
|
39
46
|
display: inline-block;
|
|
40
47
|
margin-bottom: 0;
|
|
48
|
+
margin-left: 0;
|
|
41
49
|
margin-right: $mds-size-baseline * 2;
|
|
42
50
|
}
|
|
43
51
|
|
|
@@ -1,22 +1,29 @@
|
|
|
1
1
|
.mds-edited-text {
|
|
2
|
-
ul,
|
|
3
|
-
ol {
|
|
4
|
-
margin: 0 0 ($mds-size-baseline * 5)
|
|
2
|
+
& ul,
|
|
3
|
+
& ol {
|
|
4
|
+
margin: 0 0 ($mds-size-baseline * 5) ($mds-size-baseline * 3);
|
|
5
5
|
padding: 0;
|
|
6
6
|
list-style-position: outside;
|
|
7
|
-
ul,
|
|
8
|
-
ol {
|
|
7
|
+
& ul,
|
|
8
|
+
& ol {
|
|
9
9
|
margin: ($mds-size-baseline * 2) 0 0 0;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
-
ul {
|
|
12
|
+
& ul {
|
|
13
13
|
list-style-type: disc;
|
|
14
14
|
}
|
|
15
|
-
ol {
|
|
15
|
+
& ol {
|
|
16
16
|
list-style-type: decimal;
|
|
17
17
|
}
|
|
18
|
-
li {
|
|
19
|
-
margin-bottom: $mds-size-baseline
|
|
18
|
+
& li {
|
|
19
|
+
margin-bottom: $mds-size-baseline;
|
|
20
20
|
margin-left: $mds-size-baseline * 4;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
+
.mds-edited-text.mds-font-body-copy-bulk,
|
|
24
|
+
.mds-font-body-copy-bulk .mds-edited-text,
|
|
25
|
+
.mds-edited-text .mds-font-body-copy-bulk {
|
|
26
|
+
& p {
|
|
27
|
+
margin-bottom: $mds-size-baseline * 4;
|
|
28
|
+
}
|
|
29
|
+
}
|