@asd20/ui 3.2.405 → 3.2.408

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 CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.405",
8
+ "version": "3.2.408",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <component
3
3
  :is="tag"
4
- id="main"
5
4
  :class="classes"
6
5
  v-if="
7
6
  (formattedPrimaryMessages.length > 0 &&
@@ -60,7 +60,7 @@
60
60
  ></asd20-button>
61
61
  </div>
62
62
  </div>
63
- <div class="asd20-page-header__title-content">
63
+ <div id="main" class="asd20-page-header__title-content">
64
64
  <h1 v-if="heading" v-html="heading" />
65
65
  <div
66
66
  v-if="publishDateTime || categories.length || $slots.meta"
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <section class="asd20-primary-header">
3
- <asd20-messaging v-bind="messages[0]"></asd20-messaging>
3
+ <asd20-messaging id="main" v-bind="messages[0]"></asd20-messaging>
4
4
  </section>
5
5
  </template>
6
6
 
@@ -380,14 +380,15 @@ export default {
380
380
  .bell {
381
381
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
382
382
  svg {
383
- fill: var(--color__accent);
383
+ fill: var(--color__accent) !important;
384
384
  }
385
385
  span {
386
- background: var(--color__accent);
386
+ background: var(--color__accent) !important;
387
387
  top: inherit !important;
388
388
  right: inherit !important;
389
389
  width: 1.2rem !important;
390
390
  height: 1.2rem !important;
391
+ font-size: 0.75rem !important;
391
392
  }
392
393
  }
393
394
  }
@@ -449,13 +450,13 @@ export default {
449
450
  .asd20-notification-group--floating {
450
451
  position: absolute;
451
452
  top: space(1);
452
- .bell {
453
- span {
454
- background: var(--color__accent);
455
- top: -0.6em !important;
456
- right: -0.6em !important;
457
- }
458
- }
453
+ // .bell {
454
+ // span {
455
+ // background: var(--color__accent);
456
+ // top: -0.6em !important;
457
+ // right: -0.6em !important;
458
+ // }
459
+ // }
459
460
  }
460
461
  .feed-title {
461
462
  margin-left: 0;
@@ -381,14 +381,15 @@ export default {
381
381
  .bell {
382
382
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
383
383
  svg {
384
- fill: var(--color__accent);
384
+ fill: var(--color__accent) !important;
385
385
  }
386
386
  span {
387
- background: var(--color__accent);
387
+ background: var(--color__accent) !important;
388
388
  top: inherit !important;
389
389
  right: inherit !important;
390
390
  width: 1.2rem !important;
391
391
  height: 1.2rem !important;
392
+ font-size: 0.75rem !important;
392
393
  }
393
394
  }
394
395
  }
@@ -466,13 +467,13 @@ export default {
466
467
  .asd20-notification-group--floating {
467
468
  position: absolute;
468
469
  top: space(1);
469
- .bell {
470
- span {
471
- background: var(--color__accent);
472
- top: -0.6em !important;
473
- right: -0.6em !important;
474
- }
475
- }
470
+ // .bell {
471
+ // span {
472
+ // background: var(--color__accent);
473
+ // top: -0.6em !important;
474
+ // right: -0.6em !important;
475
+ // }
476
+ // }
476
477
  }
477
478
  .feed-title {
478
479
  margin-left: 0;
@@ -12,6 +12,20 @@
12
12
  @toggle-all="$emit('toggle-all')"
13
13
  />
14
14
  </client-only>
15
+
16
+ <!-- Site Navigation -->
17
+ <asd20-site-navigation
18
+ :navigation="navigation"
19
+ :action-items="actionItems"
20
+ @update:menuOpen="$emit('update:menuOpen', $event)"
21
+ :menu-open="menuOpen"
22
+ @update:searchOpen="$emit('update:searchOpen', $event)"
23
+ :search-open="searchOpen"
24
+ :organization="organization"
25
+ :organization-options="organizationOptions"
26
+ >
27
+ </asd20-site-navigation>
28
+
15
29
  <!-- Page Header -->
16
30
  <asd20-page-header
17
31
  id="page-header"
@@ -40,18 +54,6 @@
40
54
  </template>
41
55
  </asd20-page-header>
42
56
 
43
- <!-- Site Navigation -->
44
- <asd20-site-navigation
45
- :navigation="navigation"
46
- :action-items="actionItems"
47
- @update:menuOpen="$emit('update:menuOpen', $event)"
48
- :menu-open="menuOpen"
49
- @update:searchOpen="$emit('update:searchOpen', $event)"
50
- :search-open="searchOpen"
51
- :organization="organization"
52
- :organization-options="organizationOptions"
53
- >
54
- </asd20-site-navigation>
55
57
  <!-- Inline-Notifications -->
56
58
  <client-only>
57
59
  <asd20-notification-group
@@ -75,6 +77,7 @@
75
77
  v-bind="widgetsSectionProps.sidebar"
76
78
  @events-in-view="$emit('events-in-view')"
77
79
  @files-in-view="$emit('files-in-view')"
80
+ @people-in-view="$emit('people-in-view')"
78
81
  ></asd20-widgets-section>
79
82
  </asd20-page-content>
80
83
 
@@ -141,8 +144,6 @@ import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
141
144
  import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
142
145
  import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
143
146
 
144
- // import Intersect from 'vue-intersect'
145
-
146
147
  // Mixins
147
148
  import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
148
149
 
@@ -160,7 +161,6 @@ export default {
160
161
  Asd20NotificationGroup,
161
162
  Asd20QuicklinksMenu,
162
163
  Asd20MediaSection,
163
- // Intersect,
164
164
  },
165
165
  }
166
166
  </script>
@@ -188,49 +188,40 @@ export default {
188
188
  .bell {
189
189
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
190
190
  svg {
191
- fill: var(--color__accent);
191
+ fill: var(--color__accent) !important;
192
192
  }
193
193
  span {
194
- background: var(--color__accent);
194
+ background: var(--color__accent) !important;
195
195
  top: inherit !important;
196
196
  right: inherit !important;
197
197
  width: 1.2rem !important;
198
198
  height: 1.2rem !important;
199
+ font-size: 0.75rem !important;
199
200
  }
200
201
  }
201
202
  }
202
- .notification-group--inline {
203
- margin: space(1);
204
- }
205
- .asd20-widgets-section {
206
- background: var(--website-page__alternate-background-color);
207
- background-image: var(--website-texture__default);
208
- background-position-y: top;
209
- padding: space(1) 0;
210
- }
211
203
  }
212
204
 
213
205
  @media (min-width: 1024px) {
214
206
  .asd20-template-article {
207
+ @include template-desktop;
215
208
  margin-left: space(3);
216
209
  margin-top: 0;
217
210
  .asd20-notification-group--floating {
218
211
  position: absolute;
219
212
  top: space(1);
220
- .bell {
221
- span {
222
- background: var(--color__accent);
223
- top: -0.6em !important;
224
- right: -0.6em !important;
225
- }
226
- }
213
+ // .bell {
214
+ // span {
215
+ // background: var(--color__accent);
216
+ // top: -0.6em !important;
217
+ // right: -0.6em !important;
218
+ // }
219
+ // }
227
220
  }
228
221
  .notification-group--inline {
229
222
  margin: space(2) space(3) space(1) space(3);
230
- }
231
- .asd20-widgets-section {
232
- padding: space(2) space(3);
233
- height: min-content;
223
+ flex-basis: 100%;
224
+ margin-bottom: 0 !important;
234
225
  }
235
226
 
236
227
  .asd20-page-content {
@@ -245,10 +236,6 @@ export default {
245
236
  background: none;
246
237
  }
247
238
  }
248
- .notification-group--inline {
249
- flex-basis: 100%;
250
- margin-bottom: 0 !important;
251
- }
252
239
  .primary-messaging-section {
253
240
  max-width: 50vw;
254
241
  }
@@ -203,14 +203,15 @@ export default {
203
203
  .bell {
204
204
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
205
205
  svg {
206
- fill: var(--color__accent);
206
+ fill: var(--color__accent) !important;
207
207
  }
208
208
  span {
209
- background: var(--color__accent);
209
+ background: var(--color__accent) !important;
210
210
  top: inherit !important;
211
211
  right: inherit !important;
212
212
  width: 1.2rem !important;
213
213
  height: 1.2rem !important;
214
+ font-size: 0.75rem !important;
214
215
  }
215
216
  }
216
217
  }
@@ -245,13 +246,13 @@ export default {
245
246
  .asd20-notification-group--floating {
246
247
  position: absolute;
247
248
  top: space(1);
248
- .bell {
249
- span {
250
- background: var(--color__accent);
251
- top: -0.6em !important;
252
- right: -0.6em !important;
253
- }
254
- }
249
+ // .bell {
250
+ // span {
251
+ // background: var(--color__accent);
252
+ // top: -0.6em !important;
253
+ // right: -0.6em !important;
254
+ // }
255
+ // }
255
256
  }
256
257
  .notification-group--inline {
257
258
  flex-basis: 100%;
@@ -188,14 +188,15 @@ export default {
188
188
  .bell {
189
189
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
190
190
  svg {
191
- fill: var(--color__accent);
191
+ fill: var(--color__accent) !important;
192
192
  }
193
193
  span {
194
- background: var(--color__accent);
194
+ background: var(--color__accent) !important;
195
195
  top: inherit !important;
196
196
  right: inherit !important;
197
197
  width: 1.2rem !important;
198
198
  height: 1.2rem !important;
199
+ font-size: 0.75rem !important;
199
200
  }
200
201
  }
201
202
  }
@@ -209,13 +210,13 @@ export default {
209
210
  .asd20-notification-group--floating {
210
211
  position: absolute;
211
212
  top: space(1);
212
- .bell {
213
- span {
214
- background: var(--color__accent);
215
- top: -0.6em !important;
216
- right: -0.6em !important;
217
- }
218
- }
213
+ // .bell {
214
+ // span {
215
+ // background: var(--color__accent);
216
+ // top: -0.6em !important;
217
+ // right: -0.6em !important;
218
+ // }
219
+ // }
219
220
  }
220
221
  .notification-group--inline {
221
222
  margin: space(2) space(3) space(1) space(3);
@@ -301,14 +301,15 @@ export default {
301
301
  .bell {
302
302
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
303
303
  svg {
304
- fill: var(--color__accent);
304
+ fill: var(--color__accent) !important;
305
305
  }
306
306
  span {
307
- background: var(--color__accent);
307
+ background: var(--color__accent) !important;
308
308
  top: inherit !important;
309
309
  right: inherit !important;
310
310
  width: 1.2rem !important;
311
311
  height: 1.2rem !important;
312
+ font-size: 0.75rem !important;
312
313
  }
313
314
  }
314
315
  }
@@ -359,15 +360,15 @@ export default {
359
360
  z-index: 3;
360
361
  display: flex;
361
362
  justify-content: space-between;
362
- .notification-group--floating {
363
- .bell {
364
- span {
365
- background: var(--color__accent);
366
- top: -0.6em !important;
367
- right: -0.6em !important;
368
- }
369
- }
370
- }
363
+ // .notification-group--floating {
364
+ // .bell {
365
+ // span {
366
+ // background: var(--color__accent);
367
+ // top: -0.6em !important;
368
+ // right: -0.6em !important;
369
+ // }
370
+ // }
371
+ // }
371
372
  .asd20-district-logo {
372
373
  margin: space(1) space(1) space(1) space(1);
373
374
  line-height: 2;
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="asd20-district-video-template">
3
3
  <!-- Skip Nav -->
4
- <!-- <asd20-skip-to /> -->
4
+ <asd20-skip-to />
5
5
 
6
6
  <!-- Banner Notifications -->
7
7
  <client-only>
@@ -90,6 +90,7 @@
90
90
  <!-- analytics requested by Kyle Blakely -->
91
91
  <img
92
92
  src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
93
+ alt=""
93
94
  />
94
95
  </asd20-page-footer>
95
96
  </div>
@@ -170,14 +171,15 @@ export default {
170
171
  .bell {
171
172
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
172
173
  svg {
173
- fill: var(--color__accent);
174
+ fill: var(--color__accent) !important;
174
175
  }
175
176
  span {
176
- background: var(--color__accent);
177
+ background: var(--color__accent) !important;
177
178
  top: inherit !important;
178
179
  right: inherit !important;
179
180
  width: 1.2rem !important;
180
181
  height: 1.2rem !important;
182
+ font-size: 0.75rem !important;
181
183
  }
182
184
  }
183
185
  }
@@ -196,15 +198,15 @@ export default {
196
198
  display: block;
197
199
  margin-left: space(3);
198
200
  margin-top: 0;
199
- .notification-group--floating {
200
- .bell {
201
- span {
202
- background: var(--color__accent);
203
- top: -0.6em !important;
204
- right: -0.6em !important;
205
- }
206
- }
207
- }
201
+ // .notification-group--floating {
202
+ // .bell {
203
+ // span {
204
+ // background: var(--color__accent);
205
+ // top: -0.6em !important;
206
+ // right: -0.6em !important;
207
+ // }
208
+ // }
209
+ // }
208
210
  }
209
211
  #site-navigation .asd20-district-logo {
210
212
  display: none;
@@ -176,14 +176,15 @@ export default {
176
176
  .bell {
177
177
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
178
178
  svg {
179
- fill: var(--color__accent);
179
+ fill: var(--color__accent) !important;
180
180
  }
181
181
  span {
182
- background: var(--color__accent);
182
+ background: var(--color__accent) !important;
183
183
  top: inherit !important;
184
184
  right: inherit !important;
185
185
  width: 1.2rem !important;
186
186
  height: 1.2rem !important;
187
+ font-size: 0.75rem !important;
187
188
  }
188
189
  }
189
190
  }
@@ -205,13 +206,13 @@ export default {
205
206
  .asd20-notification-group--floating {
206
207
  position: absolute;
207
208
  top: space(1);
208
- .bell {
209
- span {
210
- background: var(--color__accent);
211
- top: -0.6em !important;
212
- right: -0.6em !important;
213
- }
214
- }
209
+ // .bell {
210
+ // span {
211
+ // background: var(--color__accent);
212
+ // top: -0.6em !important;
213
+ // right: -0.6em !important;
214
+ // }
215
+ // }
215
216
  }
216
217
  .asd20-page-content {
217
218
  margin-top: space(1);
@@ -301,14 +301,15 @@ export default {
301
301
  .bell {
302
302
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
303
303
  svg {
304
- fill: var(--color__accent);
304
+ fill: var(--color__accent) !important;
305
305
  }
306
306
  span {
307
- background: var(--color__accent);
307
+ background: var(--color__accent) !important;
308
308
  top: inherit !important;
309
309
  right: inherit !important;
310
310
  width: 1.2rem !important;
311
311
  height: 1.2rem !important;
312
+ font-size: 0.75rem !important;
312
313
  }
313
314
  }
314
315
  }
@@ -358,13 +359,13 @@ export default {
358
359
  position: absolute;
359
360
  right: space(1.85);
360
361
  top: space(1);
361
- .bell {
362
- span {
363
- background: var(--color__accent);
364
- top: -0.6em !important;
365
- right: -0.6em !important;
366
- }
367
- }
362
+ // .bell {
363
+ // span {
364
+ // background: var(--color__accent);
365
+ // top: -0.6em !important;
366
+ // right: -0.6em !important;
367
+ // }
368
+ // }
368
369
  }
369
370
  .notification-group--inline {
370
371
  margin: space(2) space(3) space(1) space(3);
@@ -450,14 +450,15 @@ export default {
450
450
  .bell {
451
451
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
452
452
  svg {
453
- fill: var(--color__accent);
453
+ fill: var(--color__accent) !important;
454
454
  }
455
455
  span {
456
- background: var(--color__accent);
456
+ background: var(--color__accent) !important;
457
457
  top: inherit !important;
458
458
  right: inherit !important;
459
459
  width: 1.2rem !important;
460
460
  height: 1.2rem !important;
461
+ font-size: 0.75rem !important;
461
462
  }
462
463
  }
463
464
  }
@@ -538,13 +539,13 @@ export default {
538
539
  .asd20-notification-group--floating {
539
540
  position: absolute;
540
541
  top: space(1);
541
- .bell {
542
- span {
543
- background: var(--color__accent);
544
- top: -0.6em !important;
545
- right: -0.6em !important;
546
- }
547
- }
542
+ // .bell {
543
+ // span {
544
+ // background: var(--color__accent);
545
+ // top: -0.6em !important;
546
+ // right: -0.6em !important;
547
+ // }
548
+ // }
548
549
  }
549
550
  .notification-group--inline {
550
551
  margin: space(2) space(3) space(1) space(3);
@@ -673,14 +673,15 @@ export default {
673
673
  .bell {
674
674
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
675
675
  svg {
676
- fill: var(--color__accent);
676
+ fill: var(--color__accent) !important;
677
677
  }
678
678
  span {
679
- background: var(--color__accent);
679
+ background: var(--color__accent) !important;
680
680
  top: inherit !important;
681
681
  right: inherit !important;
682
682
  width: 1.2rem !important;
683
683
  height: 1.2rem !important;
684
+ font-size: 0.75rem !important;
684
685
  }
685
686
  }
686
687
  }
@@ -706,13 +707,13 @@ export default {
706
707
  .asd20-notification-group--floating {
707
708
  position: absolute;
708
709
  top: space(1);
709
- .bell {
710
- span {
711
- background: var(--color__accent);
712
- top: -0.6em !important;
713
- right: -0.6em !important;
714
- }
715
- }
710
+ // .bell {
711
+ // span {
712
+ // background: var(--color__accent);
713
+ // top: -0.6em !important;
714
+ // right: -0.6em !important;
715
+ // }
716
+ // }
716
717
  }
717
718
  .notification-group--inline {
718
719
  margin: space(2) space(3) space(1) space(3);
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="asd20-school-home-template">
3
3
  <!-- Skip Nav -->
4
- <!-- <asd20-skip-to></asd20-skip-to> -->
4
+ <asd20-skip-to></asd20-skip-to>
5
5
 
6
6
  <!-- Banner Notifications -->
7
7
  <client-only>
@@ -211,14 +211,15 @@ export default {
211
211
  .bell {
212
212
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
213
213
  svg {
214
- fill: var(--color__accent);
214
+ fill: var(--color__accent) !important;
215
215
  }
216
216
  span {
217
- background: var(--color__accent);
217
+ background: var(--color__accent) !important;
218
218
  top: inherit !important;
219
219
  right: inherit !important;
220
220
  width: 1.2rem !important;
221
221
  height: 1.2rem !important;
222
+ font-size: 0.75rem !important;
222
223
  }
223
224
  }
224
225
  }
@@ -255,15 +256,15 @@ export default {
255
256
  padding-right: 0;
256
257
  }
257
258
  }
258
- .notification-group--floating {
259
- .bell {
260
- span {
261
- background: var(--color__accent);
262
- top: -0.6em !important;
263
- right: -0.6em !important;
264
- }
265
- }
266
- }
259
+ // .notification-group--floating {
260
+ // .bell {
261
+ // span {
262
+ // background: var(--color__accent);
263
+ // top: -0.6em !important;
264
+ // right: -0.6em !important;
265
+ // }
266
+ // }
267
+ // }
267
268
  .pickerContainer {
268
269
  display: flex;
269
270
  .optionalLogo {
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="asd20-school-home-video-template">
3
3
  <!-- Skip Nav -->
4
- <!-- <asd20-skip-to></asd20-skip-to> -->
4
+ <asd20-skip-to></asd20-skip-to>
5
5
 
6
6
  <!-- Banner Notifications -->
7
7
  <client-only>
@@ -210,14 +210,15 @@ export default {
210
210
  .bell {
211
211
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
212
212
  svg {
213
- fill: var(--color__accent);
213
+ fill: var(--color__accent) !important;
214
214
  }
215
215
  span {
216
- background: var(--color__accent);
216
+ background: var(--color__accent) !important;
217
217
  top: inherit !important;
218
218
  right: inherit !important;
219
219
  width: 1.2rem !important;
220
220
  height: 1.2rem !important;
221
+ font-size: 0.75rem !important;
221
222
  }
222
223
  }
223
224
  }
@@ -270,13 +271,13 @@ export default {
270
271
  .asd20-notification-group--floating {
271
272
  right: space(4);
272
273
  top: space(7.5) !important;
273
- .bell {
274
- span {
275
- background: var(--color__accent);
276
- top: -0.6em !important;
277
- right: -0.6em !important;
278
- }
279
- }
274
+ // .bell {
275
+ // span {
276
+ // background: var(--color__accent);
277
+ // top: -0.6em !important;
278
+ // right: -0.6em !important;
279
+ // }
280
+ // }
280
281
  }
281
282
  .asd20-notification-group--status {
282
283
  order: 0;
@@ -196,14 +196,15 @@ export default {
196
196
  .bell {
197
197
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
198
198
  svg {
199
- fill: var(--color__accent);
199
+ fill: var(--color__accent) !important;
200
200
  }
201
201
  span {
202
- background: var(--color__accent);
202
+ background: var(--color__accent) !important;
203
203
  top: inherit !important;
204
204
  right: inherit !important;
205
205
  width: 1.2rem !important;
206
206
  height: 1.2rem !important;
207
+ font-size: 0.75rem !important;
207
208
  }
208
209
  }
209
210
  }
@@ -214,13 +215,13 @@ export default {
214
215
  .asd20-notification-group--floating {
215
216
  position: absolute;
216
217
  top: space(1);
217
- .bell {
218
- span {
219
- background: var(--color__accent);
220
- top: -0.6em !important;
221
- right: -0.6em !important;
222
- }
223
- }
218
+ // .bell {
219
+ // span {
220
+ // background: var(--color__accent);
221
+ // top: -0.6em !important;
222
+ // right: -0.6em !important;
223
+ // }
224
+ // }
224
225
  }
225
226
  @include template-desktop;
226
227
  margin-left: space(3);