@ons/design-system 57.0.0 → 58.0.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/components/autosuggest/_autosuggest.scss +16 -16
- package/components/breadcrumbs/_breadcrumbs.scss +2 -2
- package/components/browser-banner/_browser-banner.scss +5 -5
- package/components/button/_button.scss +62 -62
- package/components/call-to-action/_call-to-action.scss +1 -1
- package/components/checkboxes/_checkbox.scss +16 -16
- package/components/collapsible/_collapsible.scss +8 -8
- package/components/content-pagination/_content-pagination.scss +1 -1
- package/components/cookies-banner/_cookies-banner.scss +3 -3
- package/components/document-list/document-list.scss +10 -10
- package/components/download-resources/_download-resources.scss +5 -5
- package/components/external-link/_external-link.scss +4 -4
- package/components/feedback/_feedback.scss +3 -3
- package/components/field/_field.scss +1 -1
- package/components/find-a-support-centre/_find-a-support-centre.scss +1 -1
- package/components/footer/_footer.scss +7 -7
- package/components/header/_header.scss +26 -26
- package/components/hero/_hero.scss +4 -4
- package/components/input/_input-type.scss +5 -5
- package/components/input/_input.scss +13 -13
- package/components/label/_label.scss +1 -1
- package/components/lists/_list.scss +1 -1
- package/components/message/_message.scss +3 -3
- package/components/message-list/_message-list.scss +1 -1
- package/components/modal/_modal.scss +1 -1
- package/components/navigation/_macro.njk +1 -1
- package/components/navigation/_macro.spec.js +20 -2
- package/components/navigation/_navigation.scss +14 -14
- package/components/pagination/_pagination.scss +2 -2
- package/components/panel/_panel.scss +22 -22
- package/components/phase-banner/_phase-banner.scss +3 -3
- package/components/promotional-banner/_promo-banner.scss +5 -5
- package/components/question/_question.scss +4 -4
- package/components/quote/_quote.scss +2 -2
- package/components/radios/_radio.scss +6 -4
- package/components/related-content/_related-content.scss +2 -2
- package/components/relationships/_relationships.scss +2 -2
- package/components/section-navigation/_macro.njk +1 -1
- package/components/section-navigation/_section-navigation.scss +8 -8
- package/components/skip-to-content/_skip.scss +3 -3
- package/components/status/_status.scss +5 -5
- package/components/summary/_summary.scss +6 -6
- package/components/table/_table.scss +18 -18
- package/components/table-of-contents/_toc.scss +3 -3
- package/components/table-of-contents/toc.dom.js +2 -4
- package/components/tabs/_macro.njk +18 -5
- package/components/tabs/_macro.spec.js +54 -0
- package/components/tabs/_tabs.scss +57 -25
- package/components/tabs/tabs.js +35 -12
- package/components/tabs/tabs.spec.js +104 -10
- package/components/text-indent/_text-indent.scss +1 -1
- package/components/timeline/_timeline.scss +2 -2
- package/components/upload/_upload.scss +6 -6
- package/css/census.css +3 -3
- package/css/ids.css +3 -3
- package/css/main.css +3 -3
- package/css/print.css +1 -1
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +2 -2
- package/scss/base/_global.scss +7 -7
- package/scss/base/_typography.scss +2 -2
- package/scss/census.scss +1 -1
- package/scss/helpers/_functions.scss +0 -8
- package/scss/ids.scss +1 -1
- package/scss/overrides/hcm.scss +1 -1
- package/scss/overrides/rtl.scss +1 -1
- package/scss/patternlib.scss +10 -9
- package/scss/print.scss +7 -5
- package/scss/settings/_census.scss +24 -19
- package/scss/settings/_ids.scss +16 -12
- package/scss/utilities/_border.scss +1 -1
- package/scss/utilities/_colors.scss +1 -10
- package/scss/utilities/_grid.scss +3 -3
- package/scss/utilities/_typography.scss +1 -1
- package/scss/vars/_colors.scss +112 -99
package/scss/base/_global.scss
CHANGED
|
@@ -25,21 +25,21 @@ img {
|
|
|
25
25
|
|
|
26
26
|
hr {
|
|
27
27
|
border: 0;
|
|
28
|
-
border-top: 1px solid
|
|
28
|
+
border-top: 1px solid var(--ons-color-borders);
|
|
29
29
|
margin: 2rem 0 0;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
%a-focus {
|
|
33
|
-
background-color:
|
|
34
|
-
box-shadow: 0 -2px
|
|
35
|
-
color:
|
|
33
|
+
background-color: var(--ons-color-focus);
|
|
34
|
+
box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus);
|
|
35
|
+
color: var(--ons-color-text-link-focus);
|
|
36
36
|
outline: 3px solid transparent;
|
|
37
37
|
outline-offset: 1px;
|
|
38
38
|
text-decoration: none;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
a {
|
|
42
|
-
color:
|
|
42
|
+
color: var(--ons-color-text-link);
|
|
43
43
|
text-decoration-thickness: 1px;
|
|
44
44
|
text-underline-position: under;
|
|
45
45
|
&:not(.ons-u-fs-r--b):hover {
|
|
@@ -57,8 +57,8 @@ a {
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
&:hover {
|
|
60
|
-
color:
|
|
61
|
-
text-decoration: underline solid
|
|
60
|
+
color: var(--ons-color-text-link-hover);
|
|
61
|
+
text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
|
|
62
62
|
}
|
|
63
63
|
&:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
|
|
64
64
|
@extend %a-focus;
|
|
@@ -6,7 +6,7 @@ html {
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
body {
|
|
9
|
-
color:
|
|
9
|
+
color: var(--ons-color-text);
|
|
10
10
|
font-family: $font-sans;
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -23,7 +23,7 @@ h6 {
|
|
|
23
23
|
line-height: 1.2;
|
|
24
24
|
margin: 0 0 1rem;
|
|
25
25
|
em {
|
|
26
|
-
background-color:
|
|
26
|
+
background-color: var(--ons-color-highlight);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
package/scss/census.scss
CHANGED
|
@@ -16,14 +16,6 @@
|
|
|
16
16
|
@return $num / ($num * 0 + 1);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
@function tint($color, $percentage) {
|
|
20
|
-
@return mix(white, $color, $percentage);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@function shade($color, $percentage) {
|
|
24
|
-
@return mix(black, $color, $percentage);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
19
|
@function map-set($map, $key, $value) {
|
|
28
20
|
$new: (
|
|
29
21
|
$key: $value,
|
package/scss/ids.scss
CHANGED
package/scss/overrides/hcm.scss
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
// Select - Overrides custom background image icon
|
|
37
37
|
.ons-input--select {
|
|
38
|
-
background:
|
|
38
|
+
background: var(--ons-color-input-bg)
|
|
39
39
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-svg-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
|
|
40
40
|
no-repeat center right 10px;
|
|
41
41
|
background-size: 1rem;
|
package/scss/overrides/rtl.scss
CHANGED
package/scss/patternlib.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
@import 'vars/
|
|
1
|
+
@import 'vars/grid';
|
|
2
|
+
@import 'vars/vars';
|
|
2
3
|
@import 'helpers/index';
|
|
3
4
|
@import '../views/partials/example/example';
|
|
4
5
|
@import '../foundations/layout/page-template/examples/base-page-template-block-areas/block-areas';
|
|
@@ -48,8 +49,8 @@
|
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
code:not(.ons-patternlib-example__code) {
|
|
51
|
-
background:
|
|
52
|
-
color:
|
|
52
|
+
background: var(--ons-color-grey-5);
|
|
53
|
+
color: var(--ons-color-ruby-red);
|
|
53
54
|
padding: 0.05rem 0.25rem;
|
|
54
55
|
}
|
|
55
56
|
|
|
@@ -61,7 +62,7 @@
|
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
th {
|
|
64
|
-
border-bottom: 2px solid
|
|
65
|
+
border-bottom: 2px solid var(--ons-color-grey-100);
|
|
65
66
|
padding: 0.5rem 0 0.5rem 1rem;
|
|
66
67
|
text-align: left;
|
|
67
68
|
vertical-align: top;
|
|
@@ -78,7 +79,7 @@
|
|
|
78
79
|
|
|
79
80
|
td {
|
|
80
81
|
background: transparent;
|
|
81
|
-
border-bottom: 1px solid
|
|
82
|
+
border-bottom: 1px solid var(--ons-color-borders);
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
tr:last-child td {
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
.ons-patternlib-hero {
|
|
133
|
-
background:
|
|
134
|
+
background: var(--ons-color-grey-5);
|
|
134
135
|
padding: 2rem 0 1rem;
|
|
135
136
|
width: 100%;
|
|
136
137
|
|
|
@@ -140,15 +141,15 @@
|
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
.ons-pl-grid-col {
|
|
143
|
-
background:
|
|
144
|
+
background: var(--ons-color-grey-5);
|
|
144
145
|
font-size: 0.8rem;
|
|
145
146
|
margin: 0 0 1rem;
|
|
146
147
|
padding: 1rem;
|
|
147
148
|
}
|
|
148
149
|
|
|
149
150
|
.ons-pl-experimental-tag {
|
|
150
|
-
background:
|
|
151
|
-
color:
|
|
151
|
+
background: var(--ons-color-info);
|
|
152
|
+
color: var(--ons-color-text-inverse);
|
|
152
153
|
display: inline-block;
|
|
153
154
|
font-size: 0.7rem;
|
|
154
155
|
font-weight: 700;
|
package/scss/print.scss
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
html {
|
|
2
|
+
--ons-color-black: #222;
|
|
3
|
+
}
|
|
2
4
|
|
|
3
5
|
.ons-btn,
|
|
4
6
|
.ons-summary__actions,
|
|
@@ -20,7 +22,7 @@ a::after {
|
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
&__title {
|
|
23
|
-
color:
|
|
25
|
+
color: var(--ons-color-black);
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
&-nav {
|
|
@@ -33,12 +35,12 @@ a::after {
|
|
|
33
35
|
}
|
|
34
36
|
&__link,
|
|
35
37
|
&__link:hover {
|
|
36
|
-
color:
|
|
38
|
+
color: var(--ons-color-black);
|
|
37
39
|
}
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
& &__svg-logo {
|
|
41
|
-
fill:
|
|
43
|
+
fill: var(--ons-color-black);
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
|
|
@@ -49,7 +51,7 @@ a::after {
|
|
|
49
51
|
}
|
|
50
52
|
|
|
51
53
|
&__title {
|
|
52
|
-
color:
|
|
54
|
+
color: var(--ons-color-black);
|
|
53
55
|
margin-bottom: 1rem;
|
|
54
56
|
margin-left: -1.5rem;
|
|
55
57
|
text-decoration: none;
|
|
@@ -1,31 +1,32 @@
|
|
|
1
1
|
// Census brand
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
:root {
|
|
3
|
+
--ons-color-black: #222;
|
|
4
|
+
--ons-color-white: #fff;
|
|
5
|
+
--ons-color-branded: #902082;
|
|
6
|
+
--ons-color-branded-tint: rgba(144, 32, 130, 0.1); // 10% of brand colour
|
|
7
|
+
--ons-color-branded-secondary: #df0667;
|
|
8
|
+
--ons-color-branded-tertiary: #3c388e;
|
|
9
|
+
--ons-color-branded-supporting: #00a3a6;
|
|
10
|
+
--ons-color-branded-supporting-tint: rgba(#00a3a6, 0.2);
|
|
11
|
+
--ons-color-census-gradient: linear-gradient(to bottom left, #902082 0%, #3c388e 100%);
|
|
12
12
|
|
|
13
|
-
// Assignment
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
// Assignment
|
|
14
|
+
--ons-color-tag-bg: var(--ons-color-branded-supporting-tint);
|
|
15
|
+
--ons-color-text-link-hover: var(--ons-color-black);
|
|
16
|
+
}
|
|
16
17
|
|
|
17
18
|
// Overrides
|
|
18
19
|
|
|
19
20
|
// Header logo
|
|
20
21
|
.ons-header__title-logo {
|
|
21
22
|
.ons-svg-logo {
|
|
22
|
-
fill:
|
|
23
|
+
fill: var(--ons-color-white);
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
// Hero
|
|
27
28
|
.ons-hero--census {
|
|
28
|
-
background-image: linear-gradient(46deg,
|
|
29
|
+
background-image: linear-gradient(46deg, var(--ons-color-branded-tertiary) 0%, var(--ons-color-branded) 100%);
|
|
29
30
|
display: flex;
|
|
30
31
|
margin-bottom: 2px;
|
|
31
32
|
margin-top: 2px;
|
|
@@ -44,7 +45,7 @@ $color-text-link-hover: $color-black;
|
|
|
44
45
|
position: absolute;
|
|
45
46
|
}
|
|
46
47
|
.ons-hero__circle-image {
|
|
47
|
-
background-color:
|
|
48
|
+
background-color: var(--ons-color-white);
|
|
48
49
|
border-radius: 50%;
|
|
49
50
|
height: 300px;
|
|
50
51
|
right: -4px;
|
|
@@ -59,7 +60,11 @@ $color-text-link-hover: $color-black;
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
.ons-hero__circle-gradient {
|
|
62
|
-
background-image: linear-gradient(-45deg,
|
|
63
|
+
background-image: linear-gradient(-45deg,
|
|
64
|
+
var(--ons-color-branded) 0%,
|
|
65
|
+
var(--ons-color-branded) 20%,
|
|
66
|
+
var(--ons-color-branded-tertiary) 60%,
|
|
67
|
+
#005489 90%);
|
|
63
68
|
border-radius: 50%;
|
|
64
69
|
display: block;
|
|
65
70
|
height: 182px;
|
|
@@ -69,7 +74,7 @@ $color-text-link-hover: $color-black;
|
|
|
69
74
|
z-index: 3;
|
|
70
75
|
}
|
|
71
76
|
.ons-hero__circle {
|
|
72
|
-
background-color:
|
|
77
|
+
background-color: var(--ons-color-white);
|
|
73
78
|
border-radius: 50%;
|
|
74
79
|
display: block;
|
|
75
80
|
height: 990px;
|
|
@@ -80,7 +85,7 @@ $color-text-link-hover: $color-black;
|
|
|
80
85
|
z-index: 1;
|
|
81
86
|
}
|
|
82
87
|
.ons-hero__circle-lined {
|
|
83
|
-
fill:
|
|
88
|
+
fill: var(--ons-color-white);
|
|
84
89
|
height: 133px;
|
|
85
90
|
opacity: 0.4;
|
|
86
91
|
right: -24px;
|
package/scss/settings/_ids.scss
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
//
|
|
8
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--ons-color-black: #222;
|
|
3
|
+
--ons-color-branded-text: var(--ons-color-black);
|
|
4
|
+
|
|
5
|
+
// IDS brand
|
|
6
|
+
--ons-color-branded: #4d076b;
|
|
7
|
+
--ons-color-branded-tint: rgba(98, 69, 149, 0.1); // 10% of brand colour
|
|
8
|
+
--ons-color-branded-secondary: #e06c0f;
|
|
9
|
+
|
|
10
|
+
// Assignment
|
|
11
|
+
--ons-color-text-link-hover: var(--ons-color-black);
|
|
12
|
+
}
|
|
9
13
|
|
|
10
14
|
// Overrides
|
|
11
15
|
// Hero
|
|
12
16
|
.ons-hero {
|
|
13
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 400 520'%3E%3Cmask id='a' width='400' height='520' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h400v519.066H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M197.258-52.508c-38.413-38.497-35.323-35.38-73.712-73.903-17.017-17.08-27.478-36.477-26.054-61.85 1.919-34.088 16.925-58.593 48.675-71.608 33.248-13.627 63.159-6.854 88.473 18.059 39.713 39.08 37.365 37.117 76.72 76.56 38.723 38.815 27.726 27.608 66.251 66.632 30.571 30.967 30.937 80.812 1.263 112.41-28.753 30.624-82.306 32.403-112.27 2.903-40.021-39.408-29.618-29.512-69.283-69.273l-.072.069.009.001Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M587.867 63.296c-39.333 39.442-36.141 36.273-75.491 75.689-17.445 17.478-37.291 28.245-63.285 26.853-34.92-1.874-60.058-17.178-73.465-49.66-14.046-34.023-7.192-64.674 18.255-90.66C433.8-15.266 431.8-12.856 472.087-53.276c39.645-39.766 28.211-28.472 68.071-68.035 31.641-31.391 82.689-31.907 115.132-1.598 31.448 29.371 33.407 84.214 3.269 114.976-40.255 41.092-30.142 30.413-70.764 71.142l.07.076.002.01Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%
|
|
17
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 400 520'%3E%3Cmask id='a' width='400' height='520' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h400v519.066H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M197.258-52.508c-38.413-38.497-35.323-35.38-73.712-73.903-17.017-17.08-27.478-36.477-26.054-61.85 1.919-34.088 16.925-58.593 48.675-71.608 33.248-13.627 63.159-6.854 88.473 18.059 39.713 39.08 37.365 37.117 76.72 76.56 38.723 38.815 27.726 27.608 66.251 66.632 30.571 30.967 30.937 80.812 1.263 112.41-28.753 30.624-82.306 32.403-112.27 2.903-40.021-39.408-29.618-29.512-69.283-69.273l-.072.069.009.001Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M587.867 63.296c-39.333 39.442-36.141 36.273-75.491 75.689-17.445 17.478-37.291 28.245-63.285 26.853-34.92-1.874-60.058-17.178-73.465-49.66-14.046-34.023-7.192-64.674 18.255-90.66C433.8-15.266 431.8-12.856 472.087-53.276c39.645-39.766 28.211-28.472 68.071-68.035 31.641-31.391 82.689-31.907 115.132-1.598 31.448 29.371 33.407 84.214 3.269 114.976-40.255 41.092-30.142 30.413-70.764 71.142l.07.076.002.01Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%234d076b' d='M-728.821-950.538c-99.434-99.252-260.511-99.122-359.769.312-99.26 99.433-99.12 260.511.32 359.766L55.788 551.605c99.433 99.265 260.511 99.122 359.766-.312 99.265-99.433 99.122-260.511-.312-359.766L-728.821-950.538Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='401.572' x2='97.933' y1='-114.191' y2='-114.56' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='523.973' x2='524.441' y1='-144.263' y2='166.737' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
14
18
|
background-repeat: no-repeat;
|
|
15
19
|
background-size: cover;
|
|
16
20
|
|
|
@@ -22,7 +26,7 @@ $color-text-link-hover: $color-black;
|
|
|
22
26
|
// Small bp
|
|
23
27
|
@media (min-width: 500px) {
|
|
24
28
|
.ons-hero {
|
|
25
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 739 373'%3E%3Cmask id='a' width='739' height='373' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h739v372.744H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M411.285-40.014c-47.454-47.686-43.637-43.824-91.06-91.543-21.022-21.157-33.945-45.184-32.187-76.613 2.371-42.224 20.909-72.578 60.131-88.7 41.073-16.88 78.024-8.49 109.295 22.37 49.059 48.407 46.159 45.975 94.777 94.833 47.837 48.08 34.252 34.198 81.843 82.537 37.766 38.358 38.218 100.1 1.56 139.242-35.52 37.932-101.677 40.137-138.693 3.594-49.44-48.813-36.588-36.555-85.588-85.807l-.09.085.012.002Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M904.394 113.651c-48.59 48.857-44.646 44.932-93.258 93.756-21.551 21.649-46.067 34.987-78.179 33.263-43.139-2.322-74.193-21.279-90.755-61.514-17.352-42.144-8.885-80.111 22.551-112.3 49.314-50.517 46.844-47.531 96.612-97.6 48.975-49.258 34.851-35.268 84.092-84.274 39.088-38.884 102.15-39.524 142.228-1.979 38.845 36.382 41.265 104.315 4.039 142.42-49.729 50.9-37.236 37.671-87.419 88.123l.086.093.003.012Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%
|
|
29
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 739 373'%3E%3Cmask id='a' width='739' height='373' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h739v372.744H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M411.285-40.014c-47.454-47.686-43.637-43.824-91.06-91.543-21.022-21.157-33.945-45.184-32.187-76.613 2.371-42.224 20.909-72.578 60.131-88.7 41.073-16.88 78.024-8.49 109.295 22.37 49.059 48.407 46.159 45.975 94.777 94.833 47.837 48.08 34.252 34.198 81.843 82.537 37.766 38.358 38.218 100.1 1.56 139.242-35.52 37.932-101.677 40.137-138.693 3.594-49.44-48.813-36.588-36.555-85.588-85.807l-.09.085.012.002Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M904.394 113.651c-48.59 48.857-44.646 44.932-93.258 93.756-21.551 21.649-46.067 34.987-78.179 33.263-43.139-2.322-74.193-21.279-90.755-61.514-17.352-42.144-8.885-80.111 22.551-112.3 49.314-50.517 46.844-47.531 96.612-97.6 48.975-49.258 34.851-35.268 84.092-84.274 39.088-38.884 102.15-39.524 142.228-1.979 38.845 36.382 41.265 104.315 4.039 142.42-49.729 50.9-37.236 37.671-87.419 88.123l.086.093.003.012Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%234d076b' d='M-668.626-1067.49c-123.006-123.11-322.269-122.95-445.054.39-122.8 123.336-122.62 323.138.39 446.255L301.984 795.779c123.004 123.129 322.268 122.952 445.053-.387 122.797-123.337 122.62-323.139-.386-446.256L-668.626-1067.49Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='663.684' x2='288.583' y1='-116.421' y2='-116.875' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='825.463' x2='826.044' y1='-143.449' y2='241.783' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
26
30
|
|
|
27
31
|
&__container {
|
|
28
32
|
align-items: center !important;
|
|
@@ -32,7 +36,7 @@ $color-text-link-hover: $color-black;
|
|
|
32
36
|
// Medium bp
|
|
33
37
|
@media (min-width: 740px) {
|
|
34
38
|
.ons-hero {
|
|
35
|
-
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 976 373"%3E%3Cmask id="a" width="976" height="373" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"%3E%3Cpath fill="%2330279E" d="M0 0h976v372.744H0z"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%
|
|
39
|
+
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 976 373"%3E%3Cmask id="a" width="976" height="373" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"%3E%3Cpath fill="%2330279E" d="M0 0h976v372.744H0z"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%234d076b" d="M-1930.87-2218.81c-175.41-175.02-459.47-174.68-634.48.75l-76.35 76.55c-175.01 175.43-174.67 459.53.74 634.56L-302.981 825.814c175.418 175.026 459.479 174.686 634.483-.745l76.356-76.548c175.004-175.439 174.663-459.534-.747-634.56L-1930.87-2218.81Z"/%3E%3Cpath fill="url(%23b)" d="M179.204-186.115C62.374-302.862 71.748-293.391-45.006-410.219c-51.762-51.79-83.645-110.676-79.46-187.768 5.622-103.581 51.038-178.092 147.347-217.802 100.873-41.595 191.712-21.168 268.707 54.364 120.795 118.508 113.665 112.554 233.371 232.168 117.796 117.702 84.351 83.736 201.513 202.062 92.992 93.919 94.399 245.336 4.5 341.51-87.118 93.197-249.69 98.885-340.818 9.428-121.725-119.49-90.079-89.483-210.738-210.06l-.211.209-.001-.007Z" style="mix-blend-mode:multiply"/%3E%3Cpath fill="url(%23c)" d="M1209.6 173.899c-95.89 96.116-88.11 88.408-184.05 184.461-42.542 42.585-90.912 68.825-154.262 65.411-85.116-4.59-146.363-41.91-179.036-121.102-34.22-82.947-17.478-157.657 44.561-221 97.328-99.38 92.442-93.514 190.678-192.004 96.669-96.915 68.773-69.398 165.959-165.787 77.13-76.511 201.56-77.717 280.62-3.816 76.62 71.612 81.36 205.305 7.89 280.282-98.14 100.145-73.5 74.112-172.52 173.38l.17.175h-.01Z" style="mix-blend-mode:multiply"/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id="b" x1="796.834" x2="-124.998" y1="-374.928" y2="-374.215" gradientUnits="userSpaceOnUse"%3E%3Cstop offset=".04" stop-color="%23869A38"/%3E%3Cstop offset="1" stop-color="%234C863F"/%3E%3C/linearGradient%3E%3ClinearGradient id="c" x1="1054.17" x2="1055.03" y1="-334.443" y2="423.667" gradientUnits="userSpaceOnUse"%3E%3Cstop offset=".49" stop-color="%23C66B20"/%3E%3Cstop offset="1" stop-color="%23DD902F"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
|
|
36
40
|
|
|
37
41
|
&__details {
|
|
38
42
|
padding-bottom: 1rem;
|
|
@@ -43,6 +47,6 @@ $color-text-link-hover: $color-black;
|
|
|
43
47
|
// Large bp
|
|
44
48
|
@media (min-width: 980px) {
|
|
45
49
|
.ons-hero {
|
|
46
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1920 629'%3E%3Cmask id='a' width='1920' height='629' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h1920v628.219H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%
|
|
50
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1920 629'%3E%3Cmask id='a' width='1920' height='629' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h1920v628.219H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%234d076b' d='M-1285.11-2148.85c-174.93-176.44-461.03-178.91-639.04-5.53l-77.66 75.65c-178.01 173.38-180.5 456.97-5.58 633.41L324.066 906.306c174.929 176.444 461.028 178.914 639.036 5.529l77.668-75.652c178.01-173.389 180.5-456.969 5.58-633.409L-1285.11-2148.85Z'/%3E%3Cpath fill='url(%23b)' d='M702.452-229.24C546.533-385.046 559.044-372.408 403.227-528.322c-69.079-69.117-111.629-147.705-106.044-250.589 7.503-138.236 68.114-237.679 196.645-290.669 134.622-55.51 255.853-28.25 358.607 72.549C1013.64-838.874 1004.13-846.82 1163.89-687.187c157.2 157.081 112.57 111.751 268.93 269.666 124.1 125.341 125.98 327.417 6 455.77-116.26 124.376-333.23 131.967-454.841 12.58-162.45-159.467-120.217-119.421-281.245-280.338l-.282.278v-.009Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M1993.15 254.591c-115.74 115.382-106.34 106.129-222.16 221.436-51.34 51.122-109.65 82.548-185.9 78.231-102.44-5.805-176.04-50.931-215.11-146.365-40.92-99.959-20.52-189.836 54.36-265.879C1541.83 22.705 1535.93 29.751 1654.5-88.482c116.68-116.342 83.02-83.311 200.32-199.018 93.1-91.845 242.88-92.887 337.81-3.67 91.99 86.455 97.25 247.401 8.57 337.413-118.46 120.225-88.71 88.97-208.24 208.136l.2.212h-.01Z' style='mix-blend-mode:multiply'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='1526.72' x2='296.473' y1='-481.225' y2='-480.273' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='1807.73' x2='1806.27' y1='-357.833' y2='554.737' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
|
47
51
|
}
|
|
48
52
|
}
|
|
@@ -1,17 +1,8 @@
|
|
|
1
|
-
@each $label, $color in (blue:
|
|
1
|
+
@each $label, $color in (blue: blue, green: green) {
|
|
2
2
|
.ons-u-#{'' + $label} {
|
|
3
3
|
color: $color;
|
|
4
4
|
}
|
|
5
5
|
.ons-u-bg-#{'' + $label} {
|
|
6
6
|
background-color: $color;
|
|
7
7
|
}
|
|
8
|
-
|
|
9
|
-
@for $tint from 1 through 10 {
|
|
10
|
-
.ons-u-#{'' + $label}-#{$tint*10} {
|
|
11
|
-
color: tint($color, $tint * 10);
|
|
12
|
-
}
|
|
13
|
-
.ons-u-bg-#{'' + $label}-#{$tint*10} {
|
|
14
|
-
background-color: tint($color, $tint * 10);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
8
|
}
|
|
@@ -112,13 +112,13 @@
|
|
|
112
112
|
@include bp-suffix(ons-grid--bordered, false) {
|
|
113
113
|
margin-left: 0;
|
|
114
114
|
.ons-grid__col {
|
|
115
|
-
border-bottom: 1px solid
|
|
116
|
-
border-top: 1px solid
|
|
115
|
+
border-bottom: 1px solid var(--ons-color-borders);
|
|
116
|
+
border-top: 1px solid var(--ons-color-borders);
|
|
117
117
|
flex: 1 1 auto;
|
|
118
118
|
padding-bottom: 1rem;
|
|
119
119
|
padding-top: 1rem;
|
|
120
120
|
&:first-of-type {
|
|
121
|
-
border-right: 1px solid
|
|
121
|
+
border-right: 1px solid var(--ons-color-borders);
|
|
122
122
|
padding-left: 0;
|
|
123
123
|
}
|
|
124
124
|
}
|