@asd20/ui 3.2.745 → 3.2.747
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/molecules/Asd20Notification/index.vue +1 -1
- package/src/components/organisms/Asd20NotificationGroup/index.vue +20 -9
- package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue +4 -3
- package/src/components/organisms/Asd20SecondaryHeader/index.vue +14 -2
- package/src/components/organisms/Asd20VideoHeader/index.vue +11 -1
- package/src/components/organisms/Asd20VideoHeaderContent/index.vue +46 -5
- package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +11 -9
- package/src/design/tokens.css +1 -1
package/package.json
CHANGED
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
>
|
|
72
72
|
<button :title="prevTitle" @click="previous">
|
|
73
73
|
<svg
|
|
74
|
-
style="width:
|
|
74
|
+
style="width: 24px"
|
|
75
75
|
viewBox="0 0 48 48"
|
|
76
76
|
xmlns="http://www.w3.org/2000/svg"
|
|
77
77
|
>
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<span>{{ index + 1 }} of {{ notificationsFromIndex.length }}</span>
|
|
85
85
|
<button :title="nextTitle" @click="next">
|
|
86
86
|
<svg
|
|
87
|
-
style="width:
|
|
87
|
+
style="width: 24px"
|
|
88
88
|
viewBox="0 0 48 48"
|
|
89
89
|
xmlns="http://www.w3.org/2000/svg"
|
|
90
90
|
>
|
|
@@ -278,7 +278,6 @@ export default {
|
|
|
278
278
|
&--floating {
|
|
279
279
|
z-index: 1000;
|
|
280
280
|
flex-direction: row;
|
|
281
|
-
margin-right: 0.25rem;
|
|
282
281
|
align-items: center;
|
|
283
282
|
justify-content: flex-end;
|
|
284
283
|
height: 2.75rem;
|
|
@@ -335,7 +334,7 @@ export default {
|
|
|
335
334
|
display: flex;
|
|
336
335
|
justify-content: flex-end;
|
|
337
336
|
align-items: center;
|
|
338
|
-
font-size: 0.
|
|
337
|
+
font-size: 0.85rem;
|
|
339
338
|
z-index: 15;
|
|
340
339
|
|
|
341
340
|
font-family: sans-serif;
|
|
@@ -348,8 +347,8 @@ export default {
|
|
|
348
347
|
font-size: 1.5rem;
|
|
349
348
|
font-weight: bold;
|
|
350
349
|
line-height: 0;
|
|
351
|
-
width:
|
|
352
|
-
height:
|
|
350
|
+
width: 2rem;
|
|
351
|
+
height: 2rem;
|
|
353
352
|
display: flex;
|
|
354
353
|
justify-content: center;
|
|
355
354
|
align-items: center;
|
|
@@ -376,7 +375,7 @@ export default {
|
|
|
376
375
|
// z-index: -1;
|
|
377
376
|
z-index: 8;
|
|
378
377
|
padding-right: 2rem;
|
|
379
|
-
padding-left: 0.5rem;
|
|
378
|
+
// padding-left: 0.5rem;
|
|
380
379
|
border-radius: 3rem;
|
|
381
380
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0625);
|
|
382
381
|
}
|
|
@@ -465,8 +464,9 @@ export default {
|
|
|
465
464
|
&--banner .pagination {
|
|
466
465
|
position: absolute;
|
|
467
466
|
z-index: 199;
|
|
468
|
-
|
|
469
|
-
|
|
467
|
+
top: 1.125rem;
|
|
468
|
+
right: 50%;
|
|
469
|
+
transform: translatex(50%);
|
|
470
470
|
color: white;
|
|
471
471
|
button {
|
|
472
472
|
fill: white;
|
|
@@ -653,4 +653,15 @@ export default {
|
|
|
653
653
|
opacity: 1;
|
|
654
654
|
}
|
|
655
655
|
}
|
|
656
|
+
|
|
657
|
+
@media (min-width: 768px) {
|
|
658
|
+
.notification-group {
|
|
659
|
+
&--banner .pagination {
|
|
660
|
+
top: inherit;
|
|
661
|
+
bottom: 0.5rem;
|
|
662
|
+
right: 0.5rem;
|
|
663
|
+
transform: translatex(0%);
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
}
|
|
656
667
|
</style>
|
|
@@ -147,17 +147,18 @@ export default {
|
|
|
147
147
|
&__top {
|
|
148
148
|
--fill-one: rgba(255, 255, 255, 1);
|
|
149
149
|
--fill-two: rgba(255, 255, 255, 0.625);
|
|
150
|
-
|
|
150
|
+
width: 100%;
|
|
151
151
|
position: absolute;
|
|
152
|
+
right: 0;
|
|
152
153
|
z-index: 101;
|
|
153
154
|
// background: white;
|
|
154
155
|
display: flex;
|
|
155
156
|
justify-content: flex-end;
|
|
156
157
|
flex-direction: row;
|
|
157
158
|
align-items: center;
|
|
158
|
-
padding: space(0.25) space(0.
|
|
159
|
+
padding: space(0.25) space(0.25);
|
|
159
160
|
margin-top: space(0.5);
|
|
160
|
-
width: 95vw;
|
|
161
|
+
// width: 95vw;
|
|
161
162
|
&::v-deep .asd20-picker {
|
|
162
163
|
display: none;
|
|
163
164
|
}
|
|
@@ -38,9 +38,11 @@ export default {
|
|
|
38
38
|
// background-image: var(--website-homepage-header__secondary-background-style);
|
|
39
39
|
// background-position: bottom right !important;
|
|
40
40
|
// background-size: cover !important;
|
|
41
|
-
padding: space(1) 0
|
|
41
|
+
padding: space(1) 0 0 0;
|
|
42
42
|
.asd20-messaging {
|
|
43
43
|
padding: 0;
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
&::v-deep .message-image {
|
|
@@ -72,7 +74,7 @@ export default {
|
|
|
72
74
|
order: 1;
|
|
73
75
|
max-width: 100%;
|
|
74
76
|
text-shadow: 1px 1px 4px black !important;
|
|
75
|
-
padding: space(1);
|
|
77
|
+
padding: space(2) space(1) space(1) space(1);
|
|
76
78
|
}
|
|
77
79
|
&::v-deep .asd20-button {
|
|
78
80
|
@include asd20-font(
|
|
@@ -131,6 +133,9 @@ export default {
|
|
|
131
133
|
.asd20-secondary-header {
|
|
132
134
|
// background: var(--website-homepage-header__secondary-background-color)
|
|
133
135
|
// var(--website-homepage-header__secondary-background-style);
|
|
136
|
+
&::v-deep .asd20-messaging__content {
|
|
137
|
+
padding: space(1);
|
|
138
|
+
}
|
|
134
139
|
&::v-deep .lead {
|
|
135
140
|
width: 100%;
|
|
136
141
|
}
|
|
@@ -143,6 +148,9 @@ export default {
|
|
|
143
148
|
|
|
144
149
|
@media (min-width: 768px) {
|
|
145
150
|
.asd20-secondary-header {
|
|
151
|
+
&::v-deep .message-image {
|
|
152
|
+
order: 0;
|
|
153
|
+
}
|
|
146
154
|
&::v-deep .asd20-messaging__content {
|
|
147
155
|
padding: space(1);
|
|
148
156
|
}
|
|
@@ -156,8 +164,12 @@ export default {
|
|
|
156
164
|
padding: space(3) space(3) space(2) space(3);
|
|
157
165
|
background: var(--website-homepage-header__secondary-background-color)
|
|
158
166
|
var(--website-homepage-header__secondary-background-style);
|
|
167
|
+
.asd20-messaging {
|
|
168
|
+
flex-direction: row;
|
|
169
|
+
}
|
|
159
170
|
&::v-deep .message-image {
|
|
160
171
|
margin-top: 0;
|
|
172
|
+
order: 2;
|
|
161
173
|
img {
|
|
162
174
|
height: auto;
|
|
163
175
|
margin-left: space(1);
|
|
@@ -89,6 +89,9 @@ export default {
|
|
|
89
89
|
.background-video {
|
|
90
90
|
display: none;
|
|
91
91
|
}
|
|
92
|
+
.hide-background-image {
|
|
93
|
+
order: 2;
|
|
94
|
+
}
|
|
92
95
|
.background-image {
|
|
93
96
|
display: block;
|
|
94
97
|
// position: absolute;
|
|
@@ -125,7 +128,6 @@ export default {
|
|
|
125
128
|
}
|
|
126
129
|
|
|
127
130
|
& ::v-deep .notification-group--floating {
|
|
128
|
-
margin-left: 0.5rem;
|
|
129
131
|
margin-right: 0;
|
|
130
132
|
}
|
|
131
133
|
}
|
|
@@ -194,6 +196,14 @@ export default {
|
|
|
194
196
|
}
|
|
195
197
|
}
|
|
196
198
|
|
|
199
|
+
@media (min-width: 600px) {
|
|
200
|
+
.asd20-video-header {
|
|
201
|
+
.hide-background-image {
|
|
202
|
+
order: 0;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
197
207
|
@media (min-width: 768px) {
|
|
198
208
|
.asd20-video-header {
|
|
199
209
|
&__top {
|
|
@@ -36,6 +36,42 @@ export default {
|
|
|
36
36
|
tag: { type: String, default: 'main' },
|
|
37
37
|
forceDisplay: { type: Boolean, default: false },
|
|
38
38
|
},
|
|
39
|
+
methods: {
|
|
40
|
+
removeAlpha(colorString) {
|
|
41
|
+
if (colorString.startsWith('var(')) {
|
|
42
|
+
// Extract CSS variable value
|
|
43
|
+
const variableName = colorString.split('(')[1].split(')')[0]
|
|
44
|
+
const cssVariable = getComputedStyle(document.documentElement)
|
|
45
|
+
.getPropertyValue(variableName)
|
|
46
|
+
.trim()
|
|
47
|
+
if (cssVariable.startsWith('#') && cssVariable.length === 9) {
|
|
48
|
+
// Extract RGB values from hex color with alpha
|
|
49
|
+
const hexValue = cssVariable.slice(0, 7) // Remove the alpha part
|
|
50
|
+
return hexValue
|
|
51
|
+
// Check if the CSS variable value has an alpha value
|
|
52
|
+
} else if (cssVariable.startsWith('rgba(')) {
|
|
53
|
+
// Extract RGB values from RGBA color string
|
|
54
|
+
const rgbValues = cssVariable.match(/\d+/g)
|
|
55
|
+
if (rgbValues && rgbValues.length === 4) {
|
|
56
|
+
return `rgb(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]})`
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
// Invalid color format, return original color
|
|
60
|
+
return cssVariable
|
|
61
|
+
}
|
|
62
|
+
// Not a CSS variable, return original color
|
|
63
|
+
return colorString
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
mounted() {
|
|
67
|
+
const colorMinusAlpha = this.removeAlpha(
|
|
68
|
+
'var(--website-homepage-header__background-color)'
|
|
69
|
+
)
|
|
70
|
+
// Get the root element (usually the :root element in your CSS)
|
|
71
|
+
const root = document.documentElement
|
|
72
|
+
// Update the value of a new CSS variable
|
|
73
|
+
root.style.setProperty('--color-minus-alpha', colorMinusAlpha)
|
|
74
|
+
},
|
|
39
75
|
}
|
|
40
76
|
</script>
|
|
41
77
|
|
|
@@ -59,9 +95,9 @@ export default {
|
|
|
59
95
|
// rgba(8, 24, 43, 0) 100%
|
|
60
96
|
// );
|
|
61
97
|
// background: rgba(51, 92, 155, 0.7);
|
|
62
|
-
background: var(--
|
|
98
|
+
background: var(--color-minus-alpha)
|
|
63
99
|
var(--website-homepage-header__background-style);
|
|
64
|
-
padding: space(1);
|
|
100
|
+
padding: space(3) space(1) space(1) space(1);
|
|
65
101
|
height: auto;
|
|
66
102
|
}
|
|
67
103
|
|
|
@@ -106,7 +142,7 @@ export default {
|
|
|
106
142
|
// border-bottom: 10px solid var(--color__accent);
|
|
107
143
|
text-shadow: 1px 1px 4px black !important;
|
|
108
144
|
&::v-deep .asd20-messaging__content {
|
|
109
|
-
margin: space(1) 0;
|
|
145
|
+
margin: space(1) 0 0 0;
|
|
110
146
|
}
|
|
111
147
|
}
|
|
112
148
|
}
|
|
@@ -126,13 +162,14 @@ export default {
|
|
|
126
162
|
width: 100%;
|
|
127
163
|
.asd20-messaging {
|
|
128
164
|
height: inherit;
|
|
129
|
-
|
|
165
|
+
padding: space(1);
|
|
166
|
+
background: var(--color-minus-alpha)
|
|
130
167
|
var(--website-homepage-header__background-style);
|
|
131
168
|
}
|
|
132
169
|
&::v-deep .header-messaging-section {
|
|
133
170
|
.asd20-messaging__content {
|
|
134
171
|
width: 100%;
|
|
135
|
-
margin
|
|
172
|
+
margin: 0 0 space(1) 0;
|
|
136
173
|
}
|
|
137
174
|
}
|
|
138
175
|
&::v-deep .asd20-button {
|
|
@@ -145,6 +182,10 @@ export default {
|
|
|
145
182
|
@media (min-width: 1024px) {
|
|
146
183
|
.asd20-video-header-content {
|
|
147
184
|
width: 80%;
|
|
185
|
+
.asd20-messaging {
|
|
186
|
+
background: var(--website-homepage-header__background-color)
|
|
187
|
+
var(--website-homepage-header__background-style);
|
|
188
|
+
}
|
|
148
189
|
.header-messaging-section {
|
|
149
190
|
border-bottom: none;
|
|
150
191
|
// width: 80%;
|
|
@@ -253,9 +253,10 @@ export default {
|
|
|
253
253
|
}
|
|
254
254
|
.weather-status-and-translation-container {
|
|
255
255
|
display: flex;
|
|
256
|
-
flex-direction:
|
|
256
|
+
flex-direction: row;
|
|
257
257
|
margin: space(0.25) 0;
|
|
258
258
|
justify-content: flex-end;
|
|
259
|
+
align-items: center;
|
|
259
260
|
}
|
|
260
261
|
.asd20-language-translation {
|
|
261
262
|
// position: absolute;
|
|
@@ -286,7 +287,6 @@ export default {
|
|
|
286
287
|
.weather-link {
|
|
287
288
|
text-decoration: none;
|
|
288
289
|
border-radius: 3rem;
|
|
289
|
-
margin-bottom: 0.5rem;
|
|
290
290
|
}
|
|
291
291
|
.asd20-organization-picker {
|
|
292
292
|
display: none;
|
|
@@ -299,7 +299,10 @@ export default {
|
|
|
299
299
|
}
|
|
300
300
|
.double-notification-wrapper {
|
|
301
301
|
display: flex;
|
|
302
|
-
flex-direction:
|
|
302
|
+
flex-direction: row;
|
|
303
|
+
align-items: center;
|
|
304
|
+
flex-wrap: wrap;
|
|
305
|
+
justify-content: flex-end;
|
|
303
306
|
}
|
|
304
307
|
}
|
|
305
308
|
}
|
|
@@ -340,9 +343,9 @@ export default {
|
|
|
340
343
|
--fill-color: var(--color__accent) !important;
|
|
341
344
|
}
|
|
342
345
|
}
|
|
343
|
-
.double-notification-wrapper {
|
|
344
|
-
|
|
345
|
-
}
|
|
346
|
+
// .double-notification-wrapper {
|
|
347
|
+
// justify-content: center;
|
|
348
|
+
// }
|
|
346
349
|
}
|
|
347
350
|
.asd20-video-header-content {
|
|
348
351
|
top: inherit;
|
|
@@ -359,15 +362,14 @@ export default {
|
|
|
359
362
|
}
|
|
360
363
|
.asd20-video-header {
|
|
361
364
|
.double-notification-wrapper {
|
|
362
|
-
|
|
365
|
+
align-items: center;
|
|
366
|
+
flex-wrap: wrap;
|
|
363
367
|
}
|
|
364
368
|
.asd20-video-header-content {
|
|
365
369
|
position: absolute;
|
|
366
370
|
bottom: 20%;
|
|
367
371
|
transform: translate3d(0, calc(-70% * var(--scroll-progress)), 0);
|
|
368
372
|
animation: slide_left 1.5s ease-in-out 0.5s both;
|
|
369
|
-
.lead {
|
|
370
|
-
}
|
|
371
373
|
}
|
|
372
374
|
.asd20-organization-picker {
|
|
373
375
|
display: inherit !important;
|
package/src/design/tokens.css
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
--website-header__overlay-background-color: transparent;
|
|
133
133
|
--website-header__title-color: #fff;
|
|
134
134
|
--website-homepage-header__accent: var(--color__accent);
|
|
135
|
-
--website-homepage-header__background-color:
|
|
135
|
+
--website-homepage-header__background-color: #3f507bcc;
|
|
136
136
|
--website-homepage-header__background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
|
|
137
137
|
--website-homepage-header__button-background-color: var(--color__accent);
|
|
138
138
|
--website-homepage-header__button-foreground-color: var(--color__on-accent);
|