@asd20/ui-next 2.23.1 → 2.23.2
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/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<div class="
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
2
|
+
<div class="asd20-app-header-shell">
|
|
3
|
+
<asd20-button
|
|
4
|
+
class="back-button"
|
|
5
|
+
icon="chevron"
|
|
6
|
+
:icon-angle="-90"
|
|
7
|
+
size="xs"
|
|
8
|
+
:label="backLabel"
|
|
9
|
+
transparent
|
|
10
|
+
horizontal
|
|
11
|
+
text-only
|
|
12
|
+
:link="backLink"
|
|
13
|
+
/>
|
|
14
|
+
<header class="asd20-app-header">
|
|
15
|
+
<div class="asd20-app-header__title">
|
|
16
|
+
<div class="icon-and-title">
|
|
17
|
+
<asd20-icon
|
|
18
|
+
v-if="icon"
|
|
19
|
+
:name="icon"
|
|
20
|
+
size="md"
|
|
21
|
+
/>
|
|
22
|
+
<h1>{{ title }}</h1>
|
|
23
|
+
</div>
|
|
24
|
+
<asd20-district-logo link="https://www.asd20.org" />
|
|
22
25
|
</div>
|
|
23
|
-
</div>
|
|
24
26
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</
|
|
27
|
+
<!-- <span class="version" v-if="version" v-html="version"></span> -->
|
|
28
|
+
<slot />
|
|
29
|
+
</header>
|
|
30
|
+
</div>
|
|
29
31
|
</template>
|
|
30
32
|
|
|
31
33
|
<script>
|
|
@@ -48,6 +50,35 @@ export default {
|
|
|
48
50
|
|
|
49
51
|
<style lang="scss" scoped>
|
|
50
52
|
@use '../../../design/component-stack' as *;
|
|
53
|
+
|
|
54
|
+
.asd20-app-header-shell {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
flex-shrink: 0;
|
|
58
|
+
min-width: 0;
|
|
59
|
+
background: var(--color__primary);
|
|
60
|
+
color: white;
|
|
61
|
+
.back-button {
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
max-width: 100%;
|
|
64
|
+
min-width: 0;
|
|
65
|
+
margin: 0 0 0 0.25rem;
|
|
66
|
+
padding: 0.75rem;
|
|
67
|
+
font-size: 0.875rem !important;
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
& :deep(.asd20-icon) {
|
|
70
|
+
color: white;
|
|
71
|
+
margin-right: 0.25rem;
|
|
72
|
+
}
|
|
73
|
+
& :deep(.asd20-button__label) {
|
|
74
|
+
min-width: 0;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
text-overflow: ellipsis;
|
|
77
|
+
white-space: nowrap;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
51
82
|
.asd20-app-header {
|
|
52
83
|
position: relative;
|
|
53
84
|
z-index: 100;
|
|
@@ -58,19 +89,27 @@ export default {
|
|
|
58
89
|
color: white;
|
|
59
90
|
flex-wrap: nowrap;
|
|
60
91
|
border-bottom: 1px solid var(--color__tertiary);
|
|
92
|
+
|
|
61
93
|
&__title {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
width: 100%;
|
|
98
|
+
min-width: 0;
|
|
99
|
+
padding: 0 0.5rem 0.5rem 0rem;
|
|
100
|
+
|
|
62
101
|
.icon-and-title {
|
|
63
102
|
display: flex;
|
|
64
103
|
align-items: center;
|
|
65
|
-
flex
|
|
66
|
-
|
|
104
|
+
flex: 1 1 auto;
|
|
105
|
+
min-width: 0;
|
|
67
106
|
padding-right: 0.5rem;
|
|
107
|
+
|
|
68
108
|
h1 {
|
|
69
109
|
margin: 0;
|
|
70
110
|
font-size: 1.2rem;
|
|
71
111
|
color: var(--color__on-primary);
|
|
72
|
-
|
|
73
|
-
width: 100%;
|
|
112
|
+
min-width: 0;
|
|
74
113
|
/* border-bottom: 1px solid var(--color__tertiary);*/
|
|
75
114
|
display: flex;
|
|
76
115
|
align-items: center;
|
|
@@ -84,12 +123,15 @@ export default {
|
|
|
84
123
|
}
|
|
85
124
|
|
|
86
125
|
.asd20-district-logo {
|
|
87
|
-
position:
|
|
88
|
-
|
|
126
|
+
position: static;
|
|
127
|
+
flex: 0 1 10rem;
|
|
128
|
+
min-width: 7.5rem;
|
|
129
|
+
max-width: 10rem;
|
|
89
130
|
margin-left: auto;
|
|
90
|
-
margin-right:
|
|
91
|
-
|
|
92
|
-
padding: 0
|
|
131
|
+
margin-right: 0;
|
|
132
|
+
margin-top: 0.15rem;
|
|
133
|
+
padding: 0;
|
|
134
|
+
|
|
93
135
|
& :deep(svg) {
|
|
94
136
|
fill: #fff;
|
|
95
137
|
.district {
|
|
@@ -112,34 +154,23 @@ export default {
|
|
|
112
154
|
/* order: 2;*/
|
|
113
155
|
/* }*/
|
|
114
156
|
|
|
115
|
-
.back-button {
|
|
116
|
-
/* width: 100vw;*/
|
|
117
|
-
background: var(--color__primary);
|
|
118
|
-
/* flex-grow: 1;*/
|
|
119
|
-
margin: 0;
|
|
120
|
-
order: 0;
|
|
121
|
-
font-size: 0.875rem !important;
|
|
122
|
-
font-weight: bold;
|
|
123
|
-
padding: space(0.5) space(0.5) space(0.5) space(0.5);
|
|
124
|
-
color: var(--color__on-primary);
|
|
125
|
-
/* margin-bottom: space(-0.5);*/
|
|
126
|
-
& :deep(.asd20-icon) {
|
|
127
|
-
--line-color: var(--color__on-primary) !important;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
157
|
}
|
|
158
|
+
|
|
131
159
|
@media (min-width: 768px) {
|
|
132
160
|
.asd20-app-header {
|
|
133
161
|
align-items: flex-end;
|
|
162
|
+
|
|
134
163
|
&__title {
|
|
164
|
+
padding: 0 1rem 0.5rem 0.5rem;
|
|
135
165
|
.icon-and-title h1 {
|
|
136
166
|
font-size: 1.5rem;
|
|
137
167
|
}
|
|
138
168
|
}
|
|
169
|
+
|
|
139
170
|
.asd20-district-logo {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
171
|
+
flex-basis: 20rem;
|
|
172
|
+
max-width: 20rem;
|
|
173
|
+
margin-top: 0;
|
|
143
174
|
}
|
|
144
175
|
}
|
|
145
176
|
}
|