@asd20/ui 3.2.402 → 3.2.405

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.402",
8
+ "version": "3.2.405",
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,13 @@ 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
+ color: inherit;
221
+ }
211
222
 
212
223
  &__title {
213
224
  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,15 +378,16 @@ export default {
378
378
  position: absolute;
379
379
  top: space(2);
380
380
  .bell {
381
- z-index: 1000;
382
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
381
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
383
382
  svg {
384
383
  fill: var(--color__accent);
385
384
  }
386
385
  span {
387
386
  background: var(--color__accent);
388
- top: inherit;
389
- right: inherit;
387
+ top: inherit !important;
388
+ right: inherit !important;
389
+ width: 1.2rem !important;
390
+ height: 1.2rem !important;
390
391
  }
391
392
  }
392
393
  }
@@ -451,8 +452,8 @@ export default {
451
452
  .bell {
452
453
  span {
453
454
  background: var(--color__accent);
454
- top: -0.5em;
455
- right: -0.5em;
455
+ top: -0.6em !important;
456
+ right: -0.6em !important;
456
457
  }
457
458
  }
458
459
  }
@@ -379,15 +379,16 @@ export default {
379
379
  position: absolute;
380
380
  top: space(2);
381
381
  .bell {
382
- z-index: 1000;
383
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
382
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
384
383
  svg {
385
384
  fill: var(--color__accent);
386
385
  }
387
386
  span {
388
387
  background: var(--color__accent);
389
- top: inherit;
390
- right: inherit;
388
+ top: inherit !important;
389
+ right: inherit !important;
390
+ width: 1.2rem !important;
391
+ height: 1.2rem !important;
391
392
  }
392
393
  }
393
394
  }
@@ -468,8 +469,8 @@ export default {
468
469
  .bell {
469
470
  span {
470
471
  background: var(--color__accent);
471
- top: -0.5em;
472
- right: -0.5em;
472
+ top: -0.6em !important;
473
+ right: -0.6em !important;
473
474
  }
474
475
  }
475
476
  }
@@ -186,15 +186,16 @@ export default {
186
186
  position: absolute;
187
187
  top: space(2);
188
188
  .bell {
189
- z-index: 1000;
190
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
189
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
191
190
  svg {
192
191
  fill: var(--color__accent);
193
192
  }
194
193
  span {
195
194
  background: var(--color__accent);
196
- top: inherit;
197
- right: inherit;
195
+ top: inherit !important;
196
+ right: inherit !important;
197
+ width: 1.2rem !important;
198
+ height: 1.2rem !important;
198
199
  }
199
200
  }
200
201
  }
@@ -219,8 +220,8 @@ export default {
219
220
  .bell {
220
221
  span {
221
222
  background: var(--color__accent);
222
- top: -0.5em;
223
- right: -0.5em;
223
+ top: -0.6em !important;
224
+ right: -0.6em !important;
224
225
  }
225
226
  }
226
227
  }
@@ -201,15 +201,16 @@ export default {
201
201
  position: absolute;
202
202
  top: space(2);
203
203
  .bell {
204
- z-index: 1000;
205
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
204
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
206
205
  svg {
207
206
  fill: var(--color__accent);
208
207
  }
209
208
  span {
210
209
  background: var(--color__accent);
211
- top: inherit;
212
- right: inherit;
210
+ top: inherit !important;
211
+ right: inherit !important;
212
+ width: 1.2rem !important;
213
+ height: 1.2rem !important;
213
214
  }
214
215
  }
215
216
  }
@@ -247,8 +248,8 @@ export default {
247
248
  .bell {
248
249
  span {
249
250
  background: var(--color__accent);
250
- top: -0.5em;
251
- right: -0.5em;
251
+ top: -0.6em !important;
252
+ right: -0.6em !important;
252
253
  }
253
254
  }
254
255
  }
@@ -186,15 +186,16 @@ export default {
186
186
  position: absolute;
187
187
  top: space(2);
188
188
  .bell {
189
- z-index: 1000;
190
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
189
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
191
190
  svg {
192
191
  fill: var(--color__accent);
193
192
  }
194
193
  span {
195
194
  background: var(--color__accent);
196
- top: inherit;
197
- right: inherit;
195
+ top: inherit !important;
196
+ right: inherit !important;
197
+ width: 1.2rem !important;
198
+ height: 1.2rem !important;
198
199
  }
199
200
  }
200
201
  }
@@ -211,8 +212,8 @@ export default {
211
212
  .bell {
212
213
  span {
213
214
  background: var(--color__accent);
214
- top: -0.5em;
215
- right: -0.5em;
215
+ top: -0.6em !important;
216
+ right: -0.6em !important;
216
217
  }
217
218
  }
218
219
  }
@@ -299,15 +299,16 @@ export default {
299
299
  .notification-group--floating {
300
300
  margin-right: 0;
301
301
  .bell {
302
- z-index: 1000;
303
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
302
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
304
303
  svg {
305
304
  fill: var(--color__accent);
306
305
  }
307
306
  span {
308
307
  background: var(--color__accent);
309
- top: inherit;
310
- right: inherit;
308
+ top: inherit !important;
309
+ right: inherit !important;
310
+ width: 1.2rem !important;
311
+ height: 1.2rem !important;
311
312
  }
312
313
  }
313
314
  }
@@ -362,8 +363,8 @@ export default {
362
363
  .bell {
363
364
  span {
364
365
  background: var(--color__accent);
365
- top: -0.5em;
366
- right: -0.5em;
366
+ top: -0.6em !important;
367
+ right: -0.6em !important;
367
368
  }
368
369
  }
369
370
  }
@@ -168,15 +168,16 @@ export default {
168
168
  }
169
169
  .asd20-notification-group--floating {
170
170
  .bell {
171
- z-index: 1000;
172
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
171
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
173
172
  svg {
174
173
  fill: var(--color__accent);
175
174
  }
176
175
  span {
177
176
  background: var(--color__accent);
178
- top: inherit;
179
- right: inherit;
177
+ top: inherit !important;
178
+ right: inherit !important;
179
+ width: 1.2rem !important;
180
+ height: 1.2rem !important;
180
181
  }
181
182
  }
182
183
  }
@@ -199,8 +200,8 @@ export default {
199
200
  .bell {
200
201
  span {
201
202
  background: var(--color__accent);
202
- top: -0.5em;
203
- right: -0.5em;
203
+ top: -0.6em !important;
204
+ right: -0.6em !important;
204
205
  }
205
206
  }
206
207
  }
@@ -174,15 +174,16 @@ export default {
174
174
  position: absolute;
175
175
  top: space(2);
176
176
  .bell {
177
- z-index: 1000;
178
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
177
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
179
178
  svg {
180
179
  fill: var(--color__accent);
181
180
  }
182
181
  span {
183
182
  background: var(--color__accent);
184
- top: inherit;
185
- right: inherit;
183
+ top: inherit !important;
184
+ right: inherit !important;
185
+ width: 1.2rem !important;
186
+ height: 1.2rem !important;
186
187
  }
187
188
  }
188
189
  }
@@ -207,8 +208,8 @@ export default {
207
208
  .bell {
208
209
  span {
209
210
  background: var(--color__accent);
210
- top: -0.5em;
211
- right: -0.5em;
211
+ top: -0.6em !important;
212
+ right: -0.6em !important;
212
213
  }
213
214
  }
214
215
  }
@@ -299,15 +299,16 @@ export default {
299
299
  right: space(0.85);
300
300
  top: space(2);
301
301
  .bell {
302
- z-index: 1000;
303
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
302
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
304
303
  svg {
305
304
  fill: var(--color__accent);
306
305
  }
307
306
  span {
308
307
  background: var(--color__accent);
309
- top: inherit;
310
- right: inherit;
308
+ top: inherit !important;
309
+ right: inherit !important;
310
+ width: 1.2rem !important;
311
+ height: 1.2rem !important;
311
312
  }
312
313
  }
313
314
  }
@@ -360,8 +361,8 @@ export default {
360
361
  .bell {
361
362
  span {
362
363
  background: var(--color__accent);
363
- top: -0.5em;
364
- right: -0.5em;
364
+ top: -0.6em !important;
365
+ right: -0.6em !important;
365
366
  }
366
367
  }
367
368
  }
@@ -448,15 +448,16 @@ export default {
448
448
  position: absolute;
449
449
  top: space(2);
450
450
  .bell {
451
- z-index: 1000;
452
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
451
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
453
452
  svg {
454
453
  fill: var(--color__accent);
455
454
  }
456
455
  span {
457
456
  background: var(--color__accent);
458
- top: inherit;
459
- right: inherit;
457
+ top: inherit !important;
458
+ right: inherit !important;
459
+ width: 1.2rem !important;
460
+ height: 1.2rem !important;
460
461
  }
461
462
  }
462
463
  }
@@ -540,8 +541,8 @@ export default {
540
541
  .bell {
541
542
  span {
542
543
  background: var(--color__accent);
543
- top: -0.5em;
544
- right: -0.5em;
544
+ top: -0.6em !important;
545
+ right: -0.6em !important;
545
546
  }
546
547
  }
547
548
  }
@@ -671,15 +671,16 @@ export default {
671
671
  position: absolute;
672
672
  top: space(2);
673
673
  .bell {
674
- z-index: 1000;
675
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
674
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
676
675
  svg {
677
676
  fill: var(--color__accent);
678
677
  }
679
678
  span {
680
679
  background: var(--color__accent);
681
- top: inherit;
682
- right: inherit;
680
+ top: inherit !important;
681
+ right: inherit !important;
682
+ width: 1.2rem !important;
683
+ height: 1.2rem !important;
683
684
  }
684
685
  }
685
686
  }
@@ -708,8 +709,8 @@ export default {
708
709
  .bell {
709
710
  span {
710
711
  background: var(--color__accent);
711
- top: -0.5em;
712
- right: -0.5em;
712
+ top: -0.6em !important;
713
+ right: -0.6em !important;
713
714
  }
714
715
  }
715
716
  }
@@ -209,15 +209,16 @@ export default {
209
209
  }
210
210
  .asd20-notification-group--floating {
211
211
  .bell {
212
- z-index: 1000;
213
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
212
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
214
213
  svg {
215
214
  fill: var(--color__accent);
216
215
  }
217
216
  span {
218
217
  background: var(--color__accent);
219
- top: inherit;
220
- right: inherit;
218
+ top: inherit !important;
219
+ right: inherit !important;
220
+ width: 1.2rem !important;
221
+ height: 1.2rem !important;
221
222
  }
222
223
  }
223
224
  }
@@ -249,16 +250,17 @@ export default {
249
250
  display: block;
250
251
  margin-left: space(3);
251
252
  margin-top: 0;
252
- // &::v-deep .asd20-notification-group--status {
253
- // background: white;
254
- // top: space(2);
255
- // }
253
+ .asd20-notification--status {
254
+ .asd20-notification__content {
255
+ padding-right: 0;
256
+ }
257
+ }
256
258
  .notification-group--floating {
257
259
  .bell {
258
260
  span {
259
261
  background: var(--color__accent);
260
- top: -0.5em;
261
- right: -0.5em;
262
+ top: -0.6em !important;
263
+ right: -0.6em !important;
262
264
  }
263
265
  }
264
266
  }
@@ -208,15 +208,16 @@ export default {
208
208
  right: space(0.5);
209
209
  top: space(2) !important;
210
210
  .bell {
211
- z-index: 1000;
212
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
211
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
213
212
  svg {
214
213
  fill: var(--color__accent);
215
214
  }
216
215
  span {
217
216
  background: var(--color__accent);
218
- top: inherit;
219
- right: inherit;
217
+ top: inherit !important;
218
+ right: inherit !important;
219
+ width: 1.2rem !important;
220
+ height: 1.2rem !important;
220
221
  }
221
222
  }
222
223
  }
@@ -268,12 +269,12 @@ export default {
268
269
  }
269
270
  .asd20-notification-group--floating {
270
271
  right: space(4);
271
- top: space(7.5);
272
+ top: space(7.5) !important;
272
273
  .bell {
273
274
  span {
274
275
  background: var(--color__accent);
275
- top: -0.5em;
276
- right: -0.5em;
276
+ top: -0.6em !important;
277
+ right: -0.6em !important;
277
278
  }
278
279
  }
279
280
  }
@@ -285,17 +286,17 @@ export default {
285
286
  }
286
287
  }
287
288
 
288
- @media (min-width: 1350px) {
289
- .asd20-school-home-video-template {
290
- .asd20-notification-group--status {
291
- order: 0;
292
- right: space(3) !important;
293
- top: space(2.5) !important;
294
- }
295
- .asd20-notification-group--floating {
296
- right: space(3.5);
297
- top: space(3.5) !important;
298
- }
299
- }
300
- }
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
+ // }
301
302
  </style>
@@ -194,15 +194,16 @@ export default {
194
194
  position: absolute;
195
195
  top: space(2);
196
196
  .bell {
197
- z-index: 1000;
198
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
197
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
199
198
  svg {
200
199
  fill: var(--color__accent);
201
200
  }
202
201
  span {
203
202
  background: var(--color__accent);
204
- top: inherit;
205
- right: inherit;
203
+ top: inherit !important;
204
+ right: inherit !important;
205
+ width: 1.2rem !important;
206
+ height: 1.2rem !important;
206
207
  }
207
208
  }
208
209
  }
@@ -213,11 +214,11 @@ export default {
213
214
  .asd20-notification-group--floating {
214
215
  position: absolute;
215
216
  top: space(1);
216
- .bell {
217
+ .bell {
217
218
  span {
218
219
  background: var(--color__accent);
219
- top: -0.5em;
220
- right: -0.5em;
220
+ top: -0.6em !important;
221
+ right: -0.6em !important;
221
222
  }
222
223
  }
223
224
  }