@asd20/ui 3.2.369 → 3.2.372

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/Asd20Swiper/index.vue +4 -4
  3. package/src/components/organisms/Asd20PageHeader/index.vue +6 -4
  4. package/src/components/organisms/Asd20SecondaryHeader/index.vue +31 -9
  5. package/src/components/organisms/Asd20VideoHeaderContent/index.vue +35 -29
  6. package/src/config/configurations.json +19 -0
  7. package/src/design/tokens.css +17 -0
  8. package/src/design/tokens.json +19 -0
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.369",
8
+ "version": "3.2.372",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/molecules/Asd20Swiper/index.vue CHANGED
@@ -150,7 +150,7 @@ export default {
150
150
  margin: 0;
151
151
  background-image: linear-gradient(
152
152
  90deg,
153
- var(--color__fade-overlay-left, var(--website-page__background-color)) 0%,
153
+ var(--color__fade-overlay-left, var(--website-page__background-color)) 25%,
154
154
  transparent var(--fade-stop)
155
155
  );
156
156
  background-color: transparent;
@@ -158,7 +158,7 @@ export default {
158
158
  top: space(1);
159
159
  left: 0;
160
160
  bottom: space(1);
161
- width: space(1);
161
+ width: space(2);
162
162
  z-index: 2;
163
163
  border-radius: var(--website-shape__radius);
164
164
 
@@ -173,7 +173,7 @@ export default {
173
173
  &::after {
174
174
  content: '';
175
175
  display: block;
176
- border: 2px solid transparent;
176
+ border: 5px solid transparent;
177
177
  width: 0.5rem;
178
178
  height: 0.5rem;
179
179
  border-top-color: var(--color__on-bg-default);
@@ -243,7 +243,7 @@ export default {
243
243
  width: calc(100% - #{space(4)});
244
244
  &__prev,
245
245
  &__next {
246
- width: space(2);
246
+ width: space(3);
247
247
  &::after {
248
248
  width: 1rem;
249
249
  height: 1rem;
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -397,7 +397,7 @@ export default {
397
397
  .asd20-button {
398
398
  box-sizing: border-box;
399
399
  flex-grow: 1;
400
- max-width: 35vw;
400
+ max-width: 40vw;
401
401
  min-height: space(2);
402
402
  font-size: 0.875rem !important;
403
403
  background-color: var(
@@ -432,11 +432,10 @@ export default {
432
432
  }
433
433
  }
434
434
 
435
- // Hide images on mobile
436
435
  &__image {
437
- // display: none;
438
436
  img {
439
- max-width: 100%;
437
+ width: 100%;
438
+ // max-width: 100%;
440
439
  max-height: 600px;
441
440
  border-top: 10px solid var(--color__accent);
442
441
  }
@@ -542,6 +541,9 @@ export default {
542
541
 
543
542
  &__call-to-action {
544
543
  margin: space(-1) 60vw space(-1) space(3);
544
+ .asd20-button {
545
+ font-size: 1rem !important;
546
+ }
545
547
  }
546
548
  }
547
549
  }
package/src/components/organisms/Asd20SecondaryHeader/index.vue CHANGED
@@ -33,19 +33,26 @@ export default {
33
33
  display: flex;
34
34
  flex-shrink: 0;
35
35
  flex-direction: column;
36
- background: var(--color__primary-s10);
37
- color: asd20-swatch('background-alt');
36
+ color: var(--website-homepage-header__secondary-foreground-color);
37
+ background: var(--website-homepage-header__secondary-background-color);
38
+ // background-image: var(--website-homepage-header__secondary-background-style);
39
+ // background-position: bottom right !important;
40
+ // background-size: cover !important;
38
41
  padding: space(3) space(1) space(3) space(1);
39
42
 
40
43
  &::v-deep .asd20-messaging__heading {
41
44
  @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
42
45
  font-weight: 900;
43
46
  line-height: 1.5;
44
- color: #fff !important;
47
+ color: var(--website-homepage-header__secondary-title-color);
45
48
  -webkit-background-clip: text;
46
49
  -webkit-text-fill-color: transparent;
47
50
  background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
48
- background-size: 50% auto;
51
+ background-size: 30% auto;
52
+ }
53
+ &::v-deep .lead {
54
+ color: var(--website-homepage-header__secondary-foreground-color);
55
+ width: 100%;
49
56
  }
50
57
  &::v-deep .asd20-messaging__body-content {
51
58
  display: none;
@@ -59,10 +66,15 @@ export default {
59
66
  );
60
67
  flex-direction: column;
61
68
  width: 50vw;
62
- color: var(--color_on-primary);
63
- // background: white;
69
+ color: var(--website-homepage-header__secondary-button-foreground-color);
70
+ // background: var(--website-homepage-header__secondary-button-background-color);
64
71
  &:hover {
65
- background: var(--color__primary-t20);
72
+ color: var(
73
+ --website-homepage-header__secondary-button-hover-foreground-color
74
+ );
75
+ background: var(
76
+ --website-homepage-header__secondary-button-hover-background-color
77
+ );
66
78
  }
67
79
  }
68
80
 
@@ -93,10 +105,21 @@ export default {
93
105
  // // opacity: 0.5;
94
106
  // }
95
107
  }
108
+ @media (min-width: 667px) {
109
+ .asd20-secondary-header {
110
+ background: var(--website-homepage-header__secondary-background-color)
111
+ var(--website-homepage-header__secondary-background-style);
112
+ &::v-deep .lead {
113
+ width: 55vw;
114
+ }
115
+ }
116
+ }
96
117
  @media (min-width: 1024px) {
97
118
  .asd20-secondary-header {
98
- background-size: auto 50%;
99
119
  padding: space(3) space(2) space(3) space(2);
120
+ &::v-deep .lead {
121
+ width: 80%;
122
+ }
100
123
  &::v-deep .asd20-button {
101
124
  @include asd20-font(
102
125
  0.75,
@@ -104,7 +127,6 @@ export default {
104
127
  1.5,
105
128
  700
106
129
  );
107
- color: #fff;
108
130
  flex-direction: row;
109
131
  width: inherit;
110
132
  }
package/src/components/organisms/Asd20VideoHeaderContent/index.vue CHANGED
@@ -54,18 +54,14 @@ export default {
54
54
  // rgba(8, 24, 43, 0.5) 80%,
55
55
  // rgba(8, 24, 43, 0) 100%
56
56
  // );
57
- background: rgba(51, 92, 155, 0.7);
57
+ // background: rgba(51, 92, 155, 0.7);
58
+ background: var(--website-homepage-header__background-color);
58
59
  padding: space(1);
59
60
  }
60
61
 
61
62
  &::v-deep .asd20-messaging__heading {
62
- @include asd20-font(
63
- 1.25,
64
- var(--website-typography__font-family-headlines),
65
- 1.5,
66
- 700
67
- );
68
- color: #fff !important;
63
+ @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
64
+ color: var(--website-homepage-header__title-color) !important;
69
65
  padding-bottom: space(0.25);
70
66
  border-bottom: 5px solid var(--color__accent);
71
67
  }
@@ -76,7 +72,7 @@ export default {
76
72
  margin-bottom: 0;
77
73
  // width: 90%;
78
74
  font-size: 18px;
79
- color: #f6f6f6 !important
75
+ color: var(--website-homepage-header__foreground-color) !important;
80
76
  }
81
77
  &::v-deep .asd20-button {
82
78
  @include asd20-font(
@@ -87,9 +83,11 @@ export default {
87
83
  );
88
84
  flex-direction: column;
89
85
  width: 50vw;
90
- background: white;
86
+ color: var(--website-homepage-header__button-foreground-color);
87
+ background: var(--website-homepage-header__button-background-color);
91
88
  &:hover {
92
- background: lightgray;
89
+ color: var(--website-homepage-header__button-hover-foreground-color);
90
+ background: var(--website-homepage-header__button-hover-background-color);
93
91
  }
94
92
  }
95
93
  .header-messaging-section {
@@ -99,18 +97,37 @@ export default {
99
97
  }
100
98
  }
101
99
  }
100
+ @media (min-width: 667px) {
101
+ .asd20-video-header-content {
102
+ width: 100%;
103
+ .asd20-messaging {
104
+ background: var(--website-homepage-header__background-color)
105
+ var(--website-homepage-header__background-style);
106
+ }
107
+ &::v-deep .header-messaging-section {
108
+ .asd20-messaging__content {
109
+ width: 55vw;
110
+ }
111
+ }
112
+ }
113
+ }
102
114
 
103
115
  @media (min-width: 1024px) {
104
116
  .asd20-video-header-content {
105
117
  width: 80%;
106
118
  .header-messaging-section {
107
119
  border-bottom: none;
108
- width: 70%;
120
+ width: 80%;
109
121
  &::v-deep .asd20-messaging {
110
122
  padding: space(1);
111
123
  margin-left: space(2);
112
124
  .asd20-messaging__content {
113
- // max-width: 60%;
125
+ max-width: 60%;
126
+ }
127
+ .asd20-messaging__heading {
128
+ @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
129
+ color: var(--color__accent-s10);
130
+ border-bottom: none;
114
131
  }
115
132
  }
116
133
  &::after {
@@ -139,25 +156,13 @@ export default {
139
156
  // rgba(255, 255, 255, 0) 90%,
140
157
  // rgba(0, 0, 0, 0) 100%
141
158
  // );
142
- border-left: 20px solid var(--color__accent);
143
- border-bottom: 20px solid var(--color__accent);
159
+ border-left: 20px solid var(--website-homepage-header__accent);
160
+ border-bottom: 20px solid var(--website-homepage-header__accent);
144
161
  }
145
162
  }
146
- &::v-deep .asd20-messaging__heading {
147
- // font-size: 2vw !important;
148
- @include asd20-font(
149
- 1.25,
150
- var(--website-typography__font-family-headlines),
151
- 1.2,
152
- 700
153
- );
154
- color: var(--color__accent-s10);
155
- border-bottom: none;
156
- }
157
- &::v-deep .asd20-messaging__body-content {
158
- display: none;
163
+ &::v-deep .asd20-messaging__button-group {
164
+ flex-wrap: nowrap;
159
165
  }
160
-
161
166
  &::v-deep .asd20-button {
162
167
  @include asd20-font(
163
168
  0.75,
@@ -166,6 +171,7 @@ export default {
166
171
  700
167
172
  );
168
173
  flex-direction: row;
174
+ flex-wrap: nowrap !important;
169
175
  width: inherit;
170
176
  }
171
177
  }
package/src/config/configurations.json CHANGED
@@ -70,6 +70,25 @@
70
70
  "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
71
71
  "buttonBackgroundColor": "var(--color__accent)"
72
72
  },
73
+ "websiteHomepageHeader": {
74
+ "accent": "var(--color__accent)",
75
+ "backgroundColor": "var(--color__secondary)",
76
+ "backgroundStyle": "var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
77
+ "buttonBackgroundColor": "var(--color__accent)",
78
+ "buttonForegroundColor": "var(--color__on-accent)",
79
+ "buttonHoverBackgroundColor": "var(--color__accent-t10)",
80
+ "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
81
+ "foregroundColor": "var(--color__secondary-t90)",
82
+ "titleColor": "#fff",
83
+ "secondaryBackgroundColor": "var(--color__secondary)",
84
+ "secondaryBackgroundStyle": "var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
85
+ "secondaryButtonBackgroundColor": "var(--color__accent)",
86
+ "secondaryButtonForegroundColor": "var(--color__on-accent)",
87
+ "secondaryButtonHoverBackgroundColor": "var(--color__accent-t10)",
88
+ "secondaryButtonHoverForegroundColor": "var(--color__on-accent-s10)",
89
+ "secondaryForegroundColor": "var(--color__secondary-t90)",
90
+ "secondaryTitleColor": "#fff"
91
+ },
73
92
  "websiteCard": {
74
93
  "backgroundStyle": "var(--website-texture__default) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
75
94
  "reverseBackgroundStyle": "var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
package/src/design/tokens.css CHANGED
@@ -131,6 +131,23 @@
131
131
  --website-header__link-color: var(--color__accent-t20);
132
132
  --website-header__overlay-background-color: transparent;
133
133
  --website-header__title-color: #fff;
134
+ --website-homepage-header__accent: var(--color__accent);
135
+ --website-homepage-header__background-color: var(--color__secondary);
136
+ --website-homepage-header__background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
137
+ --website-homepage-header__button-background-color: var(--color__accent);
138
+ --website-homepage-header__button-foreground-color: var(--color__on-accent);
139
+ --website-homepage-header__button-hover-background-color: var(--color__accent);
140
+ --website-homepage-header__button-hover-foreground-color: var(--color__on-accent-s10);
141
+ --website-homepage-header__foreground-color: var(--color__secondary-t90);
142
+ --website-homepage-header__title-color: #fff;
143
+ --website-homepage-header__secondary-background-color: var(--color__secondary);
144
+ --website-homepage-header__secondary-background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
145
+ --website-homepage-header__secondary-button-background-color: var(--color__accent);
146
+ --website-homepage-header__secondary-button-foreground-color: var(--color__on-accent);
147
+ --website-homepage-header__secondary-button-hover-background-color: var(--color__secondary-t10);
148
+ --website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent-s10);
149
+ --website-homepage-header__secondary-foreground-color: var(--color__secondary-t90);
150
+ --website-homepage-header__secondary-title-color: #fff;
134
151
  --website-icon__fill-color: var(--color__accent);
135
152
  --website-icon__fill-color-reverse: var(--color__accent);
136
153
  --website-icon__hover-fill-color: var(--color__accent);
package/src/design/tokens.json CHANGED
@@ -61,6 +61,25 @@
61
61
  "overlayBackgroundColor": "transparent",
62
62
  "titleColor": "#fff"
63
63
  },
64
+ "websiteHomepageHeader": {
65
+ "accent": "var(--color__accent)",
66
+ "backgroundColor": "var(--color__secondary)",
67
+ "backgroundStyle": "var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
68
+ "buttonBackgroundColor": "var(--color__accent)",
69
+ "buttonForegroundColor": "var(--color__on-accent)",
70
+ "buttonHoverBackgroundColor": "var(--color__accent-t10)",
71
+ "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
72
+ "foregroundColor": "var(--color__secondary-t90)",
73
+ "titleColor": "#fff",
74
+ "secondaryBackgroundColor": "var(--color__secondary)",
75
+ "secondaryBackgroundStyle": "var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat)",
76
+ "secondaryButtonBackgroundColor": "var(--color__accent)",
77
+ "secondaryButtonForegroundColor": "var(--color__on-accent)",
78
+ "secondaryButtonHoverBackgroundColor": "var(--color__accent-t10)",
79
+ "secondaryButtonHoverForegroundColor": "var(--color__on-accent-s10)",
80
+ "secondaryForegroundColor": "var(--color__secondary-t90)",
81
+ "secondaryTitleColor": "#fff"
82
+ },
64
83
  "websiteIcon": {
65
84
  "fillColor": "var(--color__accent)",
66
85
  "fillColorReverse": "var(--color__accent)",