@asd20/ui 3.2.997 → 3.2.998

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.997",
8
+ "version": "3.2.998",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -120,6 +120,7 @@ storiesOf('Atoms - Asd20Icon', module)
120
120
  'danger',
121
121
  'directions',
122
122
  'directory',
123
+ 'district',
123
124
  'files',
124
125
  'finance',
125
126
  'hours',
@@ -128,7 +129,6 @@ storiesOf('Atoms - Asd20Icon', module)
128
129
  'language',
129
130
  'link',
130
131
  'login',
131
- 'pearson',
132
132
  'personalize',
133
133
  'phone',
134
134
  'register',
@@ -1,4 +1,4 @@
1
- <template>
1
+ <!-- <template>
2
2
  <g>
3
3
  <path
4
4
  class="line"
@@ -6,4 +6,19 @@
6
6
  d="M16 11.05l-8.49 8.49 1.42 1.41L16 13.88l7.07 7.07 1.41-1.41L16 11.05z"
7
7
  />
8
8
  </g>
9
+ </template> -->
10
+
11
+ <template>
12
+ <g>
13
+ <path
14
+ class="line"
15
+ d="M8 19.5L16 11.05L24 19.5"
16
+ fill="none"
17
+ stroke="currentColor"
18
+ stroke-width="2"
19
+ stroke-linecap="round"
20
+ stroke-linejoin="round"
21
+ />
22
+ </g>
9
23
  </template>
24
+
@@ -1,13 +1,39 @@
1
- <template>
1
+ <!-- <template>
2
2
  <g>
3
3
  <path
4
4
  class="line"
5
5
  fill="currentColor"
6
6
  d="M7.512 23.071L23.068 7.515l1.415 1.414L8.926 24.485z"
7
+ stroke-linecap="round"
7
8
  /><path
8
9
  class="line"
9
10
  fill="currentColor"
10
11
  d="M8.929 7.512l15.556 15.556-1.414 1.415L7.515 8.926z"
12
+ stroke-linecap="round"
13
+ />
14
+ </g>
15
+ </template> -->
16
+
17
+ <template>
18
+ <g>
19
+ <!-- Perfectly symmetrical diagonals -->
20
+ <path
21
+ class="line"
22
+ d="M8 24L24 8"
23
+ fill="none"
24
+ stroke="currentColor"
25
+ stroke-width="2"
26
+ stroke-linecap="round"
27
+ />
28
+ <path
29
+ class="line"
30
+ d="M8 8L24 24"
31
+ fill="none"
32
+ stroke="currentColor"
33
+ stroke-width="2"
34
+ stroke-linecap="round"
11
35
  />
12
36
  </g>
13
37
  </template>
38
+
39
+
@@ -91,10 +91,9 @@
91
91
  width="14"
92
92
  height="19"
93
93
  rx="2.2"
94
- class="line"
95
- fill="white"
94
+ class="fill"
96
95
  stroke="currentColor"
97
- stroke-width="1"
96
+ stroke-width="1.5"
98
97
  />
99
98
  <rect x="11" y="12" width="9" height="1" rx="0.6" class="line" stroke="currentColor" stroke-width="0.5"/>
100
99
  <rect x="11" y="14" width="9" height="1" rx="0.6" class="line" stroke="currentColor" stroke-width="0.5"/>
@@ -105,7 +104,7 @@
105
104
  d="M23.5 21.5 17.7 27.3C17.3 27.7 16.7 28 16.1 28.1L12.9 28.7 13.5 25.6C13.6 25 13.9 24.4 14.3 24L20.1 18.2M23.5 21.5 25 20C25.4 19.6 25.4 18.9 25 18.5L24 17.5C23.076 16.548 22.378 16.077 21.663 16.84L20.111 18.193M23.5 21.5 20.1 18.2"
106
105
  class="fill"
107
106
  stroke="currentColor"
108
- stroke-width="1"
107
+ stroke-width="1.5"
109
108
  stroke-linecap="round"
110
109
  stroke-linejoin="round"
111
110
  />
@@ -78,15 +78,20 @@
78
78
  />
79
79
  <!-- Document, using the mask so lines are "see through" -->
80
80
  <rect
