@asd20/ui 3.2.439 → 3.2.442

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/organisms/Asd20AppHeader/index.vue +35 -13
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.439",
8
+ "version": "3.2.442",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/organisms/Asd20AppHeader/index.vue CHANGED
@@ -13,12 +13,18 @@
13
13
  :link="backLink"
14
14
  ></asd20-button>
15
15
  <h1>
16
- <div class="asd20-app-header__title">
16
+ <div
17
+ :class="
18
+ zoomed
19
+ ? 'asd20-app-header__title asd20-app-header__zoomed'
20
+ : 'asd20-app-header__title'
21
+ "
22
+ >
17
23
  <asd20-icon v-if="icon" :name="icon" size="md" />
18
24
  {{ title }}
19
25
  <span class="version" v-if="version" v-html="version"></span>
20
26
  </div>
21
- <asd20-district-logo link="https://www.asd20.org"/>
27
+ <asd20-district-logo link="https://www.asd20.org" />
22
28
  </h1>
23
29
  <slot />
24
30
  </header>
@@ -63,7 +69,9 @@ export default {
63
69
  display: flex;
64
70
  align-items: center;
65
71
  flex-shrink: 0;
66
- background: white;
72
+ background: var(--color__primary);
73
+ color: white;
74
+ // background: white;
67
75
  flex-wrap: wrap;
68
76
  border-bottom: 1px solid var(--color__tertiary);
69
77
 
@@ -75,23 +83,32 @@ export default {
75
83
  // width: 100vw;
76
84
  // border-bottom: 1px solid var(--color__tertiary);
77
85
  }
86
+ &__zoomed,
87
+ .asd20-district-logo {
88
+ padding: 0 !important;
89
+ }
78
90
 
79
91
  h1 {
80
92
  margin: 0;
81
- font-size: 1rem;
82
- color: var(--color__primary);
93
+ font-size: 1.5rem;
94
+ color: var(--color__on-primary);
83
95
  flex-grow: 1;
84
96
  width: 100%;
85
97
  border-bottom: 1px solid var(--color__tertiary);
86
98
  display: flex;
87
99
  align-items: center;
100
+ font-family: var(--website-typography__font-family-headlines);
88
101
  .asd20-icon {
89
102
  margin: 0 space(0.5);
103
+ --line-color: white;
90
104
  }
91
105
  .version {
106
+ position: absolute;
107
+ top: space(3);
108
+ right: space(-0.45);
92
109
  display: block;
93
- font-size: 0.75rem;
94
- color: var(--color__accent-s20);
110
+ font-size: 0.65rem;
111
+ color: lightgray;
95
112
  text-transform: uppercase;
96
113
  margin-left: space(0.5);
97
114
  margin-right: space(0.5);
@@ -107,10 +124,12 @@ export default {
107
124
  .asd20-district-logo {
108
125
  margin-left: auto;
109
126
  margin-right: space(1);
110
- height: space(1);
127
+ height: space(1.5);
111
128
  padding: space(0.5) 0;
112
- --fill-one: #{asd20-color('brand-blue')};
113
- --fill-two: #{asd20-color('brand-gray')};
129
+ --fill-one: #fff;
130
+ --fill-two: #ccc;
131
+ // --fill-one: #{asd20-color('brand-blue')};
132
+ // --fill-two: #{asd20-color('brand-gray')};
114
133
  }
115
134
 
116
135
  .asd20-button {
@@ -130,17 +149,20 @@ export default {
130
149
  .asd20-button.asd20-button--transparent {
131
150
  margin-right: 0;
132
151
  }
133
- .asd20-button.back-button {
152
+ .back-button {
134
153
  width: 100vw;
135
- background: var(--color__tertiary);
154
+ background: var(--color__primary);
136
155
  flex-grow: 1;
137
156
  margin: 0;
138
157
  order: 0;
139
158
  font-size: 0.875rem !important;
140
159
  font-weight: bold;
141
160
  padding: space(0.25) space(0.25) space(0.25) space(0.5);
142
- color: var(--color__primary);
161
+ color: var(--color__on-primary);
143
162
  // margin-bottom: space(-0.5);
163
+ &::v-deep .asd20-icon {
164
+ --line-color: var(--color__on-primary) !important;
165
+ }
144
166
  }
145
167
  }
146
168