@asd20/ui 3.2.983 → 3.2.985

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/atoms/Asd20Messaging/index.vue +12 -21
  3. package/src/components/organisms/Asd20AccessibilityIssueModal/index.vue +0 -1
  4. package/src/components/organisms/Asd20PageContent/index.vue +20 -50
  5. package/src/components/organisms/Asd20PageHeader/index.vue +0 -8
  6. package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue +0 -30
  7. package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +0 -32
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.983",
8
+ "version": "3.2.985",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/atoms/Asd20Messaging/index.vue CHANGED
@@ -121,10 +121,6 @@ export default {
121
121
 
122
122
  .asd20-messaging {
123
123
  box-sizing: border-box;
124
- // &:first-child:last-child p:not(.lead) {
125
- // columns: 2;
126
- // column-gap: space(1);
127
- // }
128
124
 
129
125
  &__heading {
130
126
  @include asd20-font(
@@ -154,10 +150,6 @@ export default {
154
150
  );
155
151
  }
156
152
 
157
- // &::v-deep p {
158
- // @include asd20-font(0.75, var(--website-typography__font-family-headlines));
159
- // }
160
-
161
153
  &__button-group {
162
154
  display: flex;
163
155
  flex-wrap: wrap;
@@ -189,24 +181,23 @@ export default {
189
181
  & > img {
190
182
  display: block;
191
183
  width: 100%;
192
- // max-height: 350px;
184
+ height: 300px;
193
185
  object-fit: cover;
194
186
  }
195
187
  }
196
188
  }
197
189
  }
198
-
199
- // @media (min-width: 768px) {
200
- // .asd20-messaging {
201
- // &--fullscreen {
202
- // .message-image {
203
- // img {
204
- // max-height: 450px;
205
- // }
206
- // }
207
- // }
208
- // }
209
- // }
190
+ @media (min-width: 768px) {
191
+ .asd20-messaging {
192
+ &--fullscreen {
193
+ .message-image {
194
+ img {
195
+ height: 500px;
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
210
201
 
211
202
  @media (min-width: 1024px) {
212
203
  .asd20-messaging {
package/src/components/organisms/Asd20AccessibilityIssueModal/index.vue CHANGED
@@ -4,7 +4,6 @@
4
4
  title="Report an Accessibility Issue"
5
5
  icon="accessibility"
6
6
  dismissable
7
- windowed
8
7
  class="asd20-accessibility-issue-modal"
9
8
  @dismiss="$emit('dismiss')"
10
9
  >
package/src/components/organisms/Asd20PageContent/index.vue CHANGED
@@ -12,14 +12,13 @@
12
12
  >
13
13
  <slot name="before"></slot>
14
14
 
15
- <section class="primary-messaging-section">
16
- <!-- omit messagetitle is polluting other templates (groupTemplate), making primary messages invisible. -->
17
- <!-- <asd20-messaging
18
- :class="primaryMessages.length < 2 ? 'omitMessageTitle' : ''"
19
- v-for="(messaging, index) in formattedPrimaryMessages"
20
- :key="index"
21
- v-bind="messaging"
22
- ></asd20-messaging> -->
15
+ <section
16
+ :class="
17
+ formattedPrimaryMessages.length < 3
18
+ ? 'primary-messaging-section wide-message'
19
+ : 'primary-messaging-section'
20
+ "
21
+ >
23
22
  <asd20-messaging
24
23
  v-for="(messaging, index) in formattedPrimaryMessages"
25
24
  :key="index"
@@ -127,35 +126,10 @@ export default {
127
126
  background: var(--color__tertiary);
128
127
  }
129
128
 
130
- // .asd20-messaging {
131
- // padding-bottom: space(1);
132
- // border-bottom: 10px solid var(--color__tertiary);
133
- // }
134
-
135
129
  .asd20-messaging:not(:last-child) {
136
- margin-bottom: space(2);
130
+ margin-bottom: space(1);
137
131
  }
138
132
 
139
- // &--grid {
140
- // .primary-messaging-section,
141
- // .secondary-messaging-section {
142
- // --minimum-column-width: 480px;
143
- // --gutter: #{space(1)};
144
- // display: flex;
145
- // flex-wrap: wrap;
146
- // margin: calc(var(--gutter) * -1);
147
-
148
- // &::v-deep > * {
149
- // flex: 0 1 var(--minimum-column-width);
150
- // margin: var(--gutter) !important;
151
- // // max-width: 60%;
152
- // }
153
- // }
154
- // }
155
- // &::v-deep .omitMessageTitle .asd20-messaging__heading,
156
- // &::v-deep .omitMessageTitle .lead {
157
- // display: none;
158
- // }
159
133
  &--fullscreen {
160
134
  .primary-messaging-section,
161
135
  .secondary-messaging-section {
@@ -208,10 +182,6 @@ export default {
208
182
  .primary-messaging-section,
209
183
  .secondary-messaging-section {
210
184
  padding: space(2) space(1) space(2) space(2);
211
- // &::v-deep > * {
212
- // flex: 1 1 var(--minimum-column-width);
213
- // margin: var(--gutter) !important;
214
- // }
215
185
  }
216
186
  }
217
187
  }
@@ -223,7 +193,6 @@ export default {
223
193
  .secondary-messaging-section {
224
194
  padding: space(2) space(1) space(2) space(2);
225
195
  &::v-deep > * {
226
- // flex: 1 1 var(--minimum-column-width);
227
196
  margin: space(1) !important;
228
197
  }
229
198
  }
@@ -234,29 +203,24 @@ export default {
234
203
  --gutter: #{space(1)};
235
204
  display: flex;
236
205
  flex-wrap: wrap;
237
- // margin: calc(var(--gutter) * -1);
238
- // padding: space(2) space(3);
239
-
240
206
  &::v-deep > * {
241
207
  // flex: 1 1 var(--minimum-column-width);
242
208
  // margin: var(--gutter) !important;
243
209
  max-width: 28%;
244
210
  }
245
211
  }
212
+ .wide-message {
213
+ &::v-deep > * {
214
+ flex: 1 1 var(--minimum-column-width);
215
+ max-width: 44%;
216
+ }
217
+ }
246
218
  }
247
- // &::v-deep .omitMessageTitle .asd20-messaging__heading,
248
- // &::v-deep .omitMessageTitle .lead {
249
- // display: none;
250
- // }
251
219
  &--fullscreen {
252
220
  .primary-messaging-section,
253
221
  .secondary-messaging-section {
254
- // --minimum-column-width: 320px;
255
222
  --gutter: #{space(1)};
256
223
  display: flex;
257
- // margin: calc(var(--gutter) * -1);
258
- // padding: space(2) space(3);
259
-
260
224
  &::v-deep > * {
261
225
  // flex: 1 1 var(--minimum-column-width);
262
226
  // margin: var(--gutter) !important;
@@ -274,6 +238,12 @@ export default {
274
238
  max-width: 29%;
275
239
  }
276
240
  }
241
+ .wide-message {
242
+ &::v-deep > * {
243
+ flex: 1 1 var(--minimum-column-width);
244
+ max-width: 45%;
245
+ }
246
+ }
277
247
  }
278
248
  }
279
249
  }
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -291,10 +291,7 @@ export default {
291
291
  .back {
292
292
  padding: 0;
293
293
  margin-top: space(1);
294
- // font-family: var(--website-typography__font-family-body);
295
- // line-height: 1.2;
296
294
  font-size: 0.85rem;
297
- // font-weight: normal;
298
295
  min-height: 45px;
299
296
  &::v-deep span {
300
297
  padding-right: space(0.5);
@@ -320,7 +317,6 @@ export default {
320
317
  display: flex;
321
318
  justify-content: space-between;
322
319
  align-self: center;
323
- // margin-top: space(2);
324
320
  flex-direction: column;
325
321
  .asd20-breadcrumb,
326
322
  .back {
@@ -393,10 +389,6 @@ export default {
393
389
  display: none;
394
390
  }
395
391
 
396
- // &::v-deep .asd20-district-logo {
397
- // display: none;
398
- // }
399
-
400
392
  &::v-deep .notification-group--status {
401
393
  margin-top: space(0.5);
402
394
  margin-bottom: space(0.5);
package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue CHANGED
@@ -244,20 +244,6 @@ export default {
244
244
  .asd20-notification-group--floating {
245
245
  position: absolute;
246
246
  top: space(2.0375);
247
- // .bell {
248
- // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
249
- // svg {
250
- // fill: var(--color__accent) !important;
251
- // }
252
- // span {
253
- // background: var(--color__accent) !important;
254
- // top: inherit !important;
255
- // right: inherit !important;
256
- // width: 1.2rem !important;
257
- // height: 1.2rem !important;
258
- // font-size: 0.75rem !important;
259
- // }
260
- // }
261
247
  }
262
248
  .asd20-notification-group--inline {
263
249
  margin-top: space(2) !important;
@@ -276,7 +262,6 @@ export default {
276
262
  }
277
263
 
278
264
  p {
279
- // font-family: var(--website-typography__font-family-headlines);
280
265
  font-size: 1rem !important;
281
266
  line-height: 1.5;
282
267
  font-family: var(--website-typography__font-family-headlines);
@@ -289,13 +274,8 @@ export default {
289
274
  700
290
275
  );
291
276
  font-family: var(--website-typography__font-family-headlines);
292
- // font-size: 36px !important;
293
277
  }
294
278
  }
295
- // .asd20-messaging {
296
- // padding-bottom: space(2);
297
- // border-bottom: 10px solid var(--color__tertiary);
298
- // }
299
279
  }
300
280
 
301
281
  @media (min-width: 1024px) {
@@ -303,13 +283,6 @@ export default {
303
283
  .asd20-notification-group--floating {
304
284
  position: absolute;
305
285
  top: space(1);
306
- // .bell {
307
- // span {
308
- // background: var(--color__accent);
309
- // top: -0.6em !important;
310
- // right: -0.6em !important;
311
- // }
312
- // }
313
286
  }
314
287
  @include template-desktop;
315
288
  margin-left: space(3);
@@ -317,9 +290,6 @@ export default {
317
290
  .asd20-page-content {
318
291
  margin-top: space(0);
319
292
  }
320
- // .intro-message {
321
- // width: 90%;
322
- // }
323
293
  }
324
294
  }
325
295
 
package/src/components/templates/Asd20WayfindingImageTemplate/index.vue CHANGED
@@ -223,20 +223,6 @@ export default {
223
223
  .asd20-notification-group--floating {
224
224
  position: absolute;
225
225
  top: space(2.06);
226
- // .bell {
227
- // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
228
- // svg {
229
- // fill: var(--color__accent) !important;
230
- // }
231
- // span {
232
- // background: var(--color__accent) !important;
233
- // top: inherit !important;
234
- // right: inherit !important;
235
- // width: 1.2rem !important;
236
- // height: 1.2rem !important;
237
- // font-size: 0.75rem !important;
238
- // }
239
- // }
240
226
  }
241
227
  .asd20-notification-group--inline {
242
228
  margin-top: space(2) !important;
@@ -254,7 +240,6 @@ export default {
254
240
  }
255
241
  }
256
242
  .asd20-swiper-feed:last-child {
257
- // margin-top: space(-1);
258
243
  padding-bottom: space(2);
259
244
  &::after {
260
245
  bottom: space(1);
@@ -263,9 +248,6 @@ export default {
263
248
  }
264
249
  .asd20-page-content:not(.intro-message) .primary-messaging-section {
265
250
  padding: space(1) space(0);
266
- .asd20-messaging {
267
- // margin-bottom: space(1) !important;
268
- }
269
251
  }
270
252
 
271
253
  .intro-message {
@@ -321,13 +303,6 @@ export default {
321
303
  .asd20-notification-group--floating {
322
304
  position: absolute;
323
305
  top: space(1);
324
- // .bell {
325
- // span {
326
- // background: var(--color__accent);
327
- // top: -0.6em !important;
328
- // right: -0.6em !important;
329
- // }
330
- // }
331
306
  }
332
307
  .asd20-page-content {
333
308
  padding: space(1);
@@ -348,25 +323,18 @@ export default {
348
323
  width: 100%;
349
324
  .asd20-messaging {
350
325
  margin-bottom: space(2) !important;
351
- // flex-grow: 1;
352
326
  }
353
327
  }
354
328
  .asd20-page-content {
355
329
  &--grid {
356
330
  .primary-messaging-section,
357
331
  .secondary-messaging-section {
358
- // --minimum-column-width: 1000px;
359
332
  --gutter: #{space(1)};
360
333
  display: flex;
361
334
  flex-wrap: wrap;
362
- // margin: calc(var(--gutter) * -1);
363
- // padding: space(2) space(2) space(2) space(3);
364
335
  }
365
336
  }
366
337
  }
367
- // .intro-message {
368
- // width: 90%;
369
- // }
370
338
  }
371
339
  }
372
340
  </style>