81
- x="8.5" y="8" width="14" height="19" rx="2.2"
81
+ x="8.5" y="8" width="14" height="18" rx="2.2"
82
82
  class="line"
83
- fill="currentColor"
84
- mask="url(#docMask)"
83
+ stroke="currentColor"
84
+ stroke-width="2"
85
+ fill="none"
85
86
  />
87
+ <rect x="11" y="12" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
88
+ <rect x="11" y="14" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
89
+ <rect x="11" y="16" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
90
+ <rect x="11" y="19" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
86
91
  <!-- Person (body and head, clearly defined) -->
87
92
  <!-- Head -->
88
- <circle cx="23.7" cy="16" r="2.3" class="fill"/>
93
+ <circle cx="23" cy="15" r="3" class="fill"/>
89
94
  <!-- Body -->
90
- <rect x="20.3" y="18.3" width="6.8" height="7.4" rx="1.3" class="fill"/>
95
+ <rect x="19" y="18" width="8" height="8" rx="1.3" class="fill"/>
91
96
  </g>
92
97
  </template>
@@ -0,0 +1,23 @@
1
+ <template>
2
+ <g
3
+ viewBox="0 0 32 40"
4
+ width="128"
5
+ height="160"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <!-- 3/4 Circle outline (open at bottom) -->
9
+ <path
10
+ d="M6 28 a15 15 0 1 1 20 0"
11
+ fill="none"
12
+ class="line"
13
+ stroke="currentColor"
14
+ stroke-width="2"
15
+ stroke-linecap="round"
16
+ />
17
+ <path
18
+ class="line"
19
+ fill="currentColor"
20
+ d="M 22.955 20.095 L 16.055 4 L 5 27.445 l 7.3275 -13.6875 l 0.6225 4.7138 l 2.8688 -6.0675 l 2.9925 12.66 l 0.5138 -10.275 l 3.63 5.3063 z"
21
+ />
22
+ </g>
23
+ </template>
@@ -25,16 +25,16 @@
25
25
  stroke-linecap="round"
26
26
  />
27
27
  <!-- Calculator body (fill color, rounded) -->
28
- <rect x="8" y="7" width="16" height="20" rx="3" class="fill"/>
28
+ <rect x="8" y="6" width="16" height="21" rx="3" class="fill"/>
29
29
  <!-- Calculator display (line color, rounded) -->
30
- <rect x="10" y="9" width="12" height="6" rx="1" class="line" fill="currentColor"/>
30
+ <rect x="10" y="8" width="12" height="7" rx="1" class="line" fill="currentColor"/>
31
31
  <!-- Calculator buttons (line color, rounded) -->
32
- <rect x="11" y="17" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
33
- <rect x="15" y="17" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
34
- <rect x="19" y="17" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
35
- <rect x="11" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
36
- <rect x="15" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
37
- <rect x="19" y="21" width="2.4" height="2.4" rx="0.7" class="line" fill="currentColor"/>
32
+ <rect x="11" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
33
+ <rect x="15" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
34
+ <rect x="19" y="17" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
35
+ <rect x="11" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
36
+ <rect x="15" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
37
+ <rect x="19" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
38
38
  <!-- Dollar sign ($) in display (line color) -->
39
39
  <text
40
40
  x="16"
@@ -45,7 +45,6 @@
45
45
  font-family="sans-serif"
46
46
  font-weight="bold"
47
47
  class="fill"
48
- fill="white"
49
48
  style="pointer-events: none;"
50
49
  >$</text>
51
50
  </g>
@@ -17,7 +17,7 @@
17
17
  <!-- Browser window (rounded rectangle, outline color) -->
18
18
  <rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
19
19
  <!-- Toolbar (top bar, cutout from window, background shows through) -->
20
- <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" fill="#fff"/>
20
+ <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" class="fill"/>
21
21
  <!-- Toolbar circles (left) -->
22
22
  <circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
23
23
  <circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
@@ -1,9 +1,24 @@
1
- <template>
1
+ <!-- <template>
2
2
  <g>
3
3
  <path
4
4
  class="line"
5
5
  fill="currentColor"
6
6
  d="M5 10h22v2H5zM5 15h22v2H5zM5 20h22v2H5z"
