@asd20/ui 3.2.400 → 3.2.403

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 (15) hide show
  1. package/package.json +1 -1
  2. package/src/components/templates/Asd20ArticleDigestTemplate/index.vue +14 -12
  3. package/src/components/templates/Asd20ArticleListTemplate/index.vue +14 -12
  4. package/src/components/templates/Asd20ArticleTemplate/index.vue +14 -12
  5. package/src/components/templates/Asd20DetailAlternateTemplate/index.vue +14 -13
  6. package/src/components/templates/Asd20DetailTemplate/index.vue +14 -12
  7. package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +16 -4
  8. package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +18 -5
  9. package/src/components/templates/Asd20FileListPageTemplate/index.vue +14 -12
  10. package/src/components/templates/Asd20LoginsTemplate/index.vue +19 -16
  11. package/src/components/templates/Asd20ProfileTemplate/index.vue +14 -12
  12. package/src/components/templates/Asd20SalaryCalculatorTemplate/index.vue +14 -13
  13. package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +20 -7
  14. package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +26 -16
  15. package/src/components/templates/Asd20WayfindingTemplate/index.vue +14 -13
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.400",
8
+ "version": "3.2.403",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/templates/Asd20ArticleDigestTemplate/index.vue CHANGED
@@ -376,15 +376,18 @@ export default {
376
376
  margin-top: space(2.25);
377
377
  .asd20-notification-group--floating {
378
378
  position: absolute;
379
- top: space(4);
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
  }
@@ -437,14 +440,6 @@ export default {
437
440
  margin-left: 0;
438
441
  }
439
442
  }
440
- @media (min-width: 470px) {
441
- .asd20-template-article-digest {
442
- .asd20-notification-group--floating {
443
- position: absolute;
444
- top: space(2);
445
- }
446
- }
447
- }
448
443
 
