@asd20/ui 3.2.401 → 3.2.404

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.401",
8
+ "version": "3.2.404",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -1,6 +1,10 @@
1
1
  <template>
2
2
  <component :is="tag" :class="classes">
3
- <div class="asd20-card__content">
3
+ <component
4
+ :is="emphasizedDate ? 'button' : 'div'"
5
+ class="asd20-card__content"
6
+ :class="emphasizedDate ? 'asd20-card__event-content' : ''"
7
+ >
4
8
  <div class="asd20-card__header">
5
9
  <div class="asd20-card__emphasized-date" v-if="emphasizedDate">
6
10
  <div class="top">{{ weekday }}</div>
@@ -69,7 +73,7 @@
69
73
  </div>
70
74
  </div>
71
75
  <slot />
72
- </div>
76
+ </component>
73
77
  <figure class="asd20-card__image" v-if="image && !noCoverImage">
74
78
  <img v-lazy="image" :key="image" :alt="alt || ''" />
75
79
  </figure>
@@ -208,6 +212,12 @@ export default {
208
212
  display: flex;
209
213
  flex-direction: column;
210
214
  }
215
+ &__event-content {
216
+ background: transparent;
217
+ border: none;
218
+ text-align: left;
219
+ align-items: inherit;
220
+ }
211
221
 
