@asd20/ui 3.2.997 → 3.2.999

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.
Files changed (17) hide show
  1. package/package.json +1 -1
  2. package/src/components/atoms/Asd20Icon/index.stories.js +1 -1
  3. package/src/components/atoms/icons/Asd20ChevronSvg.vue +16 -1
  4. package/src/components/atoms/icons/Asd20CloseSvg.vue +27 -1
  5. package/src/components/atoms/icons/Asd20CoraSvg.vue +3 -4
  6. package/src/components/atoms/icons/Asd20DirectorySvg.vue +10 -5
  7. package/src/components/atoms/icons/Asd20DistrictSvg.vue +23 -0
  8. package/src/components/atoms/icons/Asd20FinanceSvg.vue +8 -9
  9. package/src/components/atoms/icons/Asd20LinkSvg.vue +38 -12
  10. package/src/components/atoms/icons/Asd20MenuSvg.vue +16 -1
  11. package/src/components/atoms/icons/Asd20RegisterSvg.vue +10 -16
  12. package/src/components/atoms/icons/Asd20SearchSvg.vue +27 -1
  13. package/src/components/atoms/icons/Asd20WebsiteSvg.vue +10 -10
  14. package/src/components/molecules/Asd20Picker/index.vue +3 -0
  15. package/src/components/organisms/Asd20QuicklinksMenu/index.vue +1 -1
  16. package/src/components/organisms/Asd20VideoHeaderContent/index.vue +3 -43
  17. package/src/design/tokens.css +23 -23
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.997",
8
+ "version": "3.2.999",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/atoms/Asd20Icon/index.stories.js 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',
package/src/components/atoms/icons/Asd20ChevronSvg.vue CHANGED
@@ -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
+
package/src/components/atoms/icons/Asd20CloseSvg.vue CHANGED
@@ -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
+
package/src/components/atoms/icons/Asd20CoraSvg.vue CHANGED
@@ -91,10 +91,9 @@
91
91
  width="14"
92
92
  height="19"
93
93
  rx="2.2"
94
- class="line"
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
  />
package/src/components/atoms/icons/Asd20DirectorySvg.vue CHANGED
@@ -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="19" rx="2.2"
81
+ x="8.5" y="8" width="14" height="18" rx="2.2"
82
82
  class="line"
83
- fill="currentColor"
84
- mask="url(#docMask)"
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.7" cy="16" r="2.3" class="fill"/>
93
+ <circle cx="23" cy="15" r="3" class="fill"/>
89
94
  <!-- Body -->
90
- <rect x="20.3" y="18.3" width="6.8" height="7.4" rx="1.3" class="fill"/>
95
+ <rect x="19" y="18" width="8" height="8" rx="1.3" class="fill"/>
91
96
  </g>
92
97
  </template>
package/src/components/atoms/icons/Asd20DistrictSvg.vue ADDED
@@ -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.623 18.751 L 16.6 4.5 C 16.449 4.216 16.278 3.873 15.859 3.588 C 15.403 3.854 15.308 4.33 15.2 4.5 L 7.413 24.441 C 7.002 25.263 7.467 25.236 7.796 24.578 L 12.743 14.976 L 13.42 17.834 C 13.78 19.08 13.808 18.942 14.191 17.844 L 15.428 14.029 L 18.344 21.974 C 18.817 23.263 19.032 23.564 19.204 21.888 L 19.007 14.423 L 21.965 19.006 C 22.368 19.537 23.622 21.003 22.942 19.388 Z"
21
+ />
22
+ </g>
23
+ </template>
package/src/components/atoms/icons/Asd20FinanceSvg.vue CHANGED
@@ -25,16 +25,16 @@
25
25
  stroke-linecap="round"
26
26
  />
27
27
  <!-- Calculator body (fill color, rounded) -->
28
- <rect x="8" y="7" width="16" height="20" rx="3" class="fill"/>
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="9" width="12" height="6" rx="1" class="line" fill="currentColor"/>
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.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
33
- <rect x="15" y="17" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
34
- <rect x="19" y="17" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
35
- <rect x="11" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
36
- <rect x="15" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
37
- <rect x="19" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
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>
package/src/components/atoms/icons/Asd20LinkSvg.vue CHANGED
@@ -15,20 +15,46 @@
15
15
  stroke-linecap="round"
16
16
  />
17
17
  <!-- Browser window (rounded rectangle, outline color) -->
18
- <rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
18
+ <rect
19
+ x="6"
20
+ y="8"
21
+ width="20"
22
+ height="17"
23
+ rx="2.5"
24
+ class="line"
25
+ fill="currentColor"
26
+ />
19
27
  <!-- Toolbar (top bar, cutout from window, background shows through) -->
