@asd20/ui 3.2.985 → 3.2.986

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/atoms/Asd20Checkbox/index.vue +5 -4
  3. package/src/components/organisms/Asd20ImageHeader/index.vue +15 -14
  4. package/src/components/organisms/Asd20PageHeader/index.vue +15 -14
  5. package/src/components/organisms/Asd20PrimaryHeader/index.vue +58 -11
  6. package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue +12 -12
  7. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +12 -17
  8. package/src/components/organisms/Asd20SecondaryHeader/index.vue +19 -16
  9. package/src/components/organisms/Asd20VideoHeaderContent/index.vue +22 -17
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.985",
8
+ "version": "3.2.986",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/atoms/Asd20Checkbox/index.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  :class="[
4
4
  'asd20-checkbox',
5
5
  { 'asd20-checkbox__no-icon': !icon && !checkbox },
6
- { 'asd20-checkbox__checkbox': !icon && checkbox }
6
+ { 'asd20-checkbox__checkbox': !icon && checkbox },
7
7
  ]"
8
8
  >
9
9
  <input
@@ -37,7 +37,7 @@ export default {
37
37
  description: { type: String, default: '' },
38
38
  count: { type: Number, default: 0 },
39
39
  icon: { type: String, default: '' },
40
- checkbox: { type: Boolean, default: false }
40
+ checkbox: { type: Boolean, default: false },
41
41
  },