212
222
  &__title {
213
223
  font-family: var(--website-typography__font-family-headlines);
@@ -90,7 +90,7 @@ export default {
90
90
  {
91
91
  preloadImages: false,
92
92
  keyboard: {
93
- enabled: false,
93
+ enabled: true,
94
94
  onlyInViewport: true,
95
95
  },
96
96
  a11y: true,
@@ -378,13 +378,16 @@ export default {
378
378
  position: absolute;
379
379
  top: space(2);
380
380
  .bell {
381
- z-index: 1000;
382
381
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
383
382
  svg {
384
- fill: var(--color__accent) !important;
383
+ fill: var(--color__accent);
385
384
  }
386
385
  span {
387
- background: var(--color__accent) !important;
386
+ background: var(--color__accent);
387
+ top: inherit !important;
388
+ right: inherit !important;
389
+ width: 1.2rem !important;
390
+ height: 1.2rem !important;
388
391
  }
389
392
  }
390
393
  }
@@ -446,6 +449,13 @@ export default {
446
449
  .asd20-notification-group--floating {
447
450
  position: absolute;
448
451
  top: space(1);
452
+ .bell {
453
+ span {
454
+ background: var(--color__accent);
455
+ top: -0.6em !important;
456
+ right: -0.6em !important;
457
+ }
458
+ }
449
459
  }
450
460
  .feed-title {
451
461
  margin-left: 0;
@@ -379,13 +379,16 @@ export default {
379
379
  position: absolute;
380
380
  top: space(2);
381
381
  .bell {
382
- z-index: 1000;
383
382
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
384
383
  svg {
385
- fill: var(--color__accent) !important;
384
+ fill: var(--color__accent);
386
385
  }
387
386
  span {
388
- background: var(--color__accent) !important;
387
+ background: var(--color__accent);
388
+ top: inherit !important;
389
+ right: inherit !important;
390
+ width: 1.2rem !important;
391
+ height: 1.2rem !important;
389
392
  }
390
393
  }
391
394
  }
@@ -463,6 +466,13 @@ export default {
463
466
  .asd20-notification-group--floating {
464
467
  position: absolute;
465
468
  top: space(1);
469
+ .bell {
470
+ span {
471
+ background: var(--color__accent);
472
+ top: -0.6em !important;
473
+ right: -0.6em !important;
474
+ }
475
+ }
466
476
  }
467
477
  .feed-title {
468
478
  margin-left: 0;
@@ -186,13 +186,16 @@ export default {
186
186
  position: absolute;
187
187
  top: space(2);
188
188
  .bell {
189
- z-index: 1000;
190
189
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
191
190
  svg {
192
- fill: var(--color__accent) !important;
191
+ fill: var(--color__accent);
193
192
  }
194
193
  span {
195
- background: var(--color__accent) !important;
194
+ background: var(--color__accent);
195
+ top: inherit !important;
196
+ right: inherit !important;
197
+ width: 1.2rem !important;
198
+ height: 1.2rem !important;
196
199
  }
197
200
  }
198
201
  }
@@ -214,6 +217,13 @@ export default {
214
217
  .asd20-notification-group--floating {
215
218
  position: absolute;
216
219
  top: space(1);
220
+ .bell {
221
+ span {
222
+ background: var(--color__accent);
223
+ top: -0.6em !important;
224
+ right: -0.6em !important;
225
+ }
226
+ }
217
227
  }
218
228
  .notification-group--inline {
219
229
  margin: space(2) space(3) space(1) space(3);
@@ -201,13 +201,16 @@ export default {
201
201
  position: absolute;
202
202
  top: space(2);
203
203
  .bell {
204
- z-index: 1000;
205
204
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
206
205
  svg {
207
- fill: var(--color__accent) !important;
206
+ fill: var(--color__accent);
208
207
  }
209
208
  span {
210
- background: var(--color__accent) !important;
209
+ background: var(--color__accent);
210
+ top: inherit !important;
211
+ right: inherit !important;
212
+ width: 1.2rem !important;
213
+ height: 1.2rem !important;
211
214
  }
212
215
  }
213
216
  }
@@ -242,6 +245,13 @@ export default {
242
245
  .asd20-notification-group--floating {
243
246
  position: absolute;
244
247
  top: space(1);
248
+ .bell {
249
+ span {
250
+ background: var(--color__accent);
251
+ top: -0.6em !important;
252
+ right: -0.6em !important;
253
+ }
254
+ }
245
255
  }
246
256
  .notification-group--inline {
247
257
  flex-basis: 100%;
@@ -186,13 +186,16 @@ export default {
186
186
  position: absolute;
187
187
  top: space(2);
188
188
  .bell {
189
- z-index: 1000;
190
189
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
191
190
  svg {
192
- fill: var(--color__accent) !important;
191
+ fill: var(--color__accent);
193
192
  }
194
193
  span {
195
- background: var(--color__accent) !important;
194
+ background: var(--color__accent);
195
+ top: inherit !important;
196
+ right: inherit !important;
197
+ width: 1.2rem !important;
198
+ height: 1.2rem !important;
196
199
  }
197
200
  }
198
201
  }
@@ -206,6 +209,13 @@ export default {
206
209
  .asd20-notification-group--floating {
207
210
  position: absolute;
208
211
  top: space(1);
212
+ .bell {
213
+ span {
214
+ background: var(--color__accent);
215
+ top: -0.6em !important;
216
+ right: -0.6em !important;
217
+ }
218
+ }
209
219
  }
210
220
  .notification-group--inline {
211
221
  margin: space(2) space(3) space(1) space(3);
@@ -296,16 +296,19 @@ export default {
296
296
  }
297
297
  }
298
298
 
299
- & /deep/ .notification-group--floating {
299
+ .notification-group--floating {
300
300
  margin-right: 0;
301
301
  .bell {
302
- z-index: 1000;
303
302
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
304
303
  svg {
305
- fill: var(--color__accent) !important;
304
+ fill: var(--color__accent);
306
305
  }
307
306
  span {
308
- background: var(--color__accent) !important;
307
+ background: var(--color__accent);
308
+ top: inherit !important;
309
+ right: inherit !important;
310
+ width: 1.2rem !important;
311
+ height: 1.2rem !important;
309
312
  }
310
313
  }
311
314
  }
@@ -356,6 +359,15 @@ export default {
356
359
  z-index: 3;
357
360
  display: flex;
358
361
  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
+ }
359
371
  .asd20-district-logo {
360
372
  margin: space(1) space(1) space(1) space(1);
361
373
  line-height: 2;
@@ -88,8 +88,9 @@
88
88
  <slot name="page-footer" />
89
89
 
90
90
  <!-- analytics requested by Kyle Blakely -->
91
- <img src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi">
92
-
91
+ <img
92
+ src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
93
+ />
93
94
  </asd20-page-footer>
94
95
  </div>
95
96
  </template>
@@ -167,13 +168,16 @@ export default {
167
168
  }
168
169
  .asd20-notification-group--floating {
169
170
  .bell {
170
- z-index: 1000;
171
171
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
172
172
  svg {
173
- fill: var(--color__accent) !important;
173
+ fill: var(--color__accent);
174
174
  }
175
175
  span {
176
- background: var(--color__accent) !important;
176
+ background: var(--color__accent);
177
+ top: inherit !important;
178
+ right: inherit !important;
179
+ width: 1.2rem !important;
180
+ height: 1.2rem !important;
177
181
  }
178
182
  }
179
183
  }
@@ -192,6 +196,15 @@ export default {
192
196
  display: block;
193
197
  margin-left: space(3);
194
198
  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
+ }
195
208
  }
196
209
  #site-navigation .asd20-district-logo {
197
210
  display: none;
@@ -174,13 +174,16 @@ export default {
174
174
  position: absolute;
175
175
  top: space(2);
176
176
  .bell {
177
- z-index: 1000;
178
177
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
179
178
  svg {
180
- fill: var(--color__accent) !important;
179
+ fill: var(--color__accent);
181
180
  }
182
181
  span {
183
- background: var(--color__accent) !important;
182
+ background: var(--color__accent);
183
+ top: inherit !important;
184
+ right: inherit !important;
185
+ width: 1.2rem !important;
186
+ height: 1.2rem !important;
184
187
  }
185
188
  }
186
189
  }
@@ -202,6 +205,13 @@ export default {
202
205
  .asd20-notification-group--floating {
203
206
  position: absolute;
204
207
  top: space(1);
208
+ .bell {
209
+ span {
210
+ background: var(--color__accent);
211
+ top: -0.6em !important;
212
+ right: -0.6em !important;
213
+ }
214
+ }
205
215
  }
206
216
  .asd20-page-content {
207
217
  margin-top: space(1);
@@ -292,7 +292,6 @@ export default {
292
292
  .asd20-page-header {
293
293
  margin-bottom: space(0) !important;
294
294
  .asd20-page-header__tools {
295
-
296
295
  }
297
296
  }
298
297
  .notification-group--floating {
@@ -300,13 +299,16 @@ export default {
300
299
  right: space(0.85);
301
300
  top: space(2);
302
301
  .bell {
303
- z-index: 1000;
304
302
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
305
303
  svg {
306
- fill: var(--color__accent) !important;
304
+ fill: var(--color__accent);
307
305
  }
308
306
  span {
309
- background: var(--color__accent) !important;
307
+ background: var(--color__accent);
308
+ top: inherit !important;
309
+ right: inherit !important;
310
+ width: 1.2rem !important;
311
+ height: 1.2rem !important;
310
312
  }
311
313
  }
312
314
  }
@@ -356,6 +358,13 @@ export default {
356
358
  position: absolute;
357
359
  right: space(1.85);
358
360
  top: space(1);
361
+ .bell {
362
+ span {
363
+ background: var(--color__accent);
364
+ top: -0.6em !important;
365
+ right: -0.6em !important;
366
+ }
367
+ }
359
368
  }
360
369
  .notification-group--inline {
361
370
  margin: space(2) space(3) space(1) space(3);
@@ -448,13 +448,16 @@ export default {
448
448
  position: absolute;
449
449
  top: space(2);
450
450
  .bell {
451
- z-index: 1000;
452
451
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
453
452
  svg {
454
- fill: var(--color__accent) !important;
453
+ fill: var(--color__accent);
455
454
  }
456
455
  span {
457
- background: var(--color__accent) !important;
456
+ background: var(--color__accent);
457
+ top: inherit !important;
458
+ right: inherit !important;
459
+ width: 1.2rem !important;
460
+ height: 1.2rem !important;
458
461
  }
459
462
  }
460
463
  }
@@ -535,6 +538,13 @@ export default {
535
538
  .asd20-notification-group--floating {
536
539
  position: absolute;
537
540
  top: space(1);
541
+ .bell {
542
+ span {
543
+ background: var(--color__accent);
544
+ top: -0.6em !important;
545
+ right: -0.6em !important;
546
+ }
547
+ }
538
548
  }
539
549
  .notification-group--inline {
540
550
  margin: space(2) space(3) space(1) space(3);
@@ -671,13 +671,16 @@ export default {
671
671
  position: absolute;
672
672
  top: space(2);
673
673
  .bell {
674
- z-index: 1000;
675
674
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
676
675
  svg {
677
- fill: var(--color__accent) !important;
676
+ fill: var(--color__accent);
678
677
  }
679
678
  span {
680
- background: var(--color__accent) !important;
679
+ background: var(--color__accent);
680
+ top: inherit !important;
681
+ right: inherit !important;
682
+ width: 1.2rem !important;
683
+ height: 1.2rem !important;
681
684
  }
682
685
  }
683
686
  }
@@ -703,6 +706,13 @@ export default {
703
706
  .asd20-notification-group--floating {
704
707
  position: absolute;
705
708
  top: space(1);
709
+ .bell {
710
+ span {
711
+ background: var(--color__accent);
712
+ top: -0.6em !important;
713
+ right: -0.6em !important;
714
+ }
715
+ }
706
716
  }
707
717
  .notification-group--inline {
708
718
  margin: space(2) space(3) space(1) space(3);
@@ -209,13 +209,16 @@ export default {
209
209
  }
210
210
  .asd20-notification-group--floating {
211
211
  .bell {
212
- z-index: 1000;
213
212
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
214
213
  svg {
215
- fill: var(--color__accent) !important;
214
+ fill: var(--color__accent);
216
215
  }
217
216
  span {
218
- background: var(--color__accent) !important;
217
+ background: var(--color__accent);
218
+ top: inherit !important;
219
+ right: inherit !important;
220
+ width: 1.2rem !important;
221
+ height: 1.2rem !important;
219
222
  }
220
223
  }
221
224
  }
@@ -247,10 +250,20 @@ export default {
247
250
  display: block;
248
251
  margin-left: space(3);
249
252
  margin-top: 0;
250
- // &::v-deep .asd20-notification-group--status {
251
- // background: white;
252
- // top: space(2);
253
- // }
253
+ .asd20-notification--status {
254
+ .asd20-notification__content {
255
+ padding-right: 0;
256
+ }
257
+ }
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
+ }
254
267
  .pickerContainer {
255
268
  display: flex;
256
269
  .optionalLogo {
@@ -208,13 +208,16 @@ export default {
208
208
  right: space(0.5);
209
209
  top: space(2) !important;
210
210
  .bell {
211
- z-index: 1000;
212
211
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
213
212
  svg {
214
- fill: var(--color__accent) !important;
213
+ fill: var(--color__accent);
215
214
  }
216
215
  span {
217
- background: var(--color__accent) !important;
216
+ background: var(--color__accent);
217
+ top: inherit !important;
218
+ right: inherit !important;
219
+ width: 1.2rem !important;
220
+ height: 1.2rem !important;
218
221
  }
219
222
  }
220
223
  }
@@ -267,6 +270,13 @@ export default {
267
270
  .asd20-notification-group--floating {
268
271
  right: space(4);
269
272
  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
+ }
270
280
  }
271
281
  .asd20-notification-group--status {
272
282
  order: 0;
@@ -276,17 +286,17 @@ export default {
276
286
  }
277
287
  }
278
288
 
279
- @media (min-width: 1350px) {
280
- .asd20-school-home-video-template {
281
- .asd20-notification-group--status {
282
- order: 0;
283
- right: space(3) !important;
284
- top: space(2.5) !important;
285
- }
286
- .asd20-notification-group--floating {
287
- right: space(3.5);
288
- top: space(3.5) !important;
289
- }
290
- }
291
- }
289
+ // @media (min-width: 1350px) {
290
+ // .asd20-school-home-video-template {
291
+ // .asd20-notification-group--status {
292
+ // order: 0;
293
+ // right: space(4) !important;
294
+ // top: space(6) !important;
295
+ // }
296
+ // .asd20-notification-group--floating {
297
+ // right: space(4);
298
+ // top: space(8) !important;
299
+ // }
300
+ // }
301
+ // }
292
302
  </style>
@@ -194,13 +194,16 @@ export default {
194
194
  position: absolute;
195
195
  top: space(2);
196
196
  .bell {
197
- z-index: 1000;
198
197
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
199
198
  svg {
200
- fill: var(--color__accent) !important;
199
+ fill: var(--color__accent);
201
200
  }
202
201
  span {
203
- background: var(--color__accent) !important;
202
+ background: var(--color__accent);
203
+ top: inherit !important;
204
+ right: inherit !important;
205
+ width: 1.2rem !important;
206
+ height: 1.2rem !important;
204
207
  }
205
208
  }
206
209
  }
@@ -211,6 +214,13 @@ export default {
211
214
  .asd20-notification-group--floating {
212
215
  position: absolute;
213
216
  top: space(1);
217
+ .bell {
218
+ span {
219
+ background: var(--color__accent);
220
+ top: -0.6em !important;
221
+ right: -0.6em !important;
222
+ }
223
+ }
214
224
  }
215
225
  @include template-desktop;
216
226
  margin-left: space(3);