7
+ stroke-linecap="round"
8
+ />
9
+ </g>
10
+ </template> -->
11
+
12
+ <template>
13
+ <g>
14
+ <path
15
+ class="line"
16
+ d="M5 11h22M5 16h22M5 21h22"
17
+ fill="none"
18
+ stroke="currentColor"
19
+ stroke-width="2"
20
+ stroke-linecap="round"
7
21
  />
8
22
  </g>
9
23
  </template>
24
+
@@ -42,32 +42,26 @@
42
42
  <path d="M9 14L21 14" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
43
43
  <path d="M9 17H21" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
44
44
  <path d="M9 20H15" class="fill" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /> -->
45
- <defs>
46
- <!-- Document lines "cut out" via mask -->
47
- <mask id="docMask">
48
- <!-- Fill entire area (white = opaque) -->
49
- <rect x="8.5" y="8" width="14" height="19" rx="2.2" fill="white"/>
50
- <!-- Lines to be transparent (black = transparent) -->
51
- <rect x="11" y="12" width="9" height="1.1" rx="0.6" fill="black"/>
52
- <rect x="11" y="14" width="9" height="1.1" rx="0.6" fill="black"/>
53
- <rect x="11" y="16" width="9" height="1.1" rx="0.6" fill="black"/>
54
- <rect x="11" y="19" width="7" height="1.1" rx="0.6" fill="black"/>
55
- </mask>
56
- </defs>
45
+
57
46
 
58
47
  <!-- Document, using the mask so lines are "see through" -->
59
48
  <rect
60
- x="8.5" y="8" width="14" height="19" rx="2.2"
49
+ x="8.5" y="8" width="14" height="18" rx="2.2"
61
50
  class="line"
62
- fill="currentColor"
63
- mask="url(#docMask)"
51
+ stroke="currentColor"
52
+ stroke-width="2"
53
+ fill="none"
64
54
  />
55
+ <rect x="11" y="12" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
56
+ <rect x="11" y="14" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
57
+ <rect x="11" y="16" width="9" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
58
+ <rect x="11" y="19" width="7" height="0.5" rx="0.6" class="line" stroke="currentColor" stroke-width="1"/>
65
59
  <!-- Pencil/Check/edit mark (line color) -->
66
60
  <path
67
61
  d="M23.5 21.5 17.7 27.3C17.3 27.7 16.7 28 16.1 28.1L12.9 28.7 13.5 25.6C13.6 25 13.9 24.4 14.3 24L20.1 18.2M23.5 21.5 25 20C25.4 19.6 25.4 18.9 25 18.5L24 17.5C23.076 16.548 22.378 16.077 21.663 16.84L20.111 18.193M23.5 21.5 20.1 18.2"
68
62
  class="fill"
69
63
  stroke="currentColor"
70
- stroke-width="2"
64
+ stroke-width="1"
71
65
  stroke-linecap="round"
72
66
  stroke-linejoin="round"
73
67
  />
@@ -1,4 +1,4 @@
1
- <template>
1
+ <!-- <template>
2
2
  <g>
3
3
  <path
4
4
  class="line"
@@ -6,4 +6,30 @@
6
6
  d="M14.26 7.76a6.49 6.49 0 0 1 5.1 10.52l-.48.6-.6.48a6.5 6.5 0 1 1-4-11.6m0-2a8.5 8.5 0 1 0 5.25 15.17l5.32 5.31 1.41-1.41-5.31-5.32a8.49 8.49 0 0 0-6.69-13.75z"
7
7
  />
8
8
  </g>
9
+ </template> -->
10
+
11
+ <template>
12
+ <g>
13
+ <!-- Circle of magnifying glass -->
14
+ <circle
15
+ cx="14.26"
16
+ cy="14.26"
17
+ r="8.5"
18
+ fill="none"
19
+ stroke="currentColor"
20
+ stroke-width="2"
21
+ stroke-linecap="round"
22
+ stroke-linejoin="round"
23
+ />
24
+ <!-- Handle -->
25
+ <line
26
+ x1="19.51"
27
+ y1="19.51"
28
+ x2="26"
29
+ y2="26"
30
+ stroke="currentColor"
31
+ stroke-width="2"
32
+ stroke-linecap="round"
33
+ />
34
+ </g>
9
35
  </template>