42
42
  data() {
43
43
  return {
@@ -46,7 +46,9 @@ export default {
46
46
  },
47
47
  computed: {
48
48
  id() {
49
- const base = this.label?.replace(/ /gi, '-').toLowerCase()
49
+ const base = this.label
50
+ ? this.label.replace(/ /gi, '-').toLowerCase()
51
+ : null
50
52
  return base && base.length
51
53
  ? `asd20-checkbox-${base}`
52
54
  : `asd20-checkbox-${this._uid}`
@@ -158,7 +160,6 @@ export default {
158
160
  right: unset;
159
161
  opacity: 1;
160
162
  }
161
-
162
163
  }
163
164
 
164
165
  input:focus + label:after {
package/src/components/organisms/Asd20ImageHeader/index.vue CHANGED
@@ -460,10 +460,10 @@ export default {
460
460
  margin: space(-1) space(1) space(-1) space(1);
461
461
  z-index: 1;
462
462
  display: flex;
463
+
463
464
  .asd20-button {
464
465
  box-sizing: border-box;
465
466
  flex-shrink: 1;
466
- // max-width: 40vw;
467
467
  min-height: space(2);
468
468
  font-size: 0.875rem !important;
469
469
  background-color: var(
@@ -474,38 +474,39 @@ export default {
474
474
  --website-header__button-foreground-color,
475
475
  var(--color__accent-t100)
476
476
  );
477
- // box-shadow: 2px 2px 2px rgb(50, 50, 50);
478
477
  position: relative;
479
478
  padding: space(0.5) space(1.5);
480
479
  transition: background-color 0.3s ease;
481
480
  z-index: 2;
482
481
  overflow: hidden;
483
- ::before {
482
+
483
+ // Vertical accent bar (replaces chevron)
484
+ &::before {
484
485
  content: '';
485
486
  position: absolute;
486
487
  top: 0;
487
- left: 0; /* Align with the button's left edge */
488
- width: 20px; /* Default arrow width */
489
- height: 100%; /* Match the button's height */
490
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
491
- background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
492
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
488
+ left: 0;
489
+ width: 10px;
490
+ height: 100%;
491
+ background-color: var(--color__accent-t40);
492
+ transition: width 0.3s ease, background-color 0.3s ease;
493
493
  z-index: 0;
494
494
  }
495
+
495
496
  &:hover,
496
497
  &:focus {
497
498
  background-color: var(
498
499
  --website-header__button-hover-background-color,
499
- var(--color__accent-s10)
500
+ var(--color__accent-t60)
500
501
  );
501
502
  color: var(
502
503
  --website-header__button-hover-foreground-color,
503
504
  var(--color__accent-t100)
504
505
  );
505
- ::before {
506
- width: 25px; /* Arrow grows on hover */
507
- background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
508
- z-index: 0;
506
+
507
+ &::before {
508
+ width: 20px;
509
+ background-color: var(--color__accent-t60);
509
510
  }
510
511
  }
511
512
 
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -486,10 +486,10 @@ export default {
486
486
  margin: space(-1) space(1) space(-1) space(1);
487
487
  z-index: 1;
488
488
  display: flex;
489
+
489
490
  .asd20-button {
490
491
  box-sizing: border-box;
491
492
  flex-shrink: 1;
492
- // max-width: 40vw;
493
493
  min-height: space(2);
494
494
  font-size: 0.875rem !important;
495
495
  background-color: var(
@@ -500,38 +500,39 @@ export default {
500
500
  --website-header__button-foreground-color,
501
501
  var(--color__accent-t100)
502
502
  );
503
- // box-shadow: 2px 2px 2px rgb(50, 50, 50);
504
503
  position: relative;
505
504
  padding: space(0.5) space(1.5);
506
505
  transition: background-color 0.3s ease;
507
506
  z-index: 2;
508
507
  overflow: hidden;
509
- ::before {
508
+
509
+ // Vertical accent bar (replaces chevron)
510
+ &::before {
510
511
  content: '';
511
512
  position: absolute;
512
513
  top: 0;
513
- left: 0; /* Align with the button's left edge */
514
- width: 20px; /* Default arrow width */
515
- height: 100%; /* Match the button's height */
516
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
517
- background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
518
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
514
+ left: 0;
515
+ width: 10px;
516
+ height: 100%;
517
+ background-color: var(--color__accent-t40);
518
+ transition: width 0.3s ease, background-color 0.3s ease;
519
519
  z-index: 0;
520
520
  }
521
+
521
522
  &:hover,
522
523
  &:focus {
523
524
  background-color: var(
524
525
  --website-header__button-hover-background-color,
525
- var(--color__accent-s10)
526
+ var(--color__accent-t60)
526
527
  );
527
528
  color: var(
528
529
  --website-header__button-hover-foreground-color,
529
530
  var(--color__accent-t100)
530
531
  );
531
- ::before {
532
- width: 25px; /* Arrow grows on hover */
533
- background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
534
- z-index: 0;
532
+
533
+ &::before {
534
+ width: 20px;
535
+ background-color: var(--color__accent-t60);
535
536
  }
536
537
  }
537
538
 
package/src/components/organisms/Asd20PrimaryHeader/index.vue CHANGED
@@ -8,7 +8,11 @@
8
8
  >Hi, {{ userGivenName }}.</span
9
9
  >
10
10
  </client-only>
11
- <asd20-messaging id="main" v-bind="firstMessage" headingTagName="h1"></asd20-messaging>
11
+ <asd20-messaging
12
+ id="main"
13
+ v-bind="firstMessage"
14
+ headingTagName="h1"
15
+ ></asd20-messaging>
12
16
  <div class="image-container">
13
17
  <img
14
18
  class="background-image"
@@ -93,7 +97,6 @@ export default {
93
97
  animation: leftscroll 4000s infinite linear;
94
98
  border-top: 20px solid var(--color__primary);
95
99
  border-bottom: 20px solid var(--color__primary);
96
-
97
100
  }
98
101
  .asd20-primary-header {
99
102
  position: relative;
@@ -133,10 +136,10 @@ export default {
133
136
  animation: slide_left 1.25s ease-in-out 1s both;
134
137
  }
135
138
 
136
- // -webkit-background-clip: text;
137
- // -webkit-text-fill-color: transparent;
138
- // background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
139
- // background-size: 30% auto;
139
+ // -webkit-background-clip: text;
140
+ // -webkit-text-fill-color: transparent;
141
+ // background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
142
+ // background-size: 30% auto;
140
143
  &::v-deep .lead {
141
144
  @include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
142
145
  color: var(--website-homepage-header__foreground-color);
@@ -153,11 +156,45 @@ export default {
153
156
  700
154
157
  );
155
158
  flex-direction: column;
156
- width: 50vw;
157
- color: white;
158
- // background: white;
159
- &:hover {
160
- background: var(--color__on-primary-t20);
159
+ width: 70vw;
160
+ margin: space(0.5) auto !important;
161
+ color: var(--website-homepage-header__secondary-button-foreground-color);
162
+ background: var(
163
+ --website-homepage-header__secondary-button-background-color
164
+ );
165
+ border: none;
166
+ position: relative;
167
+ padding: space(0.5) space(1);
168
+ transition: background-color 0.3s ease;
169
+ z-index: 2;
170
+ overflow: hidden;
171
+ &::before {
172
+ content: '';
173
+ position: absolute;
174
+ top: 0;
175
+ left: 0;
176
+ width: 10px;
177
+ height: 100%;
178
+ background-color: var(--color__accent-t40);
179
+ transition: width 0.3s ease, background-color 0.3s ease;
180
+ z-index: 0;
181
+ }
182
+
183
+ &:hover,
184
+ &:focus {
185
+ background-color: var(
186
+ --website-header__button-hover-background-color,
187
+ var(--color__accent-t60)
188
+ );
189
+ color: var(
190
+ --website-header__button-hover-foreground-color,
191
+ var(--color__accent-t100)
192
+ );
193
+
194
+ &::before {
195
+ width: 20px;
196
+ background-color: var(--color__accent-t60);
197
+ }
161
198
  }
162
199
  }
163
200
 
@@ -219,6 +256,15 @@ export default {
219
256
  }
220
257
  }
221
258
 
259
+ @media (min-width: 667px) {
260
+ .asd20-primary-header {
261
+ &::v-deep .asd20-button {
262
+ width: 50vw;
263
+ margin: space(0.5) space(0.5) 0 0 !important;
264
+ }
265
+ }
266
+ }
267
+
222
268
  @media (min-width: 1024px) {
223
269
  .photostrip {
224
270
  height: 40vh;
@@ -240,6 +286,7 @@ export default {
240
286
  );
241
287
  flex-direction: row;
242
288
  width: inherit;
289
+ margin: space(0.5) space(0.5) 0 0 !important;
243
290
  }
244
291
  .image-container {
245
292
  width: auto;
package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue CHANGED
@@ -239,32 +239,32 @@ export default {
239
239
  transition: background-color 0.3s ease;
240
240
  z-index: 2;
241
241
  overflow: hidden;
242
- ::before {
242
+ &::before {
243
243
  content: '';
244
244
  position: absolute;
245
245
  top: 0;
246
- left: 0; /* Align with the button's left edge */
247
- width: 20px; /* Default arrow width */
248
- height: 100%; /* Match the button's height */
249
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
250
- background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
251
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
246
+ left: 0;
247
+ width: 10px;
248
+ height: 100%;
249
+ background-color: var(--color__accent-t40);
250
+ transition: width 0.3s ease, background-color 0.3s ease;
252
251
  z-index: 0;
253
252
  }
253
+
254
254
  &:hover,
255
255
  &:focus {
256
256
  background-color: var(
257
257
  --website-header__button-hover-background-color,
258
- var(--color__accent-s10)
258
+ var(--color__accent-t60)
259
259
  );
260
260
  color: var(
261
261
  --website-header__button-hover-foreground-color,
262
262
  var(--color__accent-t100)
263
263
  );
264
- ::before {
265
- width: 25px; /* Arrow grows on hover */
266
- background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
267
- z-index: 0;
264
+
265
+ &::before {
266
+ width: 20px;
267
+ background-color: var(--color__accent-t60);
268
268
  }
269
269
  }
270
270
 
package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue CHANGED
@@ -298,37 +298,32 @@ export default {
298
298
  transition: background-color 0.3s ease;
299
299
  z-index: 2;
300
300
  overflow: hidden;
301
- ::before {
301
+ &::before {
302
302
  content: '';
303
303
  position: absolute;
304
304
  top: 0;
305
- left: 0; /* Align with the button's left edge */
306
- width: 20px; /* Default arrow width */
307
- height: 100%; /* Match the button's height */
308
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
309
- background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
310
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
305
+ left: 0;
306
+ width: 10px;
307
+ height: 100%;
308
+ background-color: var(--color__accent-t40);
309
+ transition: width 0.3s ease, background-color 0.3s ease;
311
310
  z-index: 0;
312
311
  }
312
+
313
313
  &:hover,
314
314
  &:focus {
315
315
  background-color: var(
316
316
  --website-header__button-hover-background-color,
317
- var(--color__accent-s10)
317
+ var(--color__accent-t60)
318
318
  );
319
319
  color: var(
320
320
  --website-header__button-hover-foreground-color,
321
321
  var(--color__accent-t100)
322
322
  );
323
- ::before {
324
- width: 25px; /* Arrow grows on hover */
325
- background-color: rgba(
326
- 255,
327
- 255,
328
- 255,
329
- 0.3
330
- ); /* Darker arrow on hover */
331
- z-index: 0;
323
+
324
+ &::before {
325
+ width: 20px;
326
+ background-color: var(--color__accent-t60);
332
327
  }
333
328
  }
334
329
  }
package/src/components/organisms/Asd20SecondaryHeader/index.vue CHANGED
@@ -95,29 +95,32 @@ export default {
95
95
  transition: background-color 0.3s ease;
96
96
  z-index: 2;
97
97
  overflow: hidden;
98
- ::before {
98
+ &::before {
99
99
  content: '';
100
100
  position: absolute;
101
101
  top: 0;
102
- left: 0; /* Align with the button's left edge */
103
- width: 20px; /* Default arrow width */
104
- height: 100%; /* Match the button's height */
105
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
106
- background-color: var(--color__accent); /* Arrow color */
107
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
102
+ left: 0;
103
+ width: 10px;
104
+ height: 100%;
105
+ background-color: var(--color__accent-t40);
106
+ transition: width 0.3s ease, background-color 0.3s ease;
108
107
  z-index: 0;
109
108
  }
110
- &:hover {
111
- color: var(
112
- --website-homepage-header__secondary-button-hover-foreground-color
109
+
110
+ &:hover,
111
+ &:focus {
112
+ background-color: var(
113
+ --website-header__button-hover-background-color,
114
+ var(--color__accent-t60)
113
115
  );
114
- background: var(
115
- --website-homepage-header__secondary-button-hover-background-color
116
+ color: var(
117
+ --website-header__button-hover-foreground-color,
118
+ var(--color__accent-t100)
116
119
  );
117
- ::before {
118
- width: 25px; /* Arrow grows on hover */
119
- background-color: rgba(0, 0, 0, 0.3); /* Darker arrow on hover */
120
- z-index: 0;
120
+
121
+ &::before {
122
+ width: 20px;
123
+ background-color: var(--color__accent-t60);
121
124
  }
122
125
  }
123
126
  }
package/src/components/organisms/Asd20VideoHeaderContent/index.vue CHANGED
@@ -134,28 +134,33 @@ export default {
134
134
  // height: 50px;
135
135
  // line-height: 50px;
136
136
  transition: background-color 0.3s ease;
137
- ::before {
137
+ &::before {
138
138
  content: '';
139
139
  position: absolute;
140
140
  top: 0;
141
- left: 0; /* Align with the button's left edge */
142
- width: 20px; /* Default arrow width */
143
- height: 100%; /* Match the button's height */
144
- clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
145
- background-color: var(--color__accent); /* Arrow color */
146
- transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
147
- }
148
- &:hover {
149
- color: var(--website-homepage-header__button-hover-foreground-color);
150
- background: var(--website-homepage-header__button-hover-background-color);
151
- ::before {
152
- width: 25px; /* Arrow grows on hover */
153
- background-color: rgba(0, 0, 0, 0.3); /* Darker arrow on hover */
154
- }
141
+ left: 0;
142
+ width: 10px;
143
+ height: 100%;
144
+ background-color: var(--color__accent-t40);
145
+ transition: width 0.3s ease, background-color 0.3s ease;
146
+ z-index: 0;
155
147
  }
148
+
149
+ &:hover,
156
150
  &:focus {
157
- color: var(--website-homepage-header__button-hover-foreground-color);
158
- background: var(--website-homepage-header__button-hover-background-color);
151
+ background-color: var(
152
+ --website-header__button-hover-background-color,
153
+ var(--color__accent-t60)
154
+ );
155
+ color: var(
156
+ --website-header__button-hover-foreground-color,
157
+ var(--color__accent-t100)
158
+ );
159
+
160
+ &::before {
161
+ width: 20px;
162
+ background-color: var(--color__accent-t60);
163
+ }
159
164
  }
160
165
  }
161
166
  .header-messaging-section {