@asd20/ui 3.2.1024 → 3.2.1026

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/Asd20Share/index.vue +4 -0
  3. package/src/components/organisms/Asd20ImageHeader/index.vue +2 -6
  4. package/src/components/organisms/Asd20NotificationGroup/index.vue +4 -2
  5. package/src/components/organisms/Asd20PageHeader/index.vue +33 -42
  6. package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +6 -34
  7. package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +6 -6
  8. package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +12 -33
  9. package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +12 -31
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.1024",
8
+ "version": "3.2.1026",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/molecules/Asd20Share/index.vue CHANGED
@@ -171,6 +171,10 @@ export default {
171
171
  font-size: 0.875em !important;
172
172
  padding-right: 0.5rem;
173
173
  }
174
+ .asd20-icon {
175
+ --line-color: var(--website-icon__icon-line-color) !important;
176
+ --fill-color: var(--website-menu__icon-fill-color) !important;
177
+ }
174
178
  &:hover,
175
179
  &:focus {
176
180
  color: var(--website-button__foreground-color) !important;
package/src/components/organisms/Asd20ImageHeader/index.vue CHANGED
@@ -335,12 +335,8 @@ export default {
335
335
  &::v-deep .asd20-icon {
336
336
  width: 32px !important;
337
337
  height: 32px !important;
338
- --line-color: currentColor !important;
339
- --fill-color: var(--color__accent) !important;
340
- g {
341
- // --website-icon__line-color: var(--website-icon__line-color) !important;
342
- --line-color: currentColor !important;
343
- }
338
+ --line-color: var(--website-icon__icon-line-color) !important;
339
+ --fill-color: var(--website-menu__icon-fill-color) !important;
344
340
  }
345
341
  &::v-deep .asd20-select-input {
346
342
  margin-bottom: 0;
package/src/components/organisms/Asd20NotificationGroup/index.vue CHANGED
@@ -289,9 +289,11 @@ export default {
289
289
  svg {
290
290
  width: 100%;
291
291
  height: 100%;
292
- color: #000000;
292
+ // color: #000000;
293
293
  // fill: #80B3C0;
294
- fill: var(--color__accent);
294
+ // fill: var(--color__accent);
295
+ color: var(--website-menu__icon-line-color) !important;
296
+ fill: var(--website-menu__icon-fill-color) !important;
295
297
  }
296
298
 
297
299
  span {
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -212,14 +212,8 @@ export default {
212
212
  isDetailPage() {
213
213
  if (typeof window === 'undefined') return false
214
214
  return (
215
- window.location.pathname
216
- .replace(/\/$/, '')
217
- .split('/')
218
- .pop() ===
219
- this.detailLink
220
- .replace(/\/$/, '')
221
- .split('/')
222
- .pop()
215
+ window.location.pathname.replace(/\/$/, '').split('/').pop() ===
216
+ this.detailLink.replace(/\/$/, '').split('/').pop()
223
217
  )
224
218
  },
225
219
  showModifiedDateTime() {
@@ -322,51 +316,48 @@ export default {
322
316
  .back {
323
317
  color: var(--website-header__foreground-color);
324
318
  order: 2;
319
+ &::v-deep .asd20-icon {
320
+ width: 32px !important;
321
+ height: 32px !important;
322
+ --line-color: currentColor !important;
323
+ --fill-color: var(--color__accent) !important;
324
+ g {
325
+ // --website-icon__line-color: var(--website-icon__line-color) !important;
326
+ --line-color: currentColor !important;
327
+ }
328
+ }
325
329
  }
326
330
  .language-and-tools {
327
331
  display: flex;
328
332
  align-items: center;
329
- }
330
- .print-button {
331
- padding: 0.375rem 0.375rem;
332
- border-radius: 5rem;
333
- background: rgba(255, 255, 255, 0.9);
334
- .asd20-button__label {
335
- font-size: 0.875em !important;
336
- padding-right: 0.5rem;
337
- }
338
- &:hover,
339
- &:focus {
340
- color: var(--website-button__foreground-color);
333
+ .print-button {
334
+ padding: 0.375rem 0.375rem;
335
+ border-radius: 5rem;
336
+ background: rgba(255, 255, 255, 0.9);
337
+ .asd20-button__label {
338
+ font-size: 0.875em !important;
339
+ padding-right: 0.5rem;
340
+ }
341
+ &:hover,
342
+ &:focus {
343
+ color: var(--website-button__foreground-color);
344
+ }
341
345
  }
342
- }
343
- &::v-deep .asd20-icon {
344
- width: 32px !important;
345
- height: 32px !important;
346
- --line-color: currentColor !important;
347
- --fill-color: var(--color__accent) !important;
348
- g {
349
- // --website-icon__line-color: var(--website-icon__line-color) !important;
350
- --line-color: currentColor !important;
346
+ .asd20-language-translation {
347
+ flex-grow: 0;
348
+ width: max-content;
349
+ background: rgba(255, 255, 255, 0.9);
350
+ border-radius: 3rem;
351
+ padding: 0 1em 0 0.5em;
351
352
  }
352
- }
353
- .asd20-language-translation {
354
- flex-grow: 0;
355
- width: max-content;
356
- background: rgba(255, 255, 255, 0.9);
357
- border-radius: 3rem;
358
- padding: 0 1em 0 0.5em;
359
353
  &::v-deep .asd20-icon {
360
354
  width: 32px !important;
361
355
  height: 32px !important;
362
- --line-color: var(--website-page__foreground-color) !important;
363
- --fill-color: var(--color__accent) !important;
364
- g {
365
- // --website-icon__line-color: var(--website-icon__line-color) !important;
366
- --line-color: var(--website-page__foreground-color) !important;
367
- }
356
+ --line-color: var(--website-icon__icon-line-color) !important;
357
+ --fill-color: var(--website-menu__icon-fill-color) !important;
368
358
  }
369
359
  }
360
+
370
361
  .asd20-language-loader {
371
362
  order: 1;
372
363
  }
package/src/components/templates/Asd20DistrictHomeTemplate/index.vue CHANGED
@@ -262,22 +262,17 @@ export default {
262
262
  &__overlay-label {
263
263
  display: none;
264
264
  }
265
- }
266
- .asd20-icon {
267
- width: 32px !important;
268
- height: 32px !important;
269
- --line-color: currentColor !important;
270
- --fill-color: var(--color__accent) !important;
265
+ .asd20-icon {
266
+ width: 32px !important;
267
+ height: 32px !important;
268
+ --line-color: var(--website-icon__icon-line-color) !important;
269
+ --fill-color: var(--website-menu__icon-fill-color) !important;
270
+ }
271
271
  }
272
272
  }
273
273
  .asd20-language-loader {
274
274
  order: 1;
275
275
  }
276
- // .translation-button-adjust {
277
- // position: absolute;
278
- // top: space(0.25);
279
- // right: space(0.25);
280
- // }
281
276
  & ::v-deep .notification-group--status .notifications {
282
277
  padding: 0.375rem;
283
278
  border-radius: 3rem;
@@ -297,20 +292,6 @@ export default {
297
292
  .notification-group--floating {
298
293
  margin-left: 0.5rem;
299
294
  margin-right: 0;
300
- // .bell {
301
- // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
302
- // svg {
303
- // fill: var(--color__accent) !important;
304
- // }
305
- // span {
306
- // background: var(--color__accent) !important;
307
- // top: inherit !important;
308
- // right: inherit !important;
309
- // width: 1.2rem !important;
310
- // height: 1.2rem !important;
311
- // font-size: 0.75rem !important;
312
- // }
313
- // }
314
295
  }
315
296
  .notification-wrapper {
316
297
  position: absolute;
@@ -350,11 +331,6 @@ export default {
350
331
  .asd20-tertiary-header {
351
332
  margin-bottom: space(2);
352
333
  }
353
- // .lead {
354
- // font-size: 3vw !important;
355
- // margin-bottom: 0 !important;
356
- // max-width: 80%;
357
- // }
358
334
  }
359
335
 
360
336
  @media (min-width: 667px) {
@@ -362,10 +338,6 @@ export default {
362
338
  .logo-header {
363
339
  padding: 0 space(1);
364
340
  }
365
- // .translation-button-adjust {
366
- // top: space(-0.5);
367
- // right: space(0.5);
368
- // }
369
341
  .double-notification-wrapper {
370
342
  // padding-right: space(1);
371
343
  justify-content: flex-end !important;
package/src/components/templates/Asd20DistrictVideoTemplate/index.vue CHANGED
@@ -275,12 +275,12 @@ export default {
275
275
  &__overlay-label {
276
276
  // display: none;
277
277
  }
278
- }
279
- .asd20-icon {
280
- width: 32px !important;
281
- height: 32px !important;
282
- --line-color: currentColor !important;
283
- --fill-color: var(--color__accent) !important;
278
+ .asd20-icon {
279
+ width: 32px !important;
280
+ height: 32px !important;
281
+ --line-color: var(--website-icon__icon-line-color) !important;
282
+ --fill-color: var(--website-menu__icon-fill-color) !important;
283
+ }
284
284
  }
285
285
  }
286
286
  .asd20-language-loader {
package/src/components/templates/Asd20SchoolHomeTemplate/index.vue CHANGED
@@ -61,7 +61,9 @@
61
61
  </a>
62
62
  <a
63
63
  v-if="websiteLogoProps2 && showLogo"
64
- :href="websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''"
64
+ :href="
65
+ websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
66
+ "
65
67
  >
66
68
  <img
67
69
  class="optionalLogo"
@@ -70,7 +72,9 @@
70
72
  ? websiteLogoProps2.logoImageUrl
71
73
  : ''
72
74
  "
73
- :alt="websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''"
75
+ :alt="
76
+ websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
77
+ "
74
78
  />
75
79
  </a>
76
80
  </div>
@@ -300,12 +304,12 @@ export default {
300
304
  &__field-wrapper {
301
305
  padding: 0 0.5rem;
302
306
  }
303
- }
304
- .asd20-icon {
305
- width: 32px !important;
306
- height: 32px !important;
307
- --line-color: currentColor !important;
308
- --fill-color: var(--color__accent) !important;
307
+ .asd20-icon {
308
+ width: 32px !important;
309
+ height: 32px !important;
310
+ --line-color: var(--website-icon__icon-line-color) !important;
311
+ --fill-color: var(--website-menu__icon-fill-color) !important;
312
+ }
309
313
  }
310
314
  }
311
315
  .asd20-language-loader {
@@ -314,22 +318,6 @@ export default {
314
318
  .pickerContainer {
315
319
  display: none;
316
320
  }
317
- // .asd20-notification-group--floating {
318
- // .bell {
319
- // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
320
- // svg {
321
- // fill: var(--color__accent) !important;
322
- // }
323
- // span {
324
- // background: var(--color__accent) !important;
325
- // top: inherit !important;
326
- // right: inherit !important;
327
- // width: 1.2rem !important;
328
- // height: 1.2rem !important;
329
- // font-size: 0.75rem !important;
330
- // }
331
- // }
332
- // }
333
321
 
334
322
  &::v-deep .widgets-section {
335
323
  background: var(--website-page__alternate-background-t70);
@@ -374,15 +362,6 @@ export default {
374
362
  padding-right: 0;
375
363
  }
376
364
  }
377
- // .notification-group--floating {
378
- // .bell {
379
- // span {
380
- // background: var(--color__accent);
381
- // top: -0.6em !important;
382
- // right: -0.6em !important;
383
- // }
384
- // }
385
- // }
386
365
  .pickerContainer {
387
366
  display: flex;
388
367
  // .optionalLogo {
package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue CHANGED
@@ -58,7 +58,9 @@
58
58
  </a>
59
59
  <a
60
60
  v-if="websiteLogoProps2"
61
- :href="websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''"
61
+ :href="
62
+ websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
63
+ "
62
64
  >
63
65
  <img
64
66
  class="optionalLogo"
@@ -67,7 +69,9 @@
67
69
  ? websiteLogoProps2.logoImageUrl
68
70
  : ''
69
71
  "
70
- :alt="websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''"
72
+ :alt="
73
+ websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
74
+ "
71
75
  />
72
76
  </a>
73
77
  </div>
@@ -242,9 +246,6 @@ export default {
242
246
  // top: space(0.5) !important;
243
247
  }
244
248
  .asd20-language-translation {
245
- // position: absolute;
246
- // right: space(0.5);
247
- // top: space(0.5) !important;
248
249
  z-index: 2;
249
250
  background: rgba(255, 255, 255, 1);
250
251
  border-radius: 3rem;
@@ -258,37 +259,17 @@ export default {
258
259
  &__overlay-label {
259
260
  // display: none;
260
261
  }
261
- }
262
- .asd20-icon {
263
- width: 32px !important;
264
- height: 32px !important;
265
- --line-color: currentColor !important;
266
- --fill-color: var(--color__accent) !important;
262
+ .asd20-icon {
263
+ width: 32px !important;
264
+ height: 32px !important;
265
+ --line-color: var(--website-icon__icon-line-color) !important;
266
+ --fill-color: var(--website-menu__icon-fill-color) !important;
267
+ }
267
268
  }
268
269
  }
269
270
  .asd20-language-loader {
270
271
  order: 1;
271
272
  }
272
-
273
- .asd20-notification-group--floating {
274
- // position: absolute;
275
- // right: space(0.5);
276
- // top: space(2) !important;
277
- // .bell {
278
- // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
279
- // svg {
280
- // fill: var(--color__accent) !important;
281
- // }
282
- // span {
283
- // background: var(--color__accent) !important;
284
- // top: inherit !important;
285
- // right: inherit !important;
286
- // width: 1.2rem !important;
287
- // height: 1.2rem !important;
288
- // font-size: 0.75rem !important;
289
- // }
290
- // }
291
- }
292
273
  }
293
274
 
294
275
  .pickerContainer {