20
- <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" fill="#fff"/>
28
+ <rect
29
+ x="8"
30
+ y="10"
31
+ width="16"
32
+ height="3"
33
+ rx="1.2"
34
+ class="line"
35
+ fill="#fff"
36
+ />
21
37
  <!-- Toolbar circles (left) -->
22
- <circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
23
- <circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
24
- <circle cx="12.8" cy="11.7" r="0.55" class="line" fill="currentColor"/>
38
+ <circle cx="10" cy="11.5" r="0.55" class="line" fill="currentColor" />
39
+ <circle cx="12" cy="11.5" r="0.55" class="line" fill="currentColor" />
40
+ <circle cx="14" cy="11.5" r="0.55" class="line" fill="currentColor" />
25
41
  <!-- Toolbar right bar -->
26
- <rect x="16.7" y="11.1" width="5.1" height="1.1" rx="0.5" class="line" fill="currentColor"/>
27
-
28
- <!-- Three horizontal lines (fill color, like page content) -->
29
- <path
30
- d="M 15.5251 15.2678 C 16.0167 14.7762 16.6835 14.5 17.3787 14.5 C 18.8264 14.5 20 15.6736 20 17.1213 C 20 17.8165 19.7238 18.4833 19.2323 18.9749 L 18.2071 20 L 17.5 19.2929 L 18.5252 18.2678 C 18.8292 17.9637 19 17.5513 19 17.1213 C 19 16.2259 18.2741 15.5 17.3787 15.5 C 16.9487 15.5 16.5363 15.6708 16.2322 15.9749 L 15.2071 17 L 14.5 16.2929 L 15.5251 15.2678 Z M 15.7678 21.0252 L 16.7929 20 L 17.5 20.7071 L 16.4749 21.7323 C 15.9833 22.2238 15.3165 22.5 14.6213 22.5 C 13.1736 22.5 12 21.3264 12 19.8787 C 12 19.1835 12.2762 18.5167 12.7678 18.0251 L 13.7929 17 L 14.5 17.7071 L 13.4749 18.7322 C 13.1708 19.0363 13 19.4487 13 19.8787 C 13 20.7741 13.7259 21.5 14.6213 21.5 C 15.0513 21.5 15.4637 21.3292 15.7678 21.0252 Z M 14.8536 20.3535 L 17.8535 17.3536 L 17.1465 16.6464 L 14.1464 19.6465 L 14.8536 20.3535 Z"
31
- class="fill"
42
+ <rect
43
+ x="16.7"
44
+ y="11.1"
45
+ width="5.1"
46
+ height="1.1"
47
+ rx="0.5"
48
+ class="line"
49
+ fill="currentColor"
32
50
  />
51
+
52
+ <!-- link symbol -->
53
+ <g transform="translate(-3,-3)scale(1.2)">
54
+ <path
55
+ d="M 15.5251 15.2678 C 16.0167 14.7762 16.6835 14.5 17.3787 14.5 C 18.8264 14.5 20 15.6736 20 17.1213 C 20 17.8165 19.7238 18.4833 19.2323 18.9749 L 18.2071 20 L 17.5 19.2929 L 18.5252 18.2678 C 18.8292 17.9637 19 17.5513 19 17.1213 C 19 16.2259 18.2741 15.5 17.3787 15.5 C 16.9487 15.5 16.5363 15.6708 16.2322 15.9749 L 15.2071 17 L 14.5 16.2929 L 15.5251 15.2678 Z M 15.7678 21.0252 L 16.7929 20 L 17.5 20.7071 L 16.4749 21.7323 C 15.9833 22.2238 15.3165 22.5 14.6213 22.5 C 13.1736 22.5 12 21.3264 12 19.8787 C 12 19.1835 12.2762 18.5167 12.7678 18.0251 L 13.7929 17 L 14.5 17.7071 L 13.4749 18.7322 C 13.1708 19.0363 13 19.4487 13 19.8787 C 13 20.7741 13.7259 21.5 14.6213 21.5 C 15.0513 21.5 15.4637 21.3292 15.7678 21.0252 Z M 14.8536 20.3535 L 17.8535 17.3536 L 17.1465 16.6464 L 14.1464 19.6465 L 14.8536 20.3535 Z"
56
+ class="fill"
57
+ />
58
+ </g>
33
59
  </g>
34
- </template>
60
+ </template>
package/src/components/atoms/icons/Asd20MenuSvg.vue CHANGED
@@ -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
+
package/src/components/atoms/icons/Asd20RegisterSvg.vue CHANGED
@@ -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
- <defs>
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="19" rx="2.2"
49
+ x="8.5" y="8" width="14" height="18" rx="2.2"
61
50
  class="line"
62
- fill="currentColor"
63
- mask="url(#docMask)"
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="2"
64
+ stroke-width="1"
71
65
  stroke-linecap="round"
72
66
  stroke-linejoin="round"
73
67
  />
