@asd20/ui 3.2.997 → 3.2.998
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/package.json +1 -1
- package/src/components/atoms/Asd20Icon/index.stories.js +1 -1
- package/src/components/atoms/icons/Asd20ChevronSvg.vue +16 -1
- package/src/components/atoms/icons/Asd20CloseSvg.vue +27 -1
- package/src/components/atoms/icons/Asd20CoraSvg.vue +3 -4
- package/src/components/atoms/icons/Asd20DirectorySvg.vue +10 -5
- package/src/components/atoms/icons/Asd20DistrictSvg.vue +23 -0
- package/src/components/atoms/icons/Asd20FinanceSvg.vue +8 -9
- package/src/components/atoms/icons/Asd20LinkSvg.vue +1 -1
- package/src/components/atoms/icons/Asd20MenuSvg.vue +16 -1
- package/src/components/atoms/icons/Asd20RegisterSvg.vue +10 -16
- package/src/components/atoms/icons/Asd20SearchSvg.vue +27 -1
- package/src/components/atoms/icons/Asd20WebsiteSvg.vue +1 -1
- package/src/components/molecules/Asd20Picker/index.vue +3 -0
- package/src/components/organisms/Asd20VideoHeaderContent/index.vue +3 -43
- package/src/design/tokens.css +23 -23
package/package.json
CHANGED
|
@@ -120,6 +120,7 @@ storiesOf('Atoms - Asd20Icon', module)
|
|
|
120
120
|
'danger',
|
|
121
121
|
'directions',
|
|
122
122
|
'directory',
|
|
123
|
+
'district',
|
|
123
124
|
'files',
|
|
124
125
|
'finance',
|
|
125
126
|
'hours',
|
|
@@ -128,7 +129,6 @@ storiesOf('Atoms - Asd20Icon', module)
|
|
|
128
129
|
'language',
|
|
129
130
|
'link',
|
|
130
131
|
'login',
|
|
131
|
-
'pearson',
|
|
132
132
|
'personalize',
|
|
133
133
|
'phone',
|
|
134
134
|
'register',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<template>
|
|
1
|
+
<!-- <template>
|
|
2
2
|
<g>
|
|
3
3
|
<path
|
|
4
4
|
class="line"
|
|
@@ -6,4 +6,19 @@
|
|
|
6
6
|
d="M16 11.05l-8.49 8.49 1.42 1.41L16 13.88l7.07 7.07 1.41-1.41L16 11.05z"
|
|
7
7
|
/>
|
|
8
8
|
</g>
|
|
9
|
+
</template> -->
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<g>
|
|
13
|
+
<path
|
|
14
|
+
class="line"
|
|
15
|
+
d="M8 19.5L16 11.05L24 19.5"
|
|
16
|
+
fill="none"
|
|
17
|
+
stroke="currentColor"
|
|
18
|
+
stroke-width="2"
|
|
19
|
+
stroke-linecap="round"
|
|
20
|
+
stroke-linejoin="round"
|
|
21
|
+
/>
|
|
22
|
+
</g>
|
|
9
23
|
</template>
|
|
24
|
+
|
|
@@ -1,13 +1,39 @@
|
|
|
1
|
-
<template>
|
|
1
|
+
<!-- <template>
|
|
2
2
|
<g>
|
|
3
3
|
<path
|
|
4
4
|
class="line"
|
|
5
5
|
fill="currentColor"
|
|
6
6
|
d="M7.512 23.071L23.068 7.515l1.415 1.414L8.926 24.485z"
|
|
7
|
+
stroke-linecap="round"
|
|
7
8
|
/><path
|
|
8
9
|
class="line"
|
|
9
10
|
fill="currentColor"
|
|
10
11
|
d="M8.929 7.512l15.556 15.556-1.414 1.415L7.515 8.926z"
|
|
12
|
+
stroke-linecap="round"
|
|
13
|
+
/>
|
|
14
|
+
</g>
|
|
15
|
+
</template> -->
|
|
16
|
+
|
|
17
|
+
<template>
|
|
18
|
+
<g>
|
|
19
|
+
<!-- Perfectly symmetrical diagonals -->
|
|
20
|
+
<path
|
|
21
|
+
class="line"
|
|
22
|
+
d="M8 24L24 8"
|
|
23
|
+
fill="none"
|
|
24
|
+
stroke="currentColor"
|
|
25
|
+
stroke-width="2"
|
|
26
|
+
stroke-linecap="round"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
class="line"
|
|
30
|
+
d="M8 8L24 24"
|
|
31
|
+
fill="none"
|
|
32
|
+
stroke="currentColor"
|
|
33
|
+
stroke-width="2"
|
|
34
|
+
stroke-linecap="round"
|
|
11
35
|
/>
|
|
12
36
|
</g>
|
|
13
37
|
</template>
|
|
38
|
+
|
|
39
|
+
|
|
@@ -91,10 +91,9 @@
|
|
|
91
91
|
width="14"
|
|
92
92
|
height="19"
|
|
93
93
|
rx="2.2"
|
|
94
|
-
class="
|
|
95
|
-
fill="white"
|
|
94
|
+
class="fill"
|
|
96
95
|
stroke="currentColor"
|
|
97
|
-
stroke-width="1"
|
|
96
|
+
stroke-width="1.5"
|
|
98
97
|
/>
|
|
99
98
|
<rect x="11" y="12" width="9" height="1" rx="0.6" class="line" stroke="currentColor" stroke-width="0.5"/>
|
|
100
99
|
<rect x="11" y="14" width="9" height="1" rx="0.6" class="line" stroke="currentColor" stroke-width="0.5"/>
|
|
@@ -105,7 +104,7 @@
|
|
|
105
104
|
d="M23.5 21.5 17.7 27.3C17.3 27.7 16.7 28 16.1 28.1L12.9 28.7 13.5 25.6C13.6 25 13.9 24.4 14.3 24L20.1 18.2M23.5 21.5 25 20C25.4 19.6 25.4 18.9 25 18.5L24 17.5C23.076 16.548 22.378 16.077 21.663 16.84L20.111 18.193M23.5 21.5 20.1 18.2"
|
|
106
105
|
class="fill"
|
|
107
106
|
stroke="currentColor"
|
|
108
|
-
stroke-width="1"
|
|
107
|
+
stroke-width="1.5"
|
|
109
108
|
stroke-linecap="round"
|
|
110
109
|
stroke-linejoin="round"
|
|
111
110
|
/>
|
|
@@ -78,15 +78,20 @@
|
|
|
78
78
|
/>
|
|
79
79
|
<!-- Document, using the mask so lines are "see through" -->
|
|
80
80
|
<rect
|
|
81
|
-
x="8.5" y="8" width="14" height="
|
|
81
|
+
x="8.5" y="8" width="14" height="18" rx="2.2"
|
|
82
82
|
class="line"
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
stroke="currentColor"
|
|
84
|
+
stroke-width="2"
|
|
85
|
+
fill="none"
|
|
85
86
|
/>
|
|
87
|
+
<rect x="11" y="12" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
88
|
+
<rect x="11" y="14" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
89
|
+
<rect x="11" y="16" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
90
|
+
<rect x="11" y="19" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
86
91
|
<!-- Person (body and head, clearly defined) -->
|
|
87
92
|
<!-- Head -->
|
|
88
|
-
<circle cx="23
|
|
93
|
+
<circle cx="23" cy="15" r="3" class="fill"/>
|
|
89
94
|
<!-- Body -->
|
|
90
|
-
<rect x="
|
|
95
|
+
<rect x="19" y="18" width="8" height="8" rx="1.3" class="fill"/>
|
|
91
96
|
</g>
|
|
92
97
|
</template>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<g
|
|
3
|
+
viewBox="0 0 32 40"
|
|
4
|
+
width="128"
|
|
5
|
+
height="160"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<!-- 3/4 Circle outline (open at bottom) -->
|
|
9
|
+
<path
|
|
10
|
+
d="M6 28 a15 15 0 1 1 20 0"
|
|
11
|
+
fill="none"
|
|
12
|
+
class="line"
|
|
13
|
+
stroke="currentColor"
|
|
14
|
+
stroke-width="2"
|
|
15
|
+
stroke-linecap="round"
|
|
16
|
+
/>
|
|
17
|
+
<path
|
|
18
|
+
class="line"
|
|
19
|
+
fill="currentColor"
|
|
20
|
+
d="M 22.955 20.095 L 16.055 4 L 5 27.445 l 7.3275 -13.6875 l 0.6225 4.7138 l 2.8688 -6.0675 l 2.9925 12.66 l 0.5138 -10.275 l 3.63 5.3063 z"
|
|
21
|
+
/>
|
|
22
|
+
</g>
|
|
23
|
+
</template>
|
|
@@ -25,16 +25,16 @@
|
|
|
25
25
|
stroke-linecap="round"
|
|
26
26
|
/>
|
|
27
27
|
<!-- Calculator body (fill color, rounded) -->
|
|
28
|
-
<rect x="8" y="
|
|
28
|
+
<rect x="8" y="6" width="16" height="21" rx="3" class="fill"/>
|
|
29
29
|
<!-- Calculator display (line color, rounded) -->
|
|
30
|
-
<rect x="10" y="
|
|
30
|
+
<rect x="10" y="8" width="12" height="7" rx="1" class="line" fill="currentColor"/>
|
|
31
31
|
<!-- Calculator buttons (line color, rounded) -->
|
|
32
|
-
<rect x="11" y="17" width="2
|
|
33
|
-
<rect x="15" y="17" width="2
|
|
34
|
-
<rect x="19" y="17" width="2
|
|
35
|
-
<rect x="11" y="21" width="2
|
|
36
|
-
<rect x="15" y="21" width="2
|
|
37
|
-
<rect x="19" y="21" width="2
|
|
32
|
+
<rect x="11" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
33
|
+
<rect x="15" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
34
|
+
<rect x="19" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
35
|
+
<rect x="11" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
36
|
+
<rect x="15" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
37
|
+
<rect x="19" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
|
|
38
38
|
<!-- Dollar sign ($) in display (line color) -->
|
|
39
39
|
<text
|
|
40
40
|
x="16"
|
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
font-family="sans-serif"
|
|
46
46
|
font-weight="bold"
|
|
47
47
|
class="fill"
|
|
48
|
-
fill="white"
|
|
49
48
|
style="pointer-events: none;"
|
|
50
49
|
>$</text>
|
|
51
50
|
</g>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<!-- Browser window (rounded rectangle, outline color) -->
|
|
18
18
|
<rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
|
|
19
19
|
<!-- Toolbar (top bar, cutout from window, background shows through) -->
|
|
20
|
-
<rect x="7.8" y="10" width="16.4" height="3" rx="1.2"
|
|
20
|
+
<rect x="7.8" y="10" width="16.4" height="3" rx="1.2" class="fill"/>
|
|
21
21
|
<!-- Toolbar circles (left) -->
|
|
22
22
|
<circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
|
|
23
23
|
<circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
|
|
@@ -1,9 +1,24 @@
|
|
|
1
|
-
<template>
|
|
1
|
+
<!-- <template>
|
|
2
2
|
<g>
|
|
3
3
|
<path
|
|
4
4
|
class="line"
|
|
5
5
|
fill="currentColor"
|
|
6
6
|
d="M5 10h22v2H5zM5 15h22v2H5zM5 20h22v2H5z"
|
|
7
|
+
stroke-linecap="round"
|
|
8
|
+
/>
|
|
9
|
+
</g>
|
|
10
|
+
</template> -->
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<g>
|
|
14
|
+
<path
|
|
15
|
+
class="line"
|
|
16
|
+
d="M5 11h22M5 16h22M5 21h22"
|
|
17
|
+
fill="none"
|
|
18
|
+
stroke="currentColor"
|
|
19
|
+
stroke-width="2"
|
|
20
|
+
stroke-linecap="round"
|
|
7
21
|
/>
|
|
8
22
|
</g>
|
|
9
23
|
</template>
|
|
24
|
+
|
|
@@ -42,32 +42,26 @@
|
|
|
42
42
|
<path d="M9 14L21 14" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
43
43
|
<path d="M9 17H21" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
44
44
|
<path d="M9 20H15" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /> -->
|
|
45
|
-
|
|
46
|
-
<!-- Document lines "cut out" via mask -->
|
|
47
|
-
<mask id="docMask">
|
|
48
|
-
<!-- Fill entire area (white = opaque) -->
|
|
49
|
-
<rect x="8.5" y="8" width="14" height="19" rx="2.2" fill="white"/>
|
|
50
|
-
<!-- Lines to be transparent (black = transparent) -->
|
|
51
|
-
<rect x="11" y="12" width="9" height="1.1" rx="0.6" fill="black"/>
|
|
52
|
-
<rect x="11" y="14" width="9" height="1.1" rx="0.6" fill="black"/>
|
|
53
|
-
<rect x="11" y="16" width="9" height="1.1" rx="0.6" fill="black"/>
|
|
54
|
-
<rect x="11" y="19" width="7" height="1.1" rx="0.6" fill="black"/>
|
|
55
|
-
</mask>
|
|
56
|
-
</defs>
|
|
45
|
+
|
|
57
46
|
|
|
58
47
|
<!-- Document, using the mask so lines are "see through" -->
|
|
59
48
|
<rect
|
|
60
|
-
x="8.5" y="8" width="14" height="
|
|
49
|
+
x="8.5" y="8" width="14" height="18" rx="2.2"
|
|
61
50
|
class="line"
|
|
62
|
-
|
|
63
|
-
|
|
51
|
+
stroke="currentColor"
|
|
52
|
+
stroke-width="2"
|
|
53
|
+
fill="none"
|
|
64
54
|
/>
|
|
55
|
+
<rect x="11" y="12" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
56
|
+
<rect x="11" y="14" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
57
|
+
<rect x="11" y="16" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
58
|
+
<rect x="11" y="19" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
|
|
65
59
|
<!-- Pencil/Check/edit mark (line color) -->
|
|
66
60
|
<path
|
|
67
61
|
d="M23.5 21.5 17.7 27.3C17.3 27.7 16.7 28 16.1 28.1L12.9 28.7 13.5 25.6C13.6 25 13.9 24.4 14.3 24L20.1 18.2M23.5 21.5 25 20C25.4 19.6 25.4 18.9 25 18.5L24 17.5C23.076 16.548 22.378 16.077 21.663 16.84L20.111 18.193M23.5 21.5 20.1 18.2"
|
|
68
62
|
class="fill"
|
|
69
63
|
stroke="currentColor"
|
|
70
|
-
stroke-width="
|
|
64
|
+
stroke-width="1"
|
|
71
65
|
stroke-linecap="round"
|
|
72
66
|
stroke-linejoin="round"
|
|
73
67
|
/>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<template>
|
|
1
|
+
<!-- <template>
|
|
2
2
|
<g>
|
|
3
3
|
<path
|
|
4
4
|
class="line"
|
|
@@ -6,4 +6,30 @@
|
|
|
6
6
|
d="M14.26 7.76a6.49 6.49 0 0 1 5.1 10.52l-.48.6-.6.48a6.5 6.5 0 1 1-4-11.6m0-2a8.5 8.5 0 1 0 5.25 15.17l5.32 5.31 1.41-1.41-5.31-5.32a8.49 8.49 0 0 0-6.69-13.75z"
|
|
7
7
|
/>
|
|
8
8
|
</g>
|
|
9
|
+
</template> -->
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<g>
|
|
13
|
+
<!-- Circle of magnifying glass -->
|
|
14
|
+
<circle
|
|
15
|
+
cx="14.26"
|
|
16
|
+
cy="14.26"
|
|
17
|
+
r="8.5"
|
|
18
|
+
fill="none"
|
|
19
|
+
stroke="currentColor"
|
|
20
|
+
stroke-width="2"
|
|
21
|
+
stroke-linecap="round"
|
|
22
|
+
stroke-linejoin="round"
|
|
23
|
+
/>
|
|
24
|
+
<!-- Handle -->
|
|
25
|
+
<line
|
|
26
|
+
x1="19.51"
|
|
27
|
+
y1="19.51"
|
|
28
|
+
x2="26"
|
|
29
|
+
y2="26"
|
|
30
|
+
stroke="currentColor"
|
|
31
|
+
stroke-width="2"
|
|
32
|
+
stroke-linecap="round"
|
|
33
|
+
/>
|
|
34
|
+
</g>
|
|
9
35
|
</template>
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<!-- Browser window (rounded rectangle, outline color) -->
|
|
34
34
|
<rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
|
|
35
35
|
<!-- Toolbar (top bar, cutout from window, background shows through) -->
|
|
36
|
-
<rect x="7.8" y="10" width="16.4" height="3" rx="1.2"
|
|
36
|
+
<rect x="7.8" y="10" width="16.4" height="3" rx="1.2" class="fill"/>
|
|
37
37
|
<!-- Toolbar circles (left) -->
|
|
38
38
|
<circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
|
|
39
39
|
<circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
|
|
@@ -3,11 +3,6 @@
|
|
|
3
3
|
<slot name="before"></slot>
|
|
4
4
|
|
|
5
5
|
<section class="header-messaging-section">
|
|
6
|
-
<!-- <asd20-messaging
|
|
7
|
-
v-for="(messaging, index) in messages"
|
|
8
|
-
:key="index"
|
|
9
|
-
v-bind="messaging"
|
|
10
|
-
></asd20-messaging> -->
|
|
11
6
|
<asd20-messaging
|
|
12
7
|
id="main"
|
|
13
8
|
v-bind="messages[0]"
|
|
@@ -81,20 +76,6 @@ export default {
|
|
|
81
76
|
|
|
82
77
|
.asd20-video-header-content {
|
|
83
78
|
.asd20-messaging {
|
|
84
|
-
// margin-bottom: space(1);
|
|
85
|
-
// background-image: linear-gradient(
|
|
86
|
-
// to right,
|
|
87
|
-
// rgba(255, 255, 255, 0.9) 70%,
|
|
88
|
-
// rgba(255, 255, 255, 0.5) 90%,
|
|
89
|
-
// rgba(255, 255, 255, 0) 100%
|
|
90
|
-
// );
|
|
91
|
-
// background-image: linear-gradient(
|
|
92
|
-
// to right,
|
|
93
|
-
// rgba(8, 24, 43, 0.9) 50%,
|
|
94
|
-
// rgba(8, 24, 43, 0.5) 80%,
|
|
95
|
-
// rgba(8, 24, 43, 0) 100%
|
|
96
|
-
// );
|
|
97
|
-
// background: rgba(51, 92, 155, 0.7);
|
|
98
79
|
background: var(--color-minus-alpha)
|
|
99
80
|
var(--website-homepage-header__background-style);
|
|
100
81
|
padding: space(3) space(1) space(1) space(1);
|
|
@@ -112,7 +93,6 @@ export default {
|
|
|
112
93
|
}
|
|
113
94
|
&::v-deep .lead {
|
|
114
95
|
margin-bottom: 0;
|
|
115
|
-
// width: 90%;
|
|
116
96
|
@include fluid-type($base-font-size * 1, $base-font-size * 1.15);
|
|
117
97
|
color: var(--website-homepage-header__foreground-color) !important;
|
|
118
98
|
}
|
|
@@ -131,9 +111,10 @@ export default {
|
|
|
131
111
|
border: none;
|
|
132
112
|
position: relative;
|
|
133
113
|
padding: space(0.5) space(1);
|
|
134
|
-
// height: 50px;
|
|
135
|
-
// line-height: 50px;
|
|
136
114
|
transition: background-color 0.3s ease;
|
|
115
|
+
z-index: 2;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
|
|
137
118
|
&::before {
|
|
138
119
|
content: '';
|
|
139
120
|
position: absolute;
|
|
@@ -164,8 +145,6 @@ export default {
|
|
|
164
145
|
}
|
|
165
146
|
}
|
|
166
147
|
.header-messaging-section {
|
|
167
|
-
// border-bottom: 10px solid var(--color__accent);
|
|
168
|
-
// text-shadow: 1px 1px 4px black !important;
|
|
169
148
|
&::v-deep .asd20-messaging__content {
|
|
170
149
|
margin: space(1) 0 0 0;
|
|
171
150
|
}
|
|
@@ -174,11 +153,9 @@ export default {
|
|
|
174
153
|
@keyframes slide_down {
|
|
175
154
|
from {
|
|
176
155
|
opacity: 0;
|
|
177
|
-
// bottom: space(2);
|
|
178
156
|
}
|
|
179
157
|
to {
|
|
180
158
|
opacity: 1;
|
|
181
|
-
// botom: space(-0.74);
|
|
182
159
|
}
|
|
183
160
|
}
|
|
184
161
|
@keyframes slide_left {
|
|
@@ -265,28 +242,11 @@ export default {
|
|
|
265
242
|
position: absolute;
|
|
266
243
|
width: 75%;
|
|
267
244
|
top: 0;
|
|
268
|
-
// bottom: space(-0.74);
|
|
269
245
|
left: 3.25rem;
|
|
270
246
|
height: 100%;
|
|
271
247
|
right: 0;
|
|
272
248
|
z-index: -1;
|
|
273
|
-
// background: var(--color__accent);
|
|
274
|
-
// background: linear-gradient(
|
|
275
|
-
// to right,
|
|
276
|
-
// var(--color__accent) 50%,
|
|
277
|
-
// rgba(255, 255, 255, 0.5) 90%,
|
|
278
|
-
// rgba(255, 255, 255, 0) 100%
|
|
279
|
-
// );
|
|
280
|
-
// background: radial-gradient(
|
|
281
|
-
// ellipse at bottom left,
|
|
282
|
-
// var(--color__accent) 30%,
|
|
283
|
-
// rgba(255, 255, 255, 0) 70%,
|
|
284
|
-
// rgba(255, 255, 255, 0) 80%,
|
|
285
|
-
// rgba(255, 255, 255, 0) 90%,
|
|
286
|
-
// rgba(0, 0, 0, 0) 100%
|
|
287
|
-
// );
|
|
288
249
|
border-left: 30px solid var(--website-homepage-header__accent);
|
|
289
|
-
// border-bottom: 20px solid var(--website-homepage-header__accent);
|
|
290
250
|
animation: slide_down 2.5s ease-in-out 0.5s both;
|
|
291
251
|
}
|
|
292
252
|
}
|
package/src/design/tokens.css
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--color__accent-s100: #
|
|
3
|
-
--color__accent-s90:
|
|
4
|
-
--color__accent-s80:
|
|
5
|
-
--color__accent-s70:
|
|
6
|
-
--color__accent-s60:
|
|
7
|
-
--color__accent-s50:
|
|
8
|
-
--color__accent-s40:
|
|
9
|
-
--color__accent-s30:
|
|
10
|
-
--color__accent-s20:
|
|
11
|
-
--color__accent-s10:
|
|
12
|
-
--color__accent:
|
|
13
|
-
--color__accent-t10:
|
|
14
|
-
--color__accent-t20:
|
|
15
|
-
--color__accent-t30:
|
|
16
|
-
--color__accent-t40:
|
|
17
|
-
--color__accent-t50:
|
|
18
|
-
--color__accent-t60:
|
|
19
|
-
--color__accent-t70:
|
|
20
|
-
--color__accent-t80:
|
|
21
|
-
--color__accent-t90:
|
|
22
|
-
--color__accent-t100: #
|
|
2
|
+
--color__accent-s100: #000;
|
|
3
|
+
--color__accent-s90: #01040b;
|
|
4
|
+
--color__accent-s80: #030916;
|
|
5
|
+
--color__accent-s70: #0f1c50;
|
|
6
|
+
--color__accent-s60: #12205c;
|
|
7
|
+
--color__accent-s50: #142469;
|
|
8
|
+
--color__accent-s40: #182a7a;
|
|
9
|
+
--color__accent-s30: #1b2f87;
|
|
10
|
+
--color__accent-s20: #1e3493;
|
|
11
|
+
--color__accent-s10: #1e3493;
|
|
12
|
+
--color__accent: #225da5;
|
|
13
|
+
--color__accent-t10: #326aaf;
|
|
14
|
+
--color__accent-t20: #4479b9;
|
|
15
|
+
--color__accent-t30: #5b8bc4;
|
|
16
|
+
--color__accent-t40: #749dce;
|
|
17
|
+
--color__accent-t50: #8badd6;
|
|
18
|
+
--color__accent-t60: #a0bbdd;
|
|
19
|
+
--color__accent-t70: #b7cbe5;
|
|
20
|
+
--color__accent-t80: #cad9ec;
|
|
21
|
+
--color__accent-t90: #dce5f1;
|
|
22
|
+
--color__accent-t100: #fff;
|
|
23
23
|
--color__on-accent: #ffffff;
|
|
24
24
|
--color__on-primary: #ffffff;
|
|
25
25
|
--color__on-secondary: #ffffff;
|
|
@@ -194,8 +194,8 @@
|
|
|
194
194
|
--website-shape__line-thickness: 2px;
|
|
195
195
|
--website-shape__odd-transform: none;
|
|
196
196
|
--website-shape__radius-l: 2px;
|
|
197
|
-
--website-shape__radius-m:
|
|
198
|
-
--website-shape__radius-s:
|
|
197
|
+
--website-shape__radius-m: 5px;
|
|
198
|
+
--website-shape__radius-s: 10px;
|
|
199
199
|
--website-shape__transform: none;
|
|
200
200
|
--website-texture__default: url('/statics/images/chalk-dark.png');
|
|
201
201
|
--website-texture__position: center center;
|