@@ -33,7 +33,7 @@
33
33
  <!-- Browser window (rounded rectangle, outline color) -->
34
34
  <rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
35
35
  <!-- Toolbar (top bar, cutout from window, background shows through) -->
36
- <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" fill="#fff"/>
36
+ <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" class="fill"/>
37
37
  <!-- Toolbar circles (left) -->
38
38
  <circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
39
39
  <circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
@@ -325,6 +325,9 @@ export default {
325
325
  .asd20-picker {
326
326
  .picker-button {
327
327
  margin: space(0.75);
328
+ padding: space(0.25) !important;
329
+ border: 1px solid #fff;
330
+ border-radius: 50%;
328
331
  }
329
332
  }
330
333
  .asd20-picker__modal {
@@ -3,11 +3,6 @@
3
3
  <slot name="before"></slot>
4
4
 
5
5
  <section class="header-messaging-section">
6
- <!-- <asd20-messaging
7
- v-for="(messaging, index) in messages"
8
- :key="index"
9
- v-bind="messaging"
10
- ></asd20-messaging> -->
11
6
  <asd20-messaging
12
7
  id="main"
13
8
  v-bind="messages[0]"
@@ -81,20 +76,6 @@ export default {
81
76
 
82
77
  .asd20-video-header-content {
83
78
  .asd20-messaging {
84
- // margin-bottom: space(1);
85
- // background-image: linear-gradient(
86
- // to right,
87
- // rgba(255, 255, 255, 0.9) 70%,
88
- // rgba(255, 255, 255, 0.5) 90%,
89
- // rgba(255, 255, 255, 0) 100%
90
- // );
91
- // background-image: linear-gradient(
92
- // to right,
93
- // rgba(8, 24, 43, 0.9) 50%,
94
- // rgba(8, 24, 43, 0.5) 80%,
95
- // rgba(8, 24, 43, 0) 100%
96
- // );
97
- // background: rgba(51, 92, 155, 0.7);
98
79
  background: var(--color-minus-alpha)
99
80
  var(--website-homepage-header__background-style);
100
81
  padding: space(3) space(1) space(1) space(1);
@@ -112,7 +93,6 @@ export default {
112
93
  }
113
94
  &::v-deep .lead {
114
95
  margin-bottom: 0;
115
- // width: 90%;
116
96
  @include fluid-type($base-font-size * 1, $base-font-size * 1.15);
117
97
  color: var(--website-homepage-header__foreground-color) !important;
118
98
  }
@@ -131,9 +111,10 @@ export default {
131
111
  border: none;
132
112
  position: relative;
133
113
  padding: space(0.5) space(1);
134
- // height: 50px;
135
- // line-height: 50px;
136
114
  transition: background-color 0.3s ease;
115
+ z-index: 2;
116
+ overflow: hidden;
117
+
137
118
  &::before {
138
119
  content: '';
139
120
  position: absolute;
@@ -164,8 +145,6 @@ export default {
164
145
  }
165
146
  }
166
147
  .header-messaging-section {
167
- // border-bottom: 10px solid var(--color__accent);
168
- // text-shadow: 1px 1px 4px black !important;
169
148
  &::v-deep .asd20-messaging__content {
170
149
  margin: space(1) 0 0 0;
171
150
  }
@@ -174,11 +153,9 @@ export default {
174
153
  @keyframes slide_down {
175
154
  from {
176
155
  opacity: 0;
177
- // bottom: space(2);
178
156
  }
179
157
  to {
180
158
  opacity: 1;
181
- // botom: space(-0.74);
182
159
  }
183
160
  }
184
161
  @keyframes slide_left {
@@ -265,28 +242,11 @@ export default {
265
242
  position: absolute;
266
243
  width: 75%;
267
244
  top: 0;
268
- // bottom: space(-0.74);
269
245
  left: 3.25rem;
270
246
  height: 100%;
271
247
  right: 0;
272
248
  z-index: -1;
273
- // background: var(--color__accent);
274
- // background: linear-gradient(
275
- // to right,
276
- // var(--color__accent) 50%,
277
- // rgba(255, 255, 255, 0.5) 90%,
278
- // rgba(255, 255, 255, 0) 100%
279
- // );
280
- // background: radial-gradient(
281
- // ellipse at bottom left,
282
- // var(--color__accent) 30%,
283
- // rgba(255, 255, 255, 0) 70%,
284
- // rgba(255, 255, 255, 0) 80%,
285
- // rgba(255, 255, 255, 0) 90%,
286
- // rgba(0, 0, 0, 0) 100%
287
- // );
288
249
  border-left: 30px solid var(--website-homepage-header__accent);
289
- // border-bottom: 20px solid var(--website-homepage-header__accent);
290
250
  animation: slide_down 2.5s ease-in-out 0.5s both;
291
251
  }
292
252
  }
@@ -1,25 +1,25 @@
1
1
  :root {
2
- --color__accent-s100: #000000; /* 100% black */
3
- --color__accent-s90: #101b2a; /* 90% black + 10% accent */
4
- --color__accent-s80: #203855; /* 80% black + 20% accent */
5
- --color__accent-s70: #305580; /* 70% black + 30% accent */
6
- --color__accent-s60: #4062a2; /* 60% black + 40% accent */
7
- --color__accent-s50: #5070c4; /* 50% black + 50% accent */
8
- --color__accent-s40: #5b87d1; /* 40% black + 60% accent */
9
- --color__accent-s30: #6593da; /* 30% black + 70% accent */
10
- --color__accent-s20: #6ea0e3; /* 20% black + 80% accent */
11
- --color__accent-s10: #71a1e0; /* 10% black + 90% accent (almost base) */
12
- --color__accent: #71a1e0; /* base */
13
- --color__accent-t10: #84ace4; /* 10% white + 90% accent */
14
- --color__accent-t20: #97b8e8; /* 20% white + 80% accent */
15
- --color__accent-t30: #abc3ec; /* 30% white + 70% accent */
16
- --color__accent-t40: #becff0; /* 40% white + 60% accent */
17
- --color__accent-t50: #d1dbf4; /* 50% white + 50% accent */
18
- --color__accent-t60: #e3e7f8; /* 60% white + 40% accent */
19
- --color__accent-t70: #edf1fa; /* 70% white + 30% accent */
20
- --color__accent-t80: #f5f7fc; /* 80% white + 20% accent */
21
- --color__accent-t90: #fbfcfe; /* 90% white + 10% accent */
22
- --color__accent-t100: #ffffff; /* 100% white */
2
+ --color__accent-s100: #000;
3
+ --color__accent-s90: #01040b;
4
+ --color__accent-s80: #030916;
5
+ --color__accent-s70: #0f1c50;
6
+ --color__accent-s60: #12205c;
7
+ --color__accent-s50: #142469;
8
+ --color__accent-s40: #182a7a;
9
+ --color__accent-s30: #1b2f87;
10
+ --color__accent-s20: #1e3493;
11
+ --color__accent-s10: #1e3493;
12
+ --color__accent: #225da5;
13
+ --color__accent-t10: #326aaf;
14
+ --color__accent-t20: #4479b9;
15
+ --color__accent-t30: #5b8bc4;
16
+ --color__accent-t40: #749dce;
17
+ --color__accent-t50: #8badd6;
18
+ --color__accent-t60: #a0bbdd;
19
+ --color__accent-t70: #b7cbe5;
20
+ --color__accent-t80: #cad9ec;
21
+ --color__accent-t90: #dce5f1;
22
+ --color__accent-t100: #fff;
23
23
  --color__on-accent: #ffffff;
24
24
  --color__on-primary: #ffffff;
25
25
  --color__on-secondary: #ffffff;
@@ -194,8 +194,8 @@
194
194
  --website-shape__line-thickness: 2px;
195
195
  --website-shape__odd-transform: none;
196
196
  --website-shape__radius-l: 2px;
197
- --website-shape__radius-m: 2px;
198
- --website-shape__radius-s: 2px;
197
+ --website-shape__radius-m: 5px;
198
+ --website-shape__radius-s: 10px;
199
199
  --website-shape__transform: none;
200
200
  --website-texture__default: url('/statics/images/chalk-dark.png');
201
201
  --website-texture__position: center center;