package/src/components/atoms/icons/Asd20SearchSvg.vue CHANGED
@@ -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>
package/src/components/atoms/icons/Asd20WebsiteSvg.vue CHANGED
@@ -31,21 +31,21 @@
31
31
  stroke-linecap="round"
32
32
  />
33
33
  <!-- Browser window (rounded rectangle, outline color) -->
34
- <rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
34
+ <rect x="6" y="8" width="20" height="17" 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" fill="#fff"/>
36
+ <rect x="8" y="10" width="16" height="3" rx="1.2" class="line" fill="#fff"/>
37
37
  <!-- Toolbar circles (left) -->
38
- <circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
39
- <circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
40
- <circle cx="12.8" cy="11.7" r="0.55" class="line" fill="currentColor"/>
38
+ <circle cx="10" cy="11.5" r="0.55" class="line" fill="currentColor"/>
39
+ <circle cx="12" cy="11.5" r="0.55" class="line" fill="currentColor"/>
40
+ <circle cx="14" cy="11.5" r="0.55" class="line" fill="currentColor"/>
41
41
  <!-- Toolbar right bar -->
42
- <rect x="16.7" y="11.1" width="5.1" height="1.1" rx="0.5" class="line" fill="currentColor"/>
42
+ <rect x="17" y="11" width="5" height="1" rx="0.5" class="line" fill="currentColor"/>
43
43
  <!-- Sidebar rectangle (fill color, like a page preview) -->
44
- <rect x="10" y="15" width="3" height="6" rx="1" class="fill"/>
44
+ <rect x="10" y="15" width="3" height="8" rx="1" class="fill"/>
45
45
  <!-- Three horizontal lines (fill color, like page content) -->
46
- <rect x="15" y="15.7" width="7" height="1.3" rx="0.6" class="fill"/>
47
- <rect x="15" y="18.4" width="7" height="1.3" rx="0.6" class="fill"/>
48
- <rect x="15" y="21.1" width="7" height="1.3" rx="0.6" class="fill"/>
46
+ <rect x="15" y="15" width="7" height="1.5" rx="0.6" class="fill"/>
47
+ <rect x="15" y="18" width="7" height="1.5" rx="0.6" class="fill"/>
48
+ <rect x="15" y="21" width="7" height="1.5" rx="0.6" class="fill"/>
49
49
  </g>
50
50
  </template>
51
51
 
package/src/components/molecules/Asd20Picker/index.vue CHANGED
@@ -325,6 +325,9 @@ export default {
325
325
  .asd20-picker {
326
326
  .picker-button {
327
327
  margin: space(0.75);
328
+ padding: space(0.25) !important;
329
+ border: 1px solid #fff;
330
+ border-radius: 50%;
328
331
  }
329
332
  }
330
333
  .asd20-picker__modal {
package/src/components/organisms/Asd20QuicklinksMenu/index.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  :link="item.url"
7
7
  :label="item.title"
8
8
  :icon="item.icon"
9
- size="md"
9
+ size="lg"
10
10
  transparent
11
11
  ></asd20-button>
12
12
  <slot></slot>
package/src/components/organisms/Asd20VideoHeaderContent/index.vue CHANGED
@@ -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: #000000; /* 100% black */
3
- --color__accent-s90: #101b2a; /* 90% black + 10% accent */
4
- --color__accent-s80: #203855; /* 80% black + 20% accent */
5
- --color__accent-s70: #305580; /* 70% black + 30% accent */
6
- --color__accent-s60: #4062a2; /* 60% black + 40% accent */
7
- --color__accent-s50: #5070c4; /* 50% black + 50% accent */
8
- --color__accent-s40: #5b87d1; /* 40% black + 60% accent */
9
- --color__accent-s30: #6593da; /* 30% black + 70% accent */
10
- --color__accent-s20: #6ea0e3; /* 20% black + 80% accent */
11
- --color__accent-s10: #71a1e0; /* 10% black + 90% accent (almost base) */
12
- --color__accent: #71a1e0; /* base */
13
- --color__accent-t10: #84ace4; /* 10% white + 90% accent */
14
- --color__accent-t20: #97b8e8; /* 20% white + 80% accent */
15
- --color__accent-t30: #abc3ec; /* 30% white + 70% accent */
16
- --color__accent-t40: #becff0; /* 40% white + 60% accent */
17
- --color__accent-t50: #d1dbf4; /* 50% white + 50% accent */
18
- --color__accent-t60: #e3e7f8; /* 60% white + 40% accent */
19
- --color__accent-t70: #edf1fa; /* 70% white + 30% accent */
20
- --color__accent-t80: #f5f7fc; /* 80% white + 20% accent */
21
- --color__accent-t90: #fbfcfe; /* 90% white + 10% accent */
22
- --color__accent-t100: #ffffff; /* 100% white */
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: 2px;
198
- --website-shape__radius-s: 2px;
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;