@asd20/ui 3.2.744 → 3.2.746

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 (16) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/Asd20LanguageTranslation/index.vue +1 -1
  3. package/src/components/molecules/Asd20Notification/index.vue +6 -5
  4. package/src/components/molecules/Asd20Share/index.vue +1 -1
  5. package/src/components/organisms/Asd20ChoiceHeader/index.vue +2 -2
  6. package/src/components/organisms/Asd20GraduationHeader/index.vue +2 -2
  7. package/src/components/organisms/Asd20ImageHeader/index.vue +3 -3
  8. package/src/components/organisms/Asd20NotificationGroup/index.vue +25 -12
  9. package/src/components/organisms/Asd20PageHeader/index.vue +5 -5
  10. package/src/components/organisms/Asd20ReturnToSchoolHeader/index.vue +2 -2
  11. package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue +4 -3
  12. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +6 -6
  13. package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +6 -6
  14. package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +16 -14
  15. package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +3 -2
  16. package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +4 -4
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.744",
8
+ "version": "3.2.746",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/molecules/Asd20LanguageTranslation/index.vue CHANGED
@@ -81,7 +81,7 @@ export default {
81
81
  flex-direction: row;
82
82
  align-items: center;
83
83
  margin-bottom: 0;
84
- max-height: 2rem;
84
+ height: 2.75rem;
85
85
  &::v-deep .asd20-loader {
86
86
  // height: 48px;
87
87
  width: 36px;
package/src/components/molecules/Asd20Notification/index.vue CHANGED
@@ -37,7 +37,7 @@
37
37
  class="asd20-notification__dismiss"
38
38
  v-if="dismissible"
39
39
  transparent
40
- size="xs"
40
+ size="sm"
41
41
  icon="close"
42
42
  label="Dismiss"
43
43
  hide-label
@@ -216,8 +216,8 @@ export default {
216
216
  color: black;
217
217
  }
218
218
  .asd20-icon {
219
- height: 24px;
220
- width: 24px;
219
+ height: 32px;
220
+ width: 32px;
221
221
  --line-color: black;
222
222
  --fill-color: white;
223
223
  }
@@ -251,6 +251,7 @@ export default {
251
251
  box-shadow: none;
252
252
  padding: 0;
253
253
  background: transparent;
254
+ flex-direction: row;
254
255
  .asd20-notification__content {
255
256
  display: flex;
256
257
  flex-direction: row;
@@ -264,8 +265,8 @@ export default {
264
265
  padding-top: 0;
265
266
  }
266
267
  .asd20-icon {
267
- height: 24px;
268
- width: 24px;
268
+ height: 32px;
269
+ width: 32px;
269
270
  .asd20-icon {
270
271
  --line-color: #23464e;
271
272
  --fill-color: #70b4c2;
package/src/components/molecules/Asd20Share/index.vue CHANGED
@@ -164,7 +164,7 @@ export default {
164
164
  position: relative;
165
165
  width: min-content;
166
166
  & > .asd20-button {
167
- padding: 0.25rem 0.25rem !important;
167
+ padding: 0.375rem 0.375rem !important;
168
168
  border-radius: 5rem !important;
169
169
  background: rgba(255, 255, 255, 0.9) !important;
170
170
  .asd20-button__label {
package/src/components/organisms/Asd20ChoiceHeader/index.vue CHANGED
@@ -134,8 +134,8 @@ export default {
134
134
  }
135
135
 
136
136
  & ::v-deep .notification-group--status .notifications {
137
- padding: 0.25em;
138
- border-radius: 1em;
137
+ padding: 0.375rem;
138
+ border-radius: 3rem;
139
139
  background: rgba(255,255,255,0.95);
140
140
  }
141
141
 
package/src/components/organisms/Asd20GraduationHeader/index.vue CHANGED
@@ -120,8 +120,8 @@ export default {
120
120
  }
121
121
 
122
122
  & ::v-deep .notification-group--status .notifications {
123
- padding: 0.25em;
124
- border-radius: 1em;
123
+ padding: 0.37rem;
124
+ border-radius: 3rem;
125
125
  background: rgba(255,255,255,0.95);
126
126
  }
127
127
 
package/src/components/organisms/Asd20ImageHeader/index.vue CHANGED
@@ -299,7 +299,7 @@ export default {
299
299
  }
300
300
  }
301
301
  .print-button {
302
- padding: 0.25rem 0.25rem;
302
+ padding: 0.375rem 0.375rem;
303
303
  border-radius: 5rem;
304
304
  background: rgba(255, 255, 255, 0.9);
305
305
  .asd20-button__label {
@@ -325,8 +325,8 @@ export default {
325
325
  order: 1;
326
326
  }
327
327
  &::v-deep .asd20-icon {
328
- width: 24px !important;
329
- height: 24px !important;
328
+ width: 32px !important;
329
+ height: 32px !important;
330
330
  --line-color: currentColor !important;
331
331
  --fill-color: var(--color__accent) !important;
332
332
  g {
package/src/components/organisms/Asd20NotificationGroup/index.vue CHANGED
@@ -71,7 +71,7 @@
71
71
  >
72
72
  <button :title="prevTitle" @click="previous">
73
73
  <svg
74
- style="width: 16px"
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: 16px"
87
+ style="width: 24px"
88
88
  viewBox="0 0 48 48"
89
89
  xmlns="http://www.w3.org/2000/svg"
90
90
  >
@@ -278,9 +278,9 @@ export default {
278
278
  &--floating {
279
279
  z-index: 1000;
280
280
  flex-direction: row;
281
- margin-right: 0.25rem;
282
- align-items: flex-start;
281
+ align-items: center;
283
282
  justify-content: flex-end;
283
+ height: 2.75rem;
284
284
  }
285
285
 
286
286
  &--floating .bell {
@@ -288,7 +288,6 @@ export default {
288
288
  position: relative;
289
289
  appearance: none;
290
290
  border: none;
291
- padding: none;
292
291
  width: 2rem;
293
292
  height: 2rem;
294
293
  display: flex;
@@ -301,6 +300,8 @@ export default {
301
300
  border-radius: 50%;
302
301
  z-index: 99;
303
302
  cursor: pointer;
303
+ width: 2.75rem;
304
+ height: 2.75rem;
304
305
 
305
306
  &.open {
306
307
  box-shadow: none;
@@ -333,7 +334,7 @@ export default {
333
334
  display: flex;
334
335
  justify-content: flex-end;
335
336
  align-items: center;
336
- font-size: 0.75rem;
337
+ font-size: 0.85rem;
337
338
  z-index: 15;
338
339
 
339
340
  font-family: sans-serif;
@@ -346,8 +347,8 @@ export default {
346
347
  font-size: 1.5rem;
347
348
  font-weight: bold;
348
349
  line-height: 0;
349
- width: 1rem;
350
- height: 1rem;
350
+ width: 2rem;
351
+ height: 2rem;
351
352
  display: flex;
352
353
  justify-content: center;
353
354
  align-items: center;
@@ -374,8 +375,8 @@ export default {
374
375
  // z-index: -1;
375
376
  z-index: 8;
376
377
  padding-right: 2rem;
377
- padding-left: 0.5rem;
378
- border-radius: 1rem;
378
+ // padding-left: 0.5rem;
379
+ border-radius: 3rem;
379
380
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0625);
380
381
  }
381
382
 
@@ -463,8 +464,9 @@ export default {
463
464
  &--banner .pagination {
464
465
  position: absolute;
465
466
  z-index: 199;
466
- right: 0.5rem;
467
- bottom: 0.5rem;
467
+ top: 1.125rem;
468
+ right: 50%;
469
+ transform: translatex(50%);
468
470
  color: white;
469
471
  button {
470
472
  fill: white;
@@ -651,4 +653,15 @@ export default {
651
653
  opacity: 1;
652
654
  }
653
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
+ }
654
667
  </style>
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -325,7 +325,7 @@ export default {
325
325
  }
326
326
  }
327
327
  .print-button {
328
- padding: 0.25rem 0.25rem;
328
+ padding: 0.375rem 0.375rem;
329
329
  border-radius: 5rem;
330
330
  background: rgba(255, 255, 255, 0.9);
331
331
  .asd20-button__label {
@@ -338,8 +338,8 @@ export default {
338
338
  }
339
339
  }
340
340
  &::v-deep .asd20-icon {
341
- width: 24px !important;
342
- height: 24px !important;
341
+ width: 32px !important;
342
+ height: 32px !important;
343
343
  --line-color: currentColor !important;
344
344
  --fill-color: var(--color__accent) !important;
345
345
  g {
@@ -354,8 +354,8 @@ export default {
354
354
  border-radius: 3rem;
355
355
  padding: 0 0 0 0.5em;
356
356
  &::v-deep .asd20-icon {
357
- width: 24px !important;
358
- height: 24px !important;
357
+ width: 32px !important;
358
+ height: 32px !important;
359
359
  --line-color: var(--website-page__foreground-color) !important;
360
360
  --fill-color: var(--color__accent) !important;
361
361
  g {
package/src/components/organisms/Asd20ReturnToSchoolHeader/index.vue CHANGED
@@ -94,8 +94,8 @@ export default {
94
94
  margin-bottom: space(1);
95
95
 
96
96
  & ::v-deep .notification-group--status .notifications {
97
- padding: 0.25em;
98
- border-radius: 1em;
97
+ padding: 0.375rem;
98
+ border-radius: 3rem;
99
99
  background: rgba(255, 255, 255, 0.95);
100
100
  }
101
101
 
package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue CHANGED
@@ -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.5);
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
  }
package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue CHANGED
@@ -125,8 +125,8 @@ export default {
125
125
  flex-direction: column;
126
126
  box-sizing: border-box;
127
127
  & ::v-deep .notification-group--status .notifications {
128
- border-radius: 1em;
129
- padding: 0.25em;
128
+ border-radius: 3rem;
129
+ padding: 0.375rem;
130
130
  }
131
131
  .background-video {
132
132
  display: none;
@@ -390,8 +390,8 @@ $max: 4rem;
390
390
  }
391
391
 
392
392
  & ::v-deep .notification-group--status .notifications {
393
- border-radius: 1em;
394
- padding: 0.25em;
393
+ border-radius: 3rem;
394
+ padding: 0.37rem;
395
395
  }
396
396
  &::before {
397
397
  content: '';
@@ -538,8 +538,8 @@ $max: 4rem;
538
538
  }
539
539
 
540
540
  & ::v-deep .notification-group--status .notifications {
541
- border-radius: 1em;
542
- padding: 0.25em;
541
+ border-radius: 3rem;
542
+ padding: 0.375rem;
543
543
  }
544
544
  &::before {
545
545
  content: '';
package/src/components/templates/Asd20DistrictHomeTemplate/index.vue CHANGED
@@ -341,7 +341,7 @@ export default {
341
341
  border: 1px solid var(--website-page__alternate-background-color);
342
342
  // margin-left: 0.5rem;
343
343
  .asd20-select-input {
344
- padding: 0.25rem 0.25rem;
344
+ padding: 0.375rem 0.375rem;
345
345
  color: currentColor;
346
346
  font-family: Ariel, Arial, Helvetica, sans-serif;
347
347
  &__overlay-label {
@@ -349,8 +349,8 @@ export default {
349
349
  }
350
350
  }
351
351
  .asd20-icon {
352
- width: 24px !important;
353
- height: 24px !important;
352
+ width: 32px !important;
353
+ height: 32px !important;
354
354
  --line-color: currentColor !important;
355
355
  --fill-color: var(--color__accent) !important;
356
356
  }
@@ -364,15 +364,15 @@ export default {
364
364
  right: space(0.5);
365
365
  }
366
366
  & ::v-deep .notification-group--status .notifications {
367
- padding: 0.25em;
368
- border-radius: 1em;
367
+ padding: 0.375rem;
368
+ border-radius: 3rem;
369
369
  background: rgba(255, 255, 255, 0.95);
370
370
  }
371
371
 
372
372
  & ::v-deep .notification-group--status {
373
373
  margin-left: -0.5rem;
374
374
  background: rgba(255, 255, 255, 0.95);
375
- border-radius: 1em;
375
+ border-radius: 3rem;
376
376
  .asd20-notification {
377
377
  margin: 0;
378
378
  padding: 0 !important;
package/src/components/templates/Asd20DistrictVideoTemplate/index.vue CHANGED
@@ -253,9 +253,10 @@ export default {
253
253
  }
254
254
  .weather-status-and-translation-container {
255
255
  display: flex;
256
- flex-direction: column;
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;
@@ -266,7 +267,7 @@ export default {
266
267
  border: 1px solid var(--website-page__alternate-background-color);
267
268
  // margin-left: 0.5rem;
268
269
  .asd20-select-input {
269
- padding: 0.25rem 0.25rem;
270
+ padding: 0.375rem 0.375rem;
270
271
  color: currentColor;
271
272
  font-family: Ariel, Arial, Helvetica, sans-serif;
272
273
  &__overlay-label {
@@ -274,8 +275,8 @@ export default {
274
275
  }
275
276
  }
276
277
  .asd20-icon {
277
- width: 24px !important;
278
- height: 24px !important;
278
+ width: 32px !important;
279
+ height: 32px !important;
279
280
  --line-color: currentColor !important;
280
281
  --fill-color: var(--color__accent) !important;
281
282
  }
@@ -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: column;
302
+ flex-direction: row;
303
+ align-items: center;
304
+ flex-wrap: wrap;
305
+ justify-content: flex-end;
303
306
  }
304
307
  }
305
308
  }
@@ -334,15 +337,15 @@ export default {
334
337
  right: 0;
335
338
  margin-left: 0.5rem;
336
339
  .asd20-icon {
337
- width: 24px !important;
338
- height: 24px !important;
340
+ width: 32px !important;
341
+ height: 32px !important;
339
342
  --line-color: currentColor !important;
340
343
  --fill-color: var(--color__accent) !important;
341
344
  }
342
345
  }
343
- .double-notification-wrapper {
344
- justify-content: center;
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
- justify-content: flex-end !important;
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/components/templates/Asd20SchoolHomeTemplate/index.vue CHANGED
@@ -240,6 +240,7 @@ export default {
240
240
  align-items: center;
241
241
  display: flex;
242
242
  background: white;
243
+ height: 2.75rem;
243
244
  }
244
245
  .notification-translation-container {
245
246
  display: flex;
@@ -265,8 +266,8 @@ export default {
265
266
  }
266
267
  }
267
268
  .asd20-icon {
268
- width: 24px !important;
269
- height: 24px !important;
269
+ width: 32px !important;
270
+ height: 32px !important;
270
271
  --line-color: currentColor !important;
271
272
  --fill-color: var(--color__accent) !important;
272
273
  }
package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue CHANGED
@@ -233,9 +233,9 @@ export default {
233
233
  border-radius: 3rem;
234
234
  border: 1px solid var(--website-page__alternate-background-color);
235
235
  margin: 0 0.05rem;
236
- max-height: 2rem;
236
+ height: 2.75rem;
237
237
  .asd20-select-input {
238
- padding: 0.25rem 0.25rem;
238
+ padding: 0.375rem 0.375rem;
239
239
  color: currentColor;
240
240
  font-family: Arial, Helvetica, sans-serif;
241
241
  &__overlay-label {
@@ -243,8 +243,8 @@ export default {
243
243
  }
244
244
  }
245
245
  .asd20-icon {
246
- width: 24px !important;
247
- height: 24px !important;
246
+ width: 32px !important;
247
+ height: 32px !important;
248
248
  --line-color: currentColor !important;
249
249
  --fill-color: var(--color__accent) !important;
250
250
  }