449
444
  @media (min-width: 1024px) {
450
445
  .asd20-template-article-digest {
@@ -454,6 +449,13 @@ export default {
454
449
  .asd20-notification-group--floating {
455
450
  position: absolute;
456
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
+ }
457
459
  }
458
460
  .feed-title {
459
461
  margin-left: 0;
package/src/components/templates/Asd20ArticleListTemplate/index.vue CHANGED
@@ -377,15 +377,18 @@ export default {
377
377
  margin-top: space(2.25);
378
378
  .asd20-notification-group--floating {
379
379
  position: absolute;
380
- top: space(4);
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
  }
@@ -454,14 +457,6 @@ export default {
454
457
  }
455
458
  }
456
459
  }
457
- @media (min-width: 470px) {
458
- .asd20-template-article-list {
459
- .asd20-notification-group--floating {
460
- position: absolute;
461
- top: space(2);
462
- }
463
- }
464
- }
465
460
 
466
461
  @media (min-width: 1024px) {
467
462
  .asd20-template-article-list {
@@ -471,6 +466,13 @@ export default {
471
466
  .asd20-notification-group--floating {
472
467
  position: absolute;
473
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
+ }
474
476
  }
475
477
  .feed-title {
476
478
  margin-left: 0;
package/src/components/templates/Asd20ArticleTemplate/index.vue CHANGED
@@ -184,15 +184,18 @@ export default {
184
184
  margin-top: space(2.25);
185
185
  .asd20-notification-group--floating {
186
186
  position: absolute;
187
- top: space(4);
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,14 +209,6 @@ export default {
206
209
  padding: space(1) 0;
207
210
  }
208
211
  }
209
- @media (min-width: 470px) {
210
- .asd20-template-article {
211
- .asd20-notification-group--floating {
212
- position: absolute;
213
- top: space(2);
214
- }
215
- }
216
- }
217
212
 
218
213
  @media (min-width: 1024px) {
219
214
  .asd20-template-article {
@@ -222,6 +217,13 @@ export default {
222
217
  .asd20-notification-group--floating {
223
218
  position: absolute;
224
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
+ }
225
227
  }
226
228
  .notification-group--inline {
227
229
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20DetailAlternateTemplate/index.vue CHANGED
@@ -199,15 +199,18 @@ export default {
199
199
  margin-top: space(2.25);
200
200
  .asd20-notification-group--floating {
201
201
  position: absolute;
202
- top: space(4);
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
  }
@@ -234,15 +237,6 @@ export default {
234
237
  }
235
238
  }
236
239
 
237
- @media (min-width: 470px) {
238
- .asd20-template-detail-alternate {
239
- .asd20-notification-group--floating {
240
- position: absolute;
241
- top: space(2);
242
- }
243
- }
244
- }
245
-
246
240
  @media (min-width: 1024px) {
247
241
  .asd20-template-detail-alternate {
248
242
  @include template-desktop;
@@ -251,6 +245,13 @@ export default {
251
245
  .asd20-notification-group--floating {
252
246
  position: absolute;
253
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
+ }
254
255
  }
255
256
  .notification-group--inline {
256
257
  flex-basis: 100%;
package/src/components/templates/Asd20DetailTemplate/index.vue CHANGED
@@ -184,27 +184,22 @@ export default {
184
184
  margin-top: space(2.25);
185
185
  .asd20-notification-group--floating {
186
186
  position: absolute;
187
- top: space(4);
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
  }
199
202
  }
200
- @media (min-width: 470px) {
201
- .asd20-template-detail {
202
- .asd20-notification-group--floating {
203
- position: absolute;
204
- top: space(2);
205
- }
206
- }
207
- }
208
203
 
209
204
  @media (min-width: 1024px) {
210
205
  .asd20-template-detail {
@@ -214,6 +209,13 @@ export default {
214
209
  .asd20-notification-group--floating {
215
210
  position: absolute;
216
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
+ }
217
219
  }
218
220
  .notification-group--inline {
219
221
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20DistrictHomeTemplate/index.vue CHANGED
@@ -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;
package/src/components/templates/Asd20DistrictVideoTemplate/index.vue CHANGED
@@ -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;
package/src/components/templates/Asd20FileListPageTemplate/index.vue CHANGED
@@ -172,15 +172,18 @@ export default {
172
172
  margin-top: space(2.25);
173
173
  .asd20-notification-group--floating {
174
174
  position: absolute;
175
- top: space(4);
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
  }
@@ -194,14 +197,6 @@ export default {
194
197
  padding: space(0) space(0);
195
198
  }
196
199
  }
197
- @media (min-width: 470px) {
198
- .asd20-template-file-list {
199
- .asd20-notification-group--floating {
200
- position: absolute;
201
- top: space(2);
202
- }
203
- }
204
- }
205
200
 
206
201
  @media (min-width: 1024px) {
207
202
  .asd20-template-file-list {
@@ -210,6 +205,13 @@ export default {
210
205
  .asd20-notification-group--floating {
211
206
  position: absolute;
212
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
+ }
213
215
  }
214
216
  .asd20-page-content {
215
217
  margin-top: space(1);
package/src/components/templates/Asd20LoginsTemplate/index.vue CHANGED
@@ -292,27 +292,23 @@ export default {
292
292
  .asd20-page-header {
293
293
  margin-bottom: space(0) !important;
294
294
  .asd20-page-header__tools {
295
- flex-direction: row;
296
- .right {
297
- order: 2;
298
- }
299
- .asd20-breadcrumb {
300
- order: 1;
301
- }
302
295
  }
303
296
  }
304
297
  .notification-group--floating {
305
298
  position: absolute;
306
299
  right: space(0.85);
307
- top: space(4.25);
300
+ top: space(2);
308
301
  .bell {
309
- z-index: 1000;
310
302
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
311
303
  svg {
312
- fill: var(--color__accent) !important;
304
+ fill: var(--color__accent);
313
305
  }
314
306
  span {
315
- 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;
316
312
  }
317
313
  }
318
314
  }
@@ -339,11 +335,11 @@ export default {
339
335
  }
340
336
  @media (min-width: 450px) {
341
337
  .asd20-template-logins {
342
- .notification-group--floating {
343
- position: absolute;
344
- right: space(0.85);
345
- top: space(4.25);
346
- }
338
+ // .notification-group--floating {
339
+ // position: absolute;
340
+ // right: space(0.85);
341
+ // top: space(4.25);
342
+ // }
347
343
  .logins-list {
348
344
  display: flex;
349
345
  flex-direction: row;
@@ -362,6 +358,13 @@ export default {
362
358
  position: absolute;
363
359
  right: space(1.85);
364
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
+ }
365
368
  }
366
369
  .notification-group--inline {
367
370
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20ProfileTemplate/index.vue CHANGED
@@ -446,15 +446,18 @@ export default {
446
446
  margin-top: space(2.25);
447
447
  .asd20-notification-group--floating {
448
448
  position: absolute;
449
- top: space(4);
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
  }
@@ -526,14 +529,6 @@ export default {
526
529
  color: asd20-swatch('primary');
527
530
  }
528
531
  }
529
- @media (min-width: 470px) {
530
- .asd20-template-profile {
531
- .asd20-notification-group--floating {
532
- position: absolute;
533
- top: space(2);
534
- }
535
- }
536
- }
537
532
 
538
533
  @media (min-width: 1024px) {
539
534
  .asd20-template-profile {
@@ -543,6 +538,13 @@ export default {
543
538
  .asd20-notification-group--floating {
544
539
  position: absolute;
545
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
+ }
546
548
  }
547
549
  .notification-group--inline {
548
550
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20SalaryCalculatorTemplate/index.vue CHANGED
@@ -669,15 +669,18 @@ export default {
669
669
  margin-top: space(2.25);
670
670
  .asd20-notification-group--floating {
671
671
  position: absolute;
672
- top: space(4);
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
  }
@@ -695,15 +698,6 @@ export default {
695
698
  }
696
699
  }
697
700
 
698
- @media (min-width: 470px) {
699
- .asd20-salary-calculator-template {
700
- .asd20-notification-group--floating {
701
- position: absolute;
702
- top: space(2);
703
- }
704
- }
705
- }
706
-
707
701
  @media (min-width: 1024px) {
708
702
  .asd20-salary-calculator-template {
709
703
  @include template-desktop;
@@ -712,6 +706,13 @@ export default {
712
706
  .asd20-notification-group--floating {
713
707
  position: absolute;
714
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
+ }
715
716
  }
716
717
  .notification-group--inline {
717
718
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20SchoolHomeTemplate/index.vue CHANGED
@@ -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 {
package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue CHANGED
@@ -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>
package/src/components/templates/Asd20WayfindingTemplate/index.vue CHANGED
@@ -192,34 +192,35 @@ export default {
192
192
  margin-top: space(2.25);
193
193
  .asd20-notification-group--floating {
194
194
  position: absolute;
195
- top: space(4);
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
  }
207
210
  }
208
211
 
209
- @media (min-width: 470px) {
210
- .asd20-template-wayfinding {
211
- .asd20-notification-group--floating {
212
- position: absolute;
213
- top: space(2);
214
- }
215
- }
216
- }
217
-
218
212
  @media (min-width: 1024px) {
219
213
  .asd20-template-wayfinding {
220
214
  .asd20-notification-group--floating {
221
215
  position: absolute;
222
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
+ }
223
224
  }
224
225
  @include template-desktop;
225
226
  margin-left: space(3);