@asd20/ui 3.2.438 → 3.2.441

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.438",
8
+ "version": "3.2.441",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <header class="asd20-app-header">
3
3
  <asd20-button
4
- v-show="!this.zoomed"
4
+ v-show="!zoomed"
5
5
  class="back-button"
6
6
  icon="chevron"
7
7
  :icon-angle="-90"
@@ -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,29 @@ 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.25rem;
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 {
92
106
  display: block;
93
- font-size: 0.75rem;
94
- color: var(--color__accent-s20);
107
+ font-size: 0.65rem;
108
+ color: lightgray;
95
109
  text-transform: uppercase;
96
110
  margin-left: space(0.5);
97
111
  margin-right: space(0.5);
@@ -109,8 +123,10 @@ export default {
109
123
  margin-right: space(1);
110
124
  height: space(1);
111
125
  padding: space(0.5) 0;
112
- --fill-one: #{asd20-color('brand-blue')};
113
- --fill-two: #{asd20-color('brand-gray')};
126
+ --fill-one: #fff;
127
+ --fill-two: #ccc;
128
+ // --fill-one: #{asd20-color('brand-blue')};
129
+ // --fill-two: #{asd20-color('brand-gray')};
114
130
  }
115
131
 
116
132
  .asd20-button {
@@ -36,7 +36,7 @@
36
36
  </asd20-app-header>
37
37
  <nav
38
38
  :class="
39
- this.zoomed
39
+ zoomed
40
40
  ? 'asd20-app-template__toolbar asd20-app-template__toolbar-zoomed'
41
41
  : 'asd20-app-template__toolbar'
42
42
  "