@madgex/design-system 1.21.2 → 1.21.4
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 +9 -1
- package/dist/_tokens/js/_tokens-module.js +179 -1
- package/dist/_tokens/scss/_tokens.scss +27 -1
- package/dist/assets/icons.svg +1 -1
- package/dist/css/index.css +61 -3
- package/package.json +1 -1
- package/src/components/icons/icons.njk +30 -0
- package/src/components/tabs/_template.njk +1 -1
- package/src/components/tabs/tabs.config.js +2 -0
- package/src/helpers/edited-text/README.md +5 -0
- package/src/helpers/edited-text/edited-text.njk +28 -0
- package/src/icons/social-facebook.svg +32 -12
- package/src/icons/social-linkedin.svg +39 -16
- package/src/icons/social-twitter.svg +12 -12
- package/src/scss/components/__index.scss +5 -0
- package/src/scss/core/_lists.scss +12 -6
- package/src/scss/helpers/__index.scss +1 -0
- package/src/scss/helpers/_edited-text.scss +22 -0
- package/src/scss/index.scss +2 -7
- package/src/tokens/font.json +34 -0
- package/src/typography/font-types.njk +3 -0
- package/src/typography/lists.njk +29 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Aug 2019 16:50:36 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -96,6 +96,14 @@
|
|
|
96
96
|
--mds-font-type-body-copy-md-line-height: 1.34;
|
|
97
97
|
--mds-font-type-body-copy-lg-size: 16px;
|
|
98
98
|
--mds-font-type-body-copy-lg-line-height: 1.38;
|
|
99
|
+
--mds-font-type-body-copy-bulk-default-size: 14px;
|
|
100
|
+
--mds-font-type-body-copy-bulk-default-line-height: 1.71;
|
|
101
|
+
--mds-font-type-body-copy-bulk-sm-size: 16px;
|
|
102
|
+
--mds-font-type-body-copy-bulk-sm-line-height: 1.75;
|
|
103
|
+
--mds-font-type-body-copy-bulk-md-size: 18px;
|
|
104
|
+
--mds-font-type-body-copy-bulk-md-line-height: 1.67;
|
|
105
|
+
--mds-font-type-body-copy-bulk-lg-size: 16px;
|
|
106
|
+
--mds-font-type-body-copy-bulk-lg-line-height: 1.75;
|
|
99
107
|
--mds-font-type-pica-default-size: 15px;
|
|
100
108
|
--mds-font-type-pica-default-line-height: 1.34;
|
|
101
109
|
--mds-font-type-pica-sm-size: 16px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Aug 2019 16:50:36 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -1956,6 +1956,184 @@ module.exports = {
|
|
|
1956
1956
|
}
|
|
1957
1957
|
}
|
|
1958
1958
|
},
|
|
1959
|
+
"body-copy-bulk": {
|
|
1960
|
+
"default": {
|
|
1961
|
+
"size": {
|
|
1962
|
+
"value": "14px",
|
|
1963
|
+
"original": {
|
|
1964
|
+
"value": "14px"
|
|
1965
|
+
},
|
|
1966
|
+
"name": "MdsFontTypeBodyCopyBulkDefaultSize",
|
|
1967
|
+
"attributes": {
|
|
1968
|
+
"category": "font",
|
|
1969
|
+
"type": "type",
|
|
1970
|
+
"item": "body-copy-bulk",
|
|
1971
|
+
"subitem": "default",
|
|
1972
|
+
"state": "size"
|
|
1973
|
+
},
|
|
1974
|
+
"path": [
|
|
1975
|
+
"font",
|
|
1976
|
+
"type",
|
|
1977
|
+
"body-copy-bulk",
|
|
1978
|
+
"default",
|
|
1979
|
+
"size"
|
|
1980
|
+
]
|
|
1981
|
+
},
|
|
1982
|
+
"line-height": {
|
|
1983
|
+
"value": "1.71",
|
|
1984
|
+
"original": {
|
|
1985
|
+
"value": "1.71"
|
|
1986
|
+
},
|
|
1987
|
+
"name": "MdsFontTypeBodyCopyBulkDefaultLineHeight",
|
|
1988
|
+
"attributes": {
|
|
1989
|
+
"category": "font",
|
|
1990
|
+
"type": "type",
|
|
1991
|
+
"item": "body-copy-bulk",
|
|
1992
|
+
"subitem": "default",
|
|
1993
|
+
"state": "line-height"
|
|
1994
|
+
},
|
|
1995
|
+
"path": [
|
|
1996
|
+
"font",
|
|
1997
|
+
"type",
|
|
1998
|
+
"body-copy-bulk",
|
|
1999
|
+
"default",
|
|
2000
|
+
"line-height"
|
|
2001
|
+
]
|
|
2002
|
+
}
|
|
2003
|
+
},
|
|
2004
|
+
"sm": {
|
|
2005
|
+
"size": {
|
|
2006
|
+
"value": "16px",
|
|
2007
|
+
"original": {
|
|
2008
|
+
"value": "16px"
|
|
2009
|
+
},
|
|
2010
|
+
"name": "MdsFontTypeBodyCopyBulkSmSize",
|
|
2011
|
+
"attributes": {
|
|
2012
|
+
"category": "font",
|
|
2013
|
+
"type": "type",
|
|
2014
|
+
"item": "body-copy-bulk",
|
|
2015
|
+
"subitem": "sm",
|
|
2016
|
+
"state": "size"
|
|
2017
|
+
},
|
|
2018
|
+
"path": [
|
|
2019
|
+
"font",
|
|
2020
|
+
"type",
|
|
2021
|
+
"body-copy-bulk",
|
|
2022
|
+
"sm",
|
|
2023
|
+
"size"
|
|
2024
|
+
]
|
|
2025
|
+
},
|
|
2026
|
+
"line-height": {
|
|
2027
|
+
"value": "1.75",
|
|
2028
|
+
"original": {
|
|
2029
|
+
"value": "1.75"
|
|
2030
|
+
},
|
|
2031
|
+
"name": "MdsFontTypeBodyCopyBulkSmLineHeight",
|
|
2032
|
+
"attributes": {
|
|
2033
|
+
"category": "font",
|
|
2034
|
+
"type": "type",
|
|
2035
|
+
"item": "body-copy-bulk",
|
|
2036
|
+
"subitem": "sm",
|
|
2037
|
+
"state": "line-height"
|
|
2038
|
+
},
|
|
2039
|
+
"path": [
|
|
2040
|
+
"font",
|
|
2041
|
+
"type",
|
|
2042
|
+
"body-copy-bulk",
|
|
2043
|
+
"sm",
|
|
2044
|
+
"line-height"
|
|
2045
|
+
]
|
|
2046
|
+
}
|
|
2047
|
+
},
|
|
2048
|
+
"md": {
|
|
2049
|
+
"size": {
|
|
2050
|
+
"value": "18px",
|
|
2051
|
+
"original": {
|
|
2052
|
+
"value": "18px"
|
|
2053
|
+
},
|
|
2054
|
+
"name": "MdsFontTypeBodyCopyBulkMdSize",
|
|
2055
|
+
"attributes": {
|
|
2056
|
+
"category": "font",
|
|
2057
|
+
"type": "type",
|
|
2058
|
+
"item": "body-copy-bulk",
|
|
2059
|
+
"subitem": "md",
|
|
2060
|
+
"state": "size"
|
|
2061
|
+
},
|
|
2062
|
+
"path": [
|
|
2063
|
+
"font",
|
|
2064
|
+
"type",
|
|
2065
|
+
"body-copy-bulk",
|
|
2066
|
+
"md",
|
|
2067
|
+
"size"
|
|
2068
|
+
]
|
|
2069
|
+
},
|
|
2070
|
+
"line-height": {
|
|
2071
|
+
"value": "1.67",
|
|
2072
|
+
"original": {
|
|
2073
|
+
"value": "1.67"
|
|
2074
|
+
},
|
|
2075
|
+
"name": "MdsFontTypeBodyCopyBulkMdLineHeight",
|
|
2076
|
+
"attributes": {
|
|
2077
|
+
"category": "font",
|
|
2078
|
+
"type": "type",
|
|
2079
|
+
"item": "body-copy-bulk",
|
|
2080
|
+
"subitem": "md",
|
|
2081
|
+
"state": "line-height"
|
|
2082
|
+
},
|
|
2083
|
+
"path": [
|
|
2084
|
+
"font",
|
|
2085
|
+
"type",
|
|
2086
|
+
"body-copy-bulk",
|
|
2087
|
+
"md",
|
|
2088
|
+
"line-height"
|
|
2089
|
+
]
|
|
2090
|
+
}
|
|
2091
|
+
},
|
|
2092
|
+
"lg": {
|
|
2093
|
+
"size": {
|
|
2094
|
+
"value": "16px",
|
|
2095
|
+
"original": {
|
|
2096
|
+
"value": "16px"
|
|
2097
|
+
},
|
|
2098
|
+
"name": "MdsFontTypeBodyCopyBulkLgSize",
|
|
2099
|
+
"attributes": {
|
|
2100
|
+
"category": "font",
|
|
2101
|
+
"type": "type",
|
|
2102
|
+
"item": "body-copy-bulk",
|
|
2103
|
+
"subitem": "lg",
|
|
2104
|
+
"state": "size"
|
|
2105
|
+
},
|
|
2106
|
+
"path": [
|
|
2107
|
+
"font",
|
|
2108
|
+
"type",
|
|
2109
|
+
"body-copy-bulk",
|
|
2110
|
+
"lg",
|
|
2111
|
+
"size"
|
|
2112
|
+
]
|
|
2113
|
+
},
|
|
2114
|
+
"line-height": {
|
|
2115
|
+
"value": "1.75",
|
|
2116
|
+
"original": {
|
|
2117
|
+
"value": "1.75"
|
|
2118
|
+
},
|
|
2119
|
+
"name": "MdsFontTypeBodyCopyBulkLgLineHeight",
|
|
2120
|
+
"attributes": {
|
|
2121
|
+
"category": "font",
|
|
2122
|
+
"type": "type",
|
|
2123
|
+
"item": "body-copy-bulk",
|
|
2124
|
+
"subitem": "lg",
|
|
2125
|
+
"state": "line-height"
|
|
2126
|
+
},
|
|
2127
|
+
"path": [
|
|
2128
|
+
"font",
|
|
2129
|
+
"type",
|
|
2130
|
+
"body-copy-bulk",
|
|
2131
|
+
"lg",
|
|
2132
|
+
"line-height"
|
|
2133
|
+
]
|
|
2134
|
+
}
|
|
2135
|
+
}
|
|
2136
|
+
},
|
|
1959
2137
|
"pica": {
|
|
1960
2138
|
"default": {
|
|
1961
2139
|
"size": {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
Do not edit directly
|
|
4
|
-
Generated on
|
|
4
|
+
Generated on Thu, 15 Aug 2019 16:50:36 GMT
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
$mds-color-brand-1-base: #1b75bb !default;
|
|
@@ -96,6 +96,14 @@ $mds-font-type-body-copy-md-size: 18px !default;
|
|
|
96
96
|
$mds-font-type-body-copy-md-line-height: 1.34 !default;
|
|
97
97
|
$mds-font-type-body-copy-lg-size: 16px !default;
|
|
98
98
|
$mds-font-type-body-copy-lg-line-height: 1.38 !default;
|
|
99
|
+
$mds-font-type-body-copy-bulk-default-size: 14px !default;
|
|
100
|
+
$mds-font-type-body-copy-bulk-default-line-height: 1.71 !default;
|
|
101
|
+
$mds-font-type-body-copy-bulk-sm-size: 16px !default;
|
|
102
|
+
$mds-font-type-body-copy-bulk-sm-line-height: 1.75 !default;
|
|
103
|
+
$mds-font-type-body-copy-bulk-md-size: 18px !default;
|
|
104
|
+
$mds-font-type-body-copy-bulk-md-line-height: 1.67 !default;
|
|
105
|
+
$mds-font-type-body-copy-bulk-lg-size: 16px !default;
|
|
106
|
+
$mds-font-type-body-copy-bulk-lg-line-height: 1.75 !default;
|
|
99
107
|
$mds-font-type-pica-default-size: 15px !default;
|
|
100
108
|
$mds-font-type-pica-default-line-height: 1.34 !default;
|
|
101
109
|
$mds-font-type-pica-sm-size: 16px !default;
|
|
@@ -332,6 +340,24 @@ $tokens: (
|
|
|
332
340
|
'line-height': $mds-font-type-body-copy-lg-line-height
|
|
333
341
|
)
|
|
334
342
|
),
|
|
343
|
+
'body-copy-bulk': (
|
|
344
|
+
'default': (
|
|
345
|
+
'size': $mds-font-type-body-copy-bulk-default-size,
|
|
346
|
+
'line-height': $mds-font-type-body-copy-bulk-default-line-height
|
|
347
|
+
),
|
|
348
|
+
'sm': (
|
|
349
|
+
'size': $mds-font-type-body-copy-bulk-sm-size,
|
|
350
|
+
'line-height': $mds-font-type-body-copy-bulk-sm-line-height
|
|
351
|
+
),
|
|
352
|
+
'md': (
|
|
353
|
+
'size': $mds-font-type-body-copy-bulk-md-size,
|
|
354
|
+
'line-height': $mds-font-type-body-copy-bulk-md-line-height
|
|
355
|
+
),
|
|
356
|
+
'lg': (
|
|
357
|
+
'size': $mds-font-type-body-copy-bulk-lg-size,
|
|
358
|
+
'line-height': $mds-font-type-body-copy-bulk-lg-line-height
|
|
359
|
+
)
|
|
360
|
+
),
|
|
335
361
|
'pica': (
|
|
336
362
|
'default': (
|
|
337
363
|
'size': $mds-font-type-pica-default-size,
|
package/dist/assets/icons.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="chevron-left" viewBox="0 0 24 24"><path d="M4.5 12a2.3 2.3 0 01.78-1.729L16.432.46a1.847 1.847 0 012.439 2.773l-9.752 8.579a.25.25 0 000 .376l9.752 8.579a1.847 1.847 0 01-2.439 2.773L5.284 13.732A2.31 2.31 0 014.5 12z" fill-rule="nonzero"/></symbol><symbol id="chevron-right" viewBox="0 0 24 24"><path d="M19.5 12a2.3 2.3 0 01-.78 1.729L7.568 23.54a1.847 1.847 0 01-2.439-2.773l9.752-8.579a.25.25 0 000-.376L5.129 3.233A1.847 1.847 0 017.568.46l11.148 9.808A2.31 2.31 0 0119.5 12z" fill-rule="nonzero"/></symbol><symbol id="email" viewBox="0 0 24 24"><path d="M11.114 14.556L1.43 4.87a.5.5 0 01.281-.849C1.807 4.007 1.903 4 2 4h20c.096 0 .192.007.287.021a.5.5 0 01.281.849l-9.686 9.686a1.252 1.252 0 01-1.768 0zm12.774-8.724A.181.181 0 0124 6v12a2 2 0 01-2 2H2a2 2 0 01-2-2V6c0-.073.045-.138.112-.166a.18.18 0 01.2.039l6.2 6.2a.251.251 0 010 .354L1.469 17.47a.75.75 0 001.06 1.061l5.043-5.043a.251.251 0 01.354 0l2.131 2.127a2.75 2.75 0 003.888 0l2.129-2.129a.25.25 0 01.354 0l5.043 5.043a.75.75 0 101.06-1.061l-5.043-5.043a.251.251 0 010-.354l6.2-6.2a.182.182 0 01.2-.039z" fill-rule="nonzero"/></symbol><symbol id="job" viewBox="0 0 24 24"><path d="M3 22.5h18a3 3 0 003-3v-11a3 3 0 00-3-3h-3.9a.25.25 0 01-.248-.219l-.144-1.153A3 3 0 0013.734 1.5h-3.468a3 3 0 00-2.977 2.628l-.144 1.153A.25.25 0 016.9 5.5H3a3 3 0 00-3 3v11a3 3 0 003 3zM9.273 4.376a1 1 0 01.993-.876h3.468a1 1 0 01.993.876l.105.844a.25.25 0 01-.248.28H9.416a.25.25 0 01-.248-.28l.105-.844zM5.25 11a.75.75 0 01.75-.75h12a.75.75 0 01.75.75v.5a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V11zm0 5.5a.75.75 0 01.75-.75h12a.75.75 0 01.75.75v.5a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75v-.5z" fill-rule="nonzero"/></symbol><symbol id="location-pin" viewBox="0 0 24 24"><path d="M12 0a8.009 8.009 0 00-8 8c0 3.51 5 12.025 7.148 15.524a1 1 0 001.704-.001C15 20.026 20 11.514 20 8a8.009 8.009 0 00-8-8zm0 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill-rule="nonzero"/></symbol><symbol id="menu" viewBox="0 0 24 24"><g transform="translate(1 2.429)" fill-rule="nonzero"><rect width="22" height="4.222" rx="1.5"/><rect y="7.389" width="22" height="4.222" rx="1.5"/><rect y="14.778" width="22" height="4.222" rx="1.5"/></g></symbol><symbol id="search" viewBox="0 0 24 24"><path d="M23.384 21.619l-6.529-6.529a9.284 9.284 0 10-1.768 1.768l6.529 6.529c.492.48 1.276.48 1.768 0a1.251 1.251 0 000-1.768zM2.75 9.5a6.75 6.75 0 116.75 6.75A6.758 6.758 0 012.75 9.5z" fill-rule="nonzero"/></symbol><symbol id="social-facebook" viewBox="0 0 32 32"><g
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="social-facebook-a" filterUnits="userSpaceOnUse" x="-1.9" y="-4" width="14.9" height="32"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter><filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-.7" y="-.3" width="18" height="17.9"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><symbol id="chevron-left" viewBox="0 0 24 24"><path d="M4.5 12a2.3 2.3 0 01.78-1.729L16.432.46a1.847 1.847 0 012.439 2.773l-9.752 8.579a.25.25 0 000 .376l9.752 8.579a1.847 1.847 0 01-2.439 2.773L5.284 13.732A2.31 2.31 0 014.5 12z" fill-rule="nonzero"/></symbol><symbol id="chevron-right" viewBox="0 0 24 24"><path d="M19.5 12a2.3 2.3 0 01-.78 1.729L7.568 23.54a1.847 1.847 0 01-2.439-2.773l9.752-8.579a.25.25 0 000-.376L5.129 3.233A1.847 1.847 0 017.568.46l11.148 9.808A2.31 2.31 0 0119.5 12z" fill-rule="nonzero"/></symbol><symbol id="email" viewBox="0 0 24 24"><path d="M11.114 14.556L1.43 4.87a.5.5 0 01.281-.849C1.807 4.007 1.903 4 2 4h20c.096 0 .192.007.287.021a.5.5 0 01.281.849l-9.686 9.686a1.252 1.252 0 01-1.768 0zm12.774-8.724A.181.181 0 0124 6v12a2 2 0 01-2 2H2a2 2 0 01-2-2V6c0-.073.045-.138.112-.166a.18.18 0 01.2.039l6.2 6.2a.251.251 0 010 .354L1.469 17.47a.75.75 0 001.06 1.061l5.043-5.043a.251.251 0 01.354 0l2.131 2.127a2.75 2.75 0 003.888 0l2.129-2.129a.25.25 0 01.354 0l5.043 5.043a.75.75 0 101.06-1.061l-5.043-5.043a.251.251 0 010-.354l6.2-6.2a.182.182 0 01.2-.039z" fill-rule="nonzero"/></symbol><symbol id="job" viewBox="0 0 24 24"><path d="M3 22.5h18a3 3 0 003-3v-11a3 3 0 00-3-3h-3.9a.25.25 0 01-.248-.219l-.144-1.153A3 3 0 0013.734 1.5h-3.468a3 3 0 00-2.977 2.628l-.144 1.153A.25.25 0 016.9 5.5H3a3 3 0 00-3 3v11a3 3 0 003 3zM9.273 4.376a1 1 0 01.993-.876h3.468a1 1 0 01.993.876l.105.844a.25.25 0 01-.248.28H9.416a.25.25 0 01-.248-.28l.105-.844zM5.25 11a.75.75 0 01.75-.75h12a.75.75 0 01.75.75v.5a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V11zm0 5.5a.75.75 0 01.75-.75h12a.75.75 0 01.75.75v.5a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75v-.5z" fill-rule="nonzero"/></symbol><symbol id="location-pin" viewBox="0 0 24 24"><path d="M12 0a8.009 8.009 0 00-8 8c0 3.51 5 12.025 7.148 15.524a1 1 0 001.704-.001C15 20.026 20 11.514 20 8a8.009 8.009 0 00-8-8zm0 11.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill-rule="nonzero"/></symbol><symbol id="menu" viewBox="0 0 24 24"><g transform="translate(1 2.429)" fill-rule="nonzero"><rect width="22" height="4.222" rx="1.5"/><rect y="7.389" width="22" height="4.222" rx="1.5"/><rect y="14.778" width="22" height="4.222" rx="1.5"/></g></symbol><symbol id="search" viewBox="0 0 24 24"><path d="M23.384 21.619l-6.529-6.529a9.284 9.284 0 10-1.768 1.768l6.529 6.529c.492.48 1.276.48 1.768 0a1.251 1.251 0 000-1.768zM2.75 9.5a6.75 6.75 0 116.75 6.75A6.758 6.758 0 012.75 9.5z" fill-rule="nonzero"/></symbol><symbol id="social-facebook" viewBox="0 0 32 32"><g transform="translate(10 4)"><mask maskUnits="userSpaceOnUse" x="-1.9" y="-4" width="14.9" height="32" id="social-facebook-b"><g filter="url(#social-facebook-a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M-1.9-4H13v32H-1.9z"/></g></mask><path d="M7.6-4H13v5.5h-1.5c-.7 0-1.4 0-2.1.1-.9.1-1.3.5-1.3 1.4v3.4l.1.1H13c-.2 1.8-.4 3.7-.6 5.5H8v16H1.4v-.2-15.4-.3h-3.2V6.5h3.3V5.4c0-1.4-.1-2.9.2-4.3.5-2.7 1.9-4.2 4.5-4.8.4-.2.9-.2 1.4-.3" mask="url(#social-facebook-b)" fill-rule="evenodd" clip-rule="evenodd"/></g></symbol><symbol id="social-linkedin" viewBox="0 0 32 32"><style>.st3{fill-rule:evenodd;clip-rule:evenodd}</style><g id="Group-8" transform="translate(5 5)"><g id="Group-3" transform="translate(7.441 6.354)"><mask maskUnits="userSpaceOnUse" x="-.7" y="-.3" width="18" height="17.9" id="mask-2_1_"><g filter="url(#Adobe_OpacityMaskFilter)"><path id="path-1_1_" fill-rule="evenodd" clip-rule="evenodd" d="M-.7-.3h18v17.9h-18z"/></g></mask><path id="Fill-1" d="M-.7 17.6c0-.1-.1-.2-.1-.3V.3.1h5.9v2.3h.1c.3-.2.4-.4.6-.6 1-1.2 2.3-1.9 3.9-2 1.8-.2 3.4.1 4.9 1.2 1.3 1 2.1 2.3 2.4 3.8l.3 1.8c0 .1 0 .2.1.3v10.7h-5.9v-.5-8.7c0-.7-.1-1.4-.3-2.1-.5-2-3-2.8-4.6-1.4-1 .7-1.4 1.7-1.4 2.8v9.5c0 .1 0 .3-.1.4H-.7z" mask="url(#mask-2_1_)" fill-rule="evenodd" clip-rule="evenodd"/></g><path id="Fill-4" class="st3" d="M-2.4 24v-.4V6.5h5.9V23.9h-5.9z"/><path id="Fill-6" class="st3" d="M-2.7.6c0-.2.1-.4.1-.6.5-1.2 1.8-2 3.3-2C2-1.9 3-1.4 3.6-.2c.9 2-.4 4.1-2.6 4.2-.5.1-1 0-1.6-.1-1.1-.3-1.8-1.1-2.1-2.2 0-.1 0-.2-.1-.3V.6z"/></g></symbol><symbol id="social-twitter" viewBox="0 0 32 32"><path d="M10.1 29c12.1 0 18.7-10 18.7-18.7v-.8c1.2-1 2.3-2.1 3.2-3.4-1.2.5-2.4.9-3.8 1 1.4-.8 2.4-2.1 2.9-3.6-1.3.8-2.7 1.3-4.2 1.6C25.7 3.8 24 3 22.2 3c-3.6 0-6.6 2.9-6.6 6.6 0 .5.1 1 .2 1.5-5.5-.3-10.3-2.9-13.6-6.9-.6 1-.9 2.1-.9 3.3 0 2.3 1.2 4.3 2.9 5.5-1.1 0-2.1-.3-3-.8v.1c0 3.2 2.3 5.8 5.3 6.4-.6.2-1.1.2-1.7.2-.4 0-.8 0-1.2-.1.8 2.6 3.3 4.5 6.1 4.6-2.2 1.8-5.1 2.8-8.2 2.8-.5 0-1.1 0-1.6-.1 3 1.8 6.5 2.9 10.2 2.9"/></symbol><symbol id="star-fill" viewBox="0 0 24 24"><path d="M23.555 8.729a1.505 1.505 0 00-1.406-.98h-6.087a.5.5 0 01-.472-.334l-2.185-6.193a1.5 1.5 0 00-2.81 0l-.005.016-2.18 6.177a.5.5 0 01-.471.334H1.85A1.5 1.5 0 00.887 10.4l5.184 4.3a.5.5 0 01.155.543l-2.178 6.531a1.5 1.5 0 002.31 1.684l5.346-3.92a.5.5 0 01.591 0l5.344 3.919a1.5 1.5 0 002.312-1.683l-2.178-6.535a.5.5 0 01.155-.543l5.194-4.306a1.5 1.5 0 00.433-1.661z" fill-rule="evenodd"/></symbol><symbol id="star-outline" viewBox="0 0 24 24"><path d="M23.901 8.657a1.616 1.616 0 00-1.512-1.046h-6.538L13.51 1.038A1.612 1.612 0 0011.99 0a1.611 1.611 0 00-1.507 1.058L8.15 7.61H1.612c-.678 0-1.283.421-1.515 1.053a1.59 1.59 0 00.48 1.771l5.535 4.547-2.323 6.91a1.59 1.59 0 00.577 1.798c.567.411 1.338.41 1.904-.001L12 19.527l5.73 4.164a1.623 1.623 0 001.902.002 1.59 1.59 0 00.58-1.795l-2.324-6.913 5.548-4.559a1.594 1.594 0 00.465-1.769zm-7.996 5.127c-.35.287-.485.757-.342 1.184l1.704 5.069a.271.271 0 01-.098.307.277.277 0 01-.325 0l-4.194-3.052a1.108 1.108 0 00-1.302 0l-4.189 3.046a.277.277 0 01-.324 0 .271.271 0 01-.1-.305l1.704-5.07a1.085 1.085 0 00-.341-1.184L3.83 10.276a.271.271 0 01-.084-.303.275.275 0 01.259-.18H8.93a1.1 1.1 0 001.037-.729l1.774-4.983a.275.275 0 01.52 0l1.772 4.983a1.1 1.1 0 001.037.729h4.924a.271.271 0 01.175.483l-4.264 3.508z" fill-rule="nonzero"/></symbol><symbol id="user" viewBox="0 0 24 24"><path d="M12 11.75a5.5 5.5 0 110-11 5.5 5.5 0 010 11zm0 1.5a9.511 9.511 0 019.5 9.5.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5 9.511 9.511 0 019.5-9.5z" fill-rule="nonzero"/></symbol></svg>
|
package/dist/css/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Do not edit directly
|
|
3
|
-
Generated on
|
|
3
|
+
Generated on Thu, 15 Aug 2019 16:50:36 GMT
|
|
4
4
|
*/
|
|
5
5
|
html,
|
|
6
6
|
body,
|
|
@@ -514,11 +514,12 @@ body {
|
|
|
514
514
|
margin: 0 0 20px 0;
|
|
515
515
|
padding: 0;
|
|
516
516
|
list-style-type: none;
|
|
517
|
-
list-style-position:
|
|
517
|
+
list-style-position: outside;
|
|
518
518
|
}
|
|
519
519
|
|
|
520
|
-
.mds-
|
|
520
|
+
.mds-list__item {
|
|
521
521
|
margin-bottom: 8px;
|
|
522
|
+
margin-left: 16px;
|
|
522
523
|
}
|
|
523
524
|
|
|
524
525
|
.mds-list--bullet {
|
|
@@ -554,6 +555,10 @@ body {
|
|
|
554
555
|
margin-right: 8px;
|
|
555
556
|
}
|
|
556
557
|
|
|
558
|
+
.mds-list--multilevel .mds-list {
|
|
559
|
+
margin: 8px 0 0 0;
|
|
560
|
+
}
|
|
561
|
+
|
|
557
562
|
/* Source: https://github.com/kristoferjoseph/flexboxgrid */
|
|
558
563
|
.mds-grid-row {
|
|
559
564
|
box-sizing: border-box;
|
|
@@ -1683,6 +1688,32 @@ body {
|
|
|
1683
1688
|
}
|
|
1684
1689
|
}
|
|
1685
1690
|
|
|
1691
|
+
.mds-font-body-copy-bulk {
|
|
1692
|
+
font-size: 0.875rem;
|
|
1693
|
+
line-height: 1.71;
|
|
1694
|
+
}
|
|
1695
|
+
|
|
1696
|
+
@media (min-width: 25em) {
|
|
1697
|
+
.mds-font-body-copy-bulk {
|
|
1698
|
+
font-size: 1rem;
|
|
1699
|
+
line-height: 1.75;
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
@media (min-width: 37.5em) {
|
|
1704
|
+
.mds-font-body-copy-bulk {
|
|
1705
|
+
font-size: 1.125rem;
|
|
1706
|
+
line-height: 1.67;
|
|
1707
|
+
}
|
|
1708
|
+
}
|
|
1709
|
+
|
|
1710
|
+
@media (min-width: 63em) {
|
|
1711
|
+
.mds-font-body-copy-bulk {
|
|
1712
|
+
font-size: 1rem;
|
|
1713
|
+
line-height: 1.75;
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1686
1717
|
.mds-font-pica {
|
|
1687
1718
|
font-size: 0.9375rem;
|
|
1688
1719
|
line-height: 1.34;
|
|
@@ -4618,3 +4649,30 @@ body {
|
|
|
4618
4649
|
.mds-border-radius-none {
|
|
4619
4650
|
border-radius: 0;
|
|
4620
4651
|
}
|
|
4652
|
+
|
|
4653
|
+
.mds-edited-text ul,
|
|
4654
|
+
.mds-edited-text ol {
|
|
4655
|
+
margin: 0 0 20px 0;
|
|
4656
|
+
padding: 0;
|
|
4657
|
+
list-style-position: outside;
|
|
4658
|
+
}
|
|
4659
|
+
|
|
4660
|
+
.mds-edited-text ul ul,
|
|
4661
|
+
.mds-edited-text ul ol,
|
|
4662
|
+
.mds-edited-text ol ul,
|
|
4663
|
+
.mds-edited-text ol ol {
|
|
4664
|
+
margin: 8px 0 0 0;
|
|
4665
|
+
}
|
|
4666
|
+
|
|
4667
|
+
.mds-edited-text ul {
|
|
4668
|
+
list-style-type: disc;
|
|
4669
|
+
}
|
|
4670
|
+
|
|
4671
|
+
.mds-edited-text ol {
|
|
4672
|
+
list-style-type: decimal;
|
|
4673
|
+
}
|
|
4674
|
+
|
|
4675
|
+
.mds-edited-text li {
|
|
4676
|
+
margin-bottom: 8px;
|
|
4677
|
+
margin-left: 16px;
|
|
4678
|
+
}
|
package/package.json
CHANGED
|
@@ -29,3 +29,33 @@
|
|
|
29
29
|
iconName: 'chevron-right',
|
|
30
30
|
classes: 'mds-icon--after'
|
|
31
31
|
}) -}}</a></p>
|
|
32
|
+
|
|
33
|
+
<div>
|
|
34
|
+
<span>Share this job</span>
|
|
35
|
+
<ul class="mds-list mds-list--inline mds-display-inline-block">
|
|
36
|
+
<li class="mds-list__item">
|
|
37
|
+
<a href="#">
|
|
38
|
+
{{- MdsIcon({
|
|
39
|
+
iconName: 'social-facebook',
|
|
40
|
+
visuallyHiddenLabel: 'Facebook'
|
|
41
|
+
}) -}}
|
|
42
|
+
</a>
|
|
43
|
+
</li>
|
|
44
|
+
<li class="mds-list__item">
|
|
45
|
+
<a href="#">
|
|
46
|
+
{{- MdsIcon({
|
|
47
|
+
iconName: 'social-twitter',
|
|
48
|
+
visuallyHiddenLabel: 'Twitter'
|
|
49
|
+
}) -}}
|
|
50
|
+
</a>
|
|
51
|
+
</li>
|
|
52
|
+
<li class="mds-list__item">
|
|
53
|
+
<a href="#">
|
|
54
|
+
{{- MdsIcon({
|
|
55
|
+
iconName: 'social-linkedin',
|
|
56
|
+
visuallyHiddenLabel: 'LinkedIn'
|
|
57
|
+
}) -}}
|
|
58
|
+
</a>
|
|
59
|
+
</li>
|
|
60
|
+
</ul>
|
|
61
|
+
</div>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
{%- endif -%}
|
|
39
39
|
{% endset -%}
|
|
40
40
|
|
|
41
|
-
<section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}" id="{{ tabPanelId }}">{{ item.content | safe }}</section>
|
|
41
|
+
<section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabPanelId }}">{{ item.content | safe }}</section>
|
|
42
42
|
{%- endfor -%}
|
|
43
43
|
</div>
|
|
44
44
|
{% endif %}
|
|
@@ -23,6 +23,7 @@ module.exports = {
|
|
|
23
23
|
id: 'next-week',
|
|
24
24
|
content:
|
|
25
25
|
'<strong>Next week:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
|
|
26
|
+
contentClasses: 'mds-edited-text',
|
|
26
27
|
},
|
|
27
28
|
{
|
|
28
29
|
label: 'Next month',
|
|
@@ -54,6 +55,7 @@ module.exports = {
|
|
|
54
55
|
label: 'Seagulls',
|
|
55
56
|
content:
|
|
56
57
|
'<strong>Seagulls:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
|
|
58
|
+
contentClasses: 'mds-edited-text',
|
|
57
59
|
},
|
|
58
60
|
],
|
|
59
61
|
},
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<div class="mds-edited-text">
|
|
2
|
+
<ol>
|
|
3
|
+
<li>
|
|
4
|
+
one
|
|
5
|
+
</li>
|
|
6
|
+
<li>
|
|
7
|
+
<a href="#two">two</a>
|
|
8
|
+
</li>
|
|
9
|
+
<li>three
|
|
10
|
+
<ul>
|
|
11
|
+
<li>first</li>
|
|
12
|
+
<li>second</li>
|
|
13
|
+
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
|
|
14
|
+
<ul>
|
|
15
|
+
<li>once</li>
|
|
16
|
+
<li>twice</li>
|
|
17
|
+
</ul>
|
|
18
|
+
</li>
|
|
19
|
+
</ul>
|
|
20
|
+
</li>
|
|
21
|
+
<li>
|
|
22
|
+
<a href="#two">four</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li>
|
|
25
|
+
<a href="#two">five</a>
|
|
26
|
+
</li>
|
|
27
|
+
</ol>
|
|
28
|
+
</div>
|
|
@@ -1,12 +1,32 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
|
5
|
+
<style type="text/css">
|
|
6
|
+
.st0{filter:url(#Adobe_OpacityMaskFilter);}
|
|
7
|
+
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
|
8
|
+
.st2{mask:url(#mask-2_1_);fill-rule:evenodd;clip-rule:evenodd;}
|
|
9
|
+
</style>
|
|
10
|
+
<title>Icon/ 32/ Social/ Facebook</title>
|
|
11
|
+
<desc>Created with Sketch.</desc>
|
|
12
|
+
<g>
|
|
13
|
+
<g id="Group-3" transform="translate(10.000000, 4.000000)">
|
|
14
|
+
<g id="Clip-2">
|
|
15
|
+
</g>
|
|
16
|
+
<defs>
|
|
17
|
+
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-1.9" y="-4" width="14.9" height="32">
|
|
18
|
+
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
|
19
|
+
</filter>
|
|
20
|
+
</defs>
|
|
21
|
+
<mask maskUnits="userSpaceOnUse" x="-1.9" y="-4" width="14.9" height="32" id="mask-2_1_">
|
|
22
|
+
<g class="st0">
|
|
23
|
+
<polygon id="path-1_1_" class="st1" points="-1.9,-4 13,-4 13,28 -1.9,28 "/>
|
|
24
|
+
</g>
|
|
25
|
+
</mask>
|
|
26
|
+
<path id="Fill-1" class="st2" d="M7.6-4H13v5.5c-0.5,0-1,0-1.5,0c-0.7,0-1.4,0-2.1,0.1C8.5,1.7,8.1,2.1,8.1,3c0,1.1,0,2.3,0,3.4
|
|
27
|
+
c0,0,0,0,0.1,0.1H13c-0.2,1.8-0.4,3.7-0.6,5.5H8v0.4c0,3.8,0,7.5,0,11.3c0,1.4,0,2.9,0,4.3H1.4c0-0.1,0-0.2,0-0.2
|
|
28
|
+
c0-5.1,0-10.3,0-15.4c0-0.1,0-0.2,0-0.3h-3.2V6.5h3.3c0-0.4,0-0.8,0-1.1c0-1.4-0.1-2.9,0.2-4.3c0.5-2.7,1.9-4.2,4.5-4.8
|
|
29
|
+
C6.6-3.9,7.1-3.9,7.6-4"/>
|
|
30
|
+
</g>
|
|
31
|
+
</g>
|
|
32
|
+
</svg>
|
|
@@ -1,16 +1,39 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
|
5
|
+
<style type="text/css">
|
|
6
|
+
.st0{filter:url(#Adobe_OpacityMaskFilter);}
|
|
7
|
+
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
|
8
|
+
.st2{mask:url(#mask-2_1_);fill-rule:evenodd;clip-rule:evenodd;}
|
|
9
|
+
.st3{fill-rule:evenodd;clip-rule:evenodd;}
|
|
10
|
+
</style>
|
|
11
|
+
<title>Icon/ 32/ Social/ LinkedIn</title>
|
|
12
|
+
<desc>Created with Sketch.</desc>
|
|
13
|
+
<g>
|
|
14
|
+
<g id="Group-8" transform="translate(5.000000, 5.000000)">
|
|
15
|
+
<g id="Group-3" transform="translate(7.441176, 6.354067)">
|
|
16
|
+
<g id="Clip-2">
|
|
17
|
+
</g>
|
|
18
|
+
<defs>
|
|
19
|
+
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-0.7" y="-0.3" width="18" height="17.9">
|
|
20
|
+
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
|
21
|
+
</filter>
|
|
22
|
+
</defs>
|
|
23
|
+
<mask maskUnits="userSpaceOnUse" x="-0.7" y="-0.3" width="18" height="17.9" id="mask-2_1_">
|
|
24
|
+
<g class="st0">
|
|
25
|
+
<polygon id="path-1_1_" class="st1" points="-0.7,-0.3 17.3,-0.3 17.3,17.6 -0.7,17.6 "/>
|
|
26
|
+
</g>
|
|
27
|
+
</mask>
|
|
28
|
+
<path id="Fill-1" class="st2" d="M-0.7,17.6c0-0.1-0.1-0.2-0.1-0.3c0-5.7,0-11.3,0-17c0-0.1,0-0.1,0-0.2h5.9v2.3c0,0,0,0,0.1,0
|
|
29
|
+
C5.5,2.2,5.6,2,5.8,1.8c1-1.2,2.3-1.9,3.9-2c1.8-0.2,3.4,0.1,4.9,1.2c1.3,1,2.1,2.3,2.4,3.8c0.1,0.6,0.2,1.2,0.3,1.8
|
|
30
|
+
c0,0.1,0,0.2,0.1,0.3v10.7h-5.9c0-0.2,0-0.3,0-0.5c0-2.9,0-5.8,0-8.7c0-0.7-0.1-1.4-0.3-2.1c-0.5-2-3-2.8-4.6-1.4
|
|
31
|
+
C5.6,5.6,5.2,6.6,5.2,7.7c0,3.2,0,6.3,0,9.5c0,0.1,0,0.3-0.1,0.4H-0.7z"/>
|
|
32
|
+
</g>
|
|
33
|
+
<path id="Fill-4" class="st3" d="M-2.4,24c0-0.1,0-0.3,0-0.4c0-5.6,0-11.1,0-16.7V6.5h5.9c0,0.1,0,0.2,0,0.3c0,5.6,0,11.2,0,16.8
|
|
34
|
+
c0,0.1,0,0.2,0,0.3H-2.4z"/>
|
|
35
|
+
<path id="Fill-6" class="st3" d="M-2.7,0.6C-2.7,0.4-2.6,0.2-2.6,0C-2.1-1.2-0.8-2,0.7-2C2-1.9,3-1.4,3.6-0.2C4.5,1.8,3.2,3.9,1,4
|
|
36
|
+
C0.5,4.1,0,4-0.6,3.9c-1.1-0.3-1.8-1.1-2.1-2.2c0-0.1,0-0.2-0.1-0.3V0.6z"/>
|
|
37
|
+
</g>
|
|
38
|
+
</g>
|
|
39
|
+
</svg>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</svg>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
|
5
|
+
<title>Icon/ 32/ Social/ Twitter</title>
|
|
6
|
+
<desc>Created with Sketch.</desc>
|
|
7
|
+
<path d="M10.1,29c12.1,0,18.7-10,18.7-18.7c0-0.3,0-0.6,0-0.8C30,8.5,31.1,7.4,32,6.1c-1.2,0.5-2.4,0.9-3.8,1
|
|
8
|
+
c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.7,3.8,24,3,22.2,3c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5
|
|
9
|
+
C10.3,10.8,5.5,8.2,2.2,4.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1
|
|
10
|
+
c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.2-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8
|
|
11
|
+
c-0.5,0-1.1,0-1.6-0.1C2.9,27.9,6.4,29,10.1,29"/>
|
|
12
|
+
</svg>
|
|
@@ -2,15 +2,17 @@
|
|
|
2
2
|
margin: 0 0 ($mds-size-baseline * 5) 0;
|
|
3
3
|
padding: 0;
|
|
4
4
|
list-style-type: none;
|
|
5
|
-
list-style-position:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
list-style-position: outside;
|
|
6
|
+
}
|
|
7
|
+
.mds-list__item {
|
|
8
|
+
margin-bottom: $mds-size-baseline * 2;
|
|
9
|
+
margin-left: $mds-size-baseline * 4;
|
|
10
10
|
}
|
|
11
|
+
|
|
11
12
|
.mds-list--bullet {
|
|
12
13
|
list-style-type: disc;
|
|
13
14
|
}
|
|
15
|
+
|
|
14
16
|
.mds-list--number {
|
|
15
17
|
list-style-type: decimal;
|
|
16
18
|
}
|
|
@@ -37,4 +39,8 @@
|
|
|
37
39
|
display: inline-block;
|
|
38
40
|
margin-bottom: 0;
|
|
39
41
|
margin-right: $mds-size-baseline * 2;
|
|
40
|
-
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.mds-list--multilevel .mds-list {
|
|
45
|
+
margin: ($mds-size-baseline * 2) 0 0 0;
|
|
46
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.mds-edited-text {
|
|
2
|
+
ul,
|
|
3
|
+
ol {
|
|
4
|
+
margin: 0 0 ($mds-size-baseline * 5) 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
list-style-position: outside;
|
|
7
|
+
ul,
|
|
8
|
+
ol {
|
|
9
|
+
margin: ($mds-size-baseline * 2) 0 0 0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
ul {
|
|
13
|
+
list-style-type: disc;
|
|
14
|
+
}
|
|
15
|
+
ol {
|
|
16
|
+
list-style-type: decimal;
|
|
17
|
+
}
|
|
18
|
+
li {
|
|
19
|
+
margin-bottom: $mds-size-baseline * 2;
|
|
20
|
+
margin-left: $mds-size-baseline * 4;
|
|
21
|
+
}
|
|
22
|
+
}
|
package/src/scss/index.scss
CHANGED
|
@@ -4,12 +4,7 @@
|
|
|
4
4
|
@import 'functions/_index';
|
|
5
5
|
@import 'utilities/_index';
|
|
6
6
|
@import 'core/_index';
|
|
7
|
-
|
|
8
|
-
@import '../components/icons/icons';
|
|
9
|
-
@import '../components/button/button';
|
|
10
|
-
@import '../components/card/card';
|
|
11
|
-
@import '../components/section-title/section-title';
|
|
12
|
-
@import '../components/tabs/tabs';
|
|
7
|
+
@import 'components/_index';
|
|
13
8
|
|
|
14
9
|
// Should stay last to override other classes
|
|
15
|
-
@import 'helpers/_index';
|
|
10
|
+
@import 'helpers/_index';
|
package/src/tokens/font.json
CHANGED
|
@@ -119,6 +119,40 @@
|
|
|
119
119
|
"line-height": { "value": "1.38" }
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
|
+
"body-copy-bulk": {
|
|
123
|
+
"default": {
|
|
124
|
+
"size": {
|
|
125
|
+
"value": "14px"
|
|
126
|
+
},
|
|
127
|
+
"line-height": {
|
|
128
|
+
"value": "1.71"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
"sm": {
|
|
132
|
+
"size": {
|
|
133
|
+
"value": "16px"
|
|
134
|
+
},
|
|
135
|
+
"line-height": {
|
|
136
|
+
"value": "1.75"
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"md": {
|
|
140
|
+
"size": {
|
|
141
|
+
"value": "18px"
|
|
142
|
+
},
|
|
143
|
+
"line-height": {
|
|
144
|
+
"value": "1.67"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"lg": {
|
|
148
|
+
"size": {
|
|
149
|
+
"value": "16px"
|
|
150
|
+
},
|
|
151
|
+
"line-height": {
|
|
152
|
+
"value": "1.75"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
},
|
|
122
156
|
"pica": {
|
|
123
157
|
"default": {
|
|
124
158
|
"size": { "value": "15px" },
|
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
<h4>Body copy (Usage: Body copy):</h4>
|
|
17
17
|
<p class="mds-font-body-copy">The quick brown fox jumps over the lazy dog</p>
|
|
18
18
|
|
|
19
|
+
<h4>Body copy bulk (Usage: Body copy long text):</h4>
|
|
20
|
+
<p class="mds-font-body-copy-bulk">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend accumsan elementum. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales. Donec facilisis suscipit augue, id pharetra nisl pharetra vitae. Etiam sed est id nulla ultricies accumsan sit amet ac urna. Etiam a neque eu erat rhoncus sollicitudin. Aenean maximus, mauris vitae porttitor varius, metus massa porttitor nulla, ac iaculis turpis tellus quis dui. Maecenas pharetra a ligula sed imperdiet.</p>
|
|
21
|
+
|
|
19
22
|
<h4>Pica (Usage: Index links, titles or headlines):</h4>
|
|
20
23
|
<p class="mds-font-pica">The quick brown fox jumps over the lazy dog</p>
|
|
21
24
|
|
package/src/typography/lists.njk
CHANGED
|
@@ -33,4 +33,32 @@
|
|
|
33
33
|
<li class="mds-list__item">One</li>
|
|
34
34
|
<li class="mds-list__item">Two</li>
|
|
35
35
|
<li class="mds-list__item">Three</li>
|
|
36
|
-
</ul>
|
|
36
|
+
</ul>
|
|
37
|
+
|
|
38
|
+
<h2>Multilevel list</h2>
|
|
39
|
+
<ol class="mds-list mds-list--number mds-list--multilevel">
|
|
40
|
+
<li class="mds-list__item">
|
|
41
|
+
one
|
|
42
|
+
</li>
|
|
43
|
+
<li class="mds-list__item">
|
|
44
|
+
<a href="#two">two</a>
|
|
45
|
+
</li>
|
|
46
|
+
<li class="mds-list__item">three
|
|
47
|
+
<ul class="mds-list mds-list--bullet">
|
|
48
|
+
<li class="mds-list__item">first</li>
|
|
49
|
+
<li class="mds-list__item">second</li>
|
|
50
|
+
<li class="mds-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
|
|
51
|
+
<ul class="mds-list mds-list--bullet">
|
|
52
|
+
<li class="mds-list__item">once</li>
|
|
53
|
+
<li class="mds-list__item">twice</li>
|
|
54
|
+
</ul>
|
|
55
|
+
</li>
|
|
56
|
+
</ul>
|
|
57
|
+
</li>
|
|
58
|
+
<li class="mds-list__item">
|
|
59
|
+
<a href="#two">four</a>
|
|
60
|
+
</li>
|
|
61
|
+
<li class="mds-list__item">
|
|
62
|
+
<a href="#two">five</a>
|
|
63
|
+
</li>
|
|
64
|
+
</ol>
|