@oslokommune/punkt-css 5.2.1 → 6.0.1

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 (19) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/CONTRIBUTING.md +0 -3
  3. package/dist/css/components/header.css +216 -76
  4. package/dist/css/components/header.min.css +1 -1
  5. package/dist/css/pkt-base.css +847 -7
  6. package/dist/css/pkt-base.min.css +1 -1
  7. package/dist/css/pkt-components.css +216 -76
  8. package/dist/css/pkt-components.min.css +1 -1
  9. package/dist/css/pkt-elements.css +20 -2
  10. package/dist/css/pkt-elements.min.css +1 -1
  11. package/dist/css/pkt.css +1083 -85
  12. package/dist/css/pkt.min.css +1 -1
  13. package/dist/scss/abstracts/variables/_spacing.scss +2 -0
  14. package/dist/scss/base/_typography.scss +12 -2
  15. package/dist/scss/components/_header.scss +232 -73
  16. package/dist/scss/elements/_checkbox-radio.scss +1 -1
  17. package/dist/scss/elements/_list.scss +20 -0
  18. package/dist/scss/elements/_select.scss +1 -1
  19. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -5,6 +5,44 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [6.0.1](https://github.com/oslokommune/punkt/compare/6.0.0...6.0.1) (2023-08-24)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Pålogget org => Representerer, pluss headermenyposisjon (#1072). * fix(all): Pålogget org => Representerer, pluss headermenyposisjon
18
+
19
+ * Headerposisjon
20
+
21
+
22
+ ### Chores
23
+ Ingen
24
+
25
+ ---
26
+
27
+
28
+ ## [6.0.0](https://github.com/oslokommune/punkt/compare/5.2.3...6.0.0) (2023-08-22)
29
+
30
+ ### ⚠ BREAKING CHANGES
31
+ * PktHeader #921 (#1067). BREAKING CHANGE: Denne komponenten endrer en hel del fra tidligere versjon. Det meste er endret, og du bør regne med å måtte sette sammen data du sender inn til komponenten på en annen måte enn du har gjort tidligere. Se vår nettside for spesifikasjoner og mer informasjon.
32
+
33
+
34
+ ### Features
35
+ Ingen
36
+
37
+ ### Bug Fixes
38
+ Ingen
39
+
40
+ ### Chores
41
+ Ingen
42
+
43
+ ---
44
+
45
+
8
46
  ## [5.2.1](https://github.com/oslokommune/punkt/compare/5.2.0...5.2.1) (2023-08-14)
9
47
 
10
48
  ### ⚠ BREAKING CHANGES
package/CONTRIBUTING.md CHANGED
@@ -4,9 +4,6 @@ Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som hel
4
4
  ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
5
5
  er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
6
6
 
7
- Vi oppfordrer deg til å starte med å lese vår
8
- [overordnede guide for å bidra](/kom-i-gang/bidra/).
9
-
10
7
  👋 Happy coding!
11
8
 
12
9
  ## 📝 Forutsetninger
package/dist/css/components/header.css CHANGED
@@ -4,120 +4,260 @@
4
4
  .pkt-header {
5
5
  background-color: var(--color-white);
6
6
  border-bottom: 1px solid var(--color-gray);
7
- display: grid;
8
- gap: 0 0;
9
- grid-template-areas: "header-logo header-actions";
10
- grid-template-columns: minmax(108.3870967742px, 116.1290322581px) 1fr;
11
- padding: 1rem 1rem;
7
+ display: flex;
8
+ justify-content: space-between;
12
9
  align-items: center;
10
+ padding: 0 1rem;
11
+ height: 4.5rem;
13
12
  }
14
- @media screen and (min-width: 80rem) {
13
+ @media screen and (min-width: 48rem) {
15
14
  .pkt-header {
16
- padding: 1.5rem 2.5rem;
15
+ height: 5.5rem;
17
16
  }
18
17
  }
19
- .pkt-header__logo {
20
- grid-area: header-logo;
18
+ @media screen and (min-width: 80rem) {
19
+ .pkt-header {
20
+ height: 6.5rem;
21
+ padding: 0 3rem;
22
+ }
21
23
  }
22
- .pkt-header__logo-link {
23
- display: block;
24
+ .pkt-header--fixed {
25
+ width: 100vw;
26
+ position: fixed;
27
+ top: 0;
28
+ left: 0;
29
+ z-index: 10;
24
30
  }
25
- .pkt-header__logo-svg {
26
- height: 56px;
27
- width: 108.3870967742px;
31
+ .pkt-header--scroll-to-hide {
32
+ transform: translate3d(0, 0, 0);
33
+ transition: 0.5s transform ease-in-out;
28
34
  }
29
- @media screen and (min-width: 35.938rem) {
30
- .pkt-header__logo-svg {
31
- height: 60px;
32
- width: 116.1290322581px;
33
- }
35
+ .pkt-header--hidden {
36
+ transform: translate3d(0, -100%, 0);
34
37
  }
35
- .pkt-header__actions {
36
- grid-area: header-actions;
38
+ .pkt-header__logo {
39
+ flex: 0 1 auto;
37
40
  display: flex;
38
- justify-content: flex-end;
39
41
  align-items: center;
42
+ gap: 1rem;
43
+ margin: 0;
44
+ padding: 0;
40
45
  }
41
- .pkt-header__action {
42
- align-items: center;
43
- display: inline-flex;
44
- flex-direction: row;
45
- margin: 0 0 0 1rem;
46
- }
47
- @media screen and (min-width: 35.938rem) {
48
- .pkt-header__action {
49
- height: 60px;
50
- margin: 0 0 0 2rem;
46
+ @media screen and (min-width: 80rem) {
47
+ .pkt-header__logo {
48
+ gap: 1.5rem;
51
49
  }
52
50
  }
53
- .pkt-header__action-text {
54
- font-size: 1.125rem;
51
+ .pkt-header__logo-link, .pkt-header__logo-service {
52
+ display: inline-block;
53
+ margin: 0;
54
+ padding: 0;
55
+ }
56
+ .pkt-header__logo-service {
57
+ padding-top: 0.28rem;
58
+ display: none;
59
+ white-space: nowrap;
60
+ text-overflow: ellipsis;
61
+ overflow: hidden;
62
+ font-size: 1.375rem;
55
63
  font-weight: 300;
56
64
  letter-spacing: -0.2px;
57
- line-height: 1.75rem;
58
- display: inline-flex;
59
- align-items: center;
60
- max-width: 3.125rem;
61
- white-space: nowrap;
65
+ line-height: 2.125rem;
62
66
  }
63
- @media screen and (min-width: 35.938rem) {
64
- .pkt-header__action-text {
65
- max-width: none;
67
+ @media screen and (min-width: 48rem) {
68
+ .pkt-header__logo-service {
69
+ display: inline-block;
66
70
  }
67
71
  }
68
- .pkt-header__action-textrow {
69
- display: inline-flex;
72
+ @media screen and (min-width: 80rem) {
73
+ .pkt-header__logo-service {
74
+ padding-top: 0.45rem;
75
+ font-size: 1.5rem;
76
+ font-weight: 300;
77
+ letter-spacing: -0.2px;
78
+ line-height: 2.25rem;
79
+ }
80
+ }
81
+ .pkt-header__logo-svg {
82
+ height: 3.5rem;
83
+ width: 6.7741935484rem;
84
+ }
85
+ @media screen and (min-width: 80rem) {
86
+ .pkt-header__logo-svg {
87
+ height: 4rem;
88
+ width: 7.7419354839rem;
89
+ }
90
+ }
91
+ .pkt-header--narrow {
92
+ padding: 0 1rem;
93
+ height: 4.5rem;
94
+ }
95
+ .pkt-header--narrow .pkt-header__logo {
96
+ gap: 1rem;
97
+ }
98
+ .pkt-header--narrow .pkt-header__logo-service {
99
+ padding-top: 0.28rem;
70
100
  font-size: 1.125rem;
71
101
  font-weight: 300;
72
102
  letter-spacing: -0.2px;
73
103
  line-height: 1.75rem;
74
- max-width: 3.125rem;
75
104
  }
76
- @media screen and (min-width: 35.938rem) {
77
- .pkt-header__action-textrow {
78
- max-width: none;
105
+ .pkt-header--narrow .pkt-header__logo-svg {
106
+ height: 3rem;
107
+ width: 5.8064516129rem;
108
+ }
109
+ @media screen and (min-width: 0) and (max-width: 64rem) {
110
+ .pkt-header__menu-btn {
111
+ border: 0;
112
+ }
113
+ .pkt-header__menu-btn .pkt-btn__text {
114
+ display: none;
79
115
  }
80
116
  }
81
- .pkt-header__action-textrow.text-row-inline {
82
- display: inline;
117
+ .pkt-header__user-btn {
118
+ border-color: var(--color-yellow);
119
+ }
120
+ .pkt-header__actions {
121
+ flex: 1 0 auto;
122
+ display: flex;
123
+ justify-content: flex-end;
124
+ align-items: stretch;
125
+ }
126
+ .pkt-header__actions-row {
127
+ list-style: none;
128
+ padding-left: 0;
129
+ margin: 0;
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 2rem;
83
133
  }
84
- .pkt-header__action-change {
85
- margin-left: 0.75rem;
134
+ .pkt-header__actions-row > li {
135
+ padding: 0;
86
136
  }
87
- .pkt-header__action-icon {
88
- --fg-color: var(--color-blue-dark);
89
- height: 1.5rem;
90
- line-height: 1rem;
91
- width: 1.5rem;
92
- margin-left: 0.25rem;
137
+ .pkt-header__dropdown {
138
+ z-index: 2;
139
+ position: absolute;
140
+ margin: 0;
141
+ margin-top: 0.75rem;
142
+ right: 0;
143
+ left: 0;
144
+ padding-left: 0;
145
+ list-style: none;
146
+ visibility: hidden;
147
+ max-height: calc(100vh - 4.5rem);
148
+ overflow-x: hidden;
149
+ overflow-y: auto;
93
150
  }
94
151
  @media screen and (min-width: 48rem) {
95
- .pkt-header__action-icon {
96
- height: 1.5rem;
97
- margin-left: 0.5rem;
98
- width: 1.5rem;
152
+ .pkt-header__dropdown {
153
+ margin-top: 1rem;
154
+ left: auto;
155
+ right: 0;
156
+ min-width: 23rem;
157
+ width: auto;
99
158
  }
100
159
  }
101
- .pkt-header .pkt-btn {
102
- font-size: 1.125rem;
103
- font-weight: 500;
104
- letter-spacing: -0.2px;
105
- line-height: 1.75rem;
106
- margin: 0 0 0 0.25rem;
107
- padding: 0.75rem 0.75rem;
160
+ .pkt-header__dropdown > li {
161
+ padding: 2rem;
162
+ background-color: var(--color-white);
163
+ }
164
+ .pkt-header__dropdown > li.footer {
165
+ padding-top: 1rem;
166
+ padding-bottom: 1rem;
167
+ }
168
+ .pkt-header__dropdown > li:nth-child(odd) {
169
+ background-color: var(--color-gray-light);
170
+ }
171
+ .pkt-header__user-fullname {
172
+ display: none;
173
+ }
174
+ @media screen and (min-width: 80rem) {
175
+ .pkt-header__user-fullname {
176
+ display: inline;
177
+ }
178
+ }
179
+ .pkt-header__user-shortname {
180
+ display: inline;
181
+ }
182
+ @media screen and (min-width: 80rem) {
183
+ .pkt-header__user-shortname {
184
+ display: none;
185
+ }
108
186
  }
109
187
  @media screen and (min-width: 48rem) {
110
- .pkt-header .pkt-btn {
111
- margin: 0 0 0 2rem;
112
- padding: 0.75rem 1rem;
188
+ .pkt-header--has-dropdown {
189
+ position: relative;
190
+ }
191
+ }
192
+ .pkt-header--has-dropdown > .pkt-btn:hover .pkt-btn--closed {
193
+ --fg-color: var(--color-white);
194
+ }
195
+ .pkt-header--has-dropdown .pkt-btn--open {
196
+ display: none;
197
+ }
198
+ .pkt-header--has-dropdown .pkt-btn--closed {
199
+ display: none;
200
+ }
201
+ @media screen and (min-width: 80rem) {
202
+ .pkt-header--has-dropdown .pkt-btn--closed {
203
+ display: inline-block;
204
+ }
205
+ }
206
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn {
207
+ background-color: var(--color-active);
208
+ border-color: var(--color-active);
209
+ color: var(--color-white);
210
+ }
211
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
212
+ --fg-color: var(--color-white);
213
+ }
214
+ @media screen and (min-width: 80rem) {
215
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
216
+ display: inline-block;
113
217
  }
114
218
  }
115
- .pkt-header .pkt-btn:hover .pkt-header__action-icon {
116
- --fg-color: var(--color-hover);
219
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--closed {
220
+ display: none;
221
+ }
222
+ .pkt-header--has-dropdown.pkt-header--open-dropdown .pkt-header__dropdown {
223
+ visibility: visible;
224
+ }
225
+
226
+ .pkt-user-menu p {
227
+ margin: 0;
228
+ }
229
+ .pkt-user-menu__label {
230
+ color: var(--color-grayscale-60);
231
+ font-size: 0.875rem;
232
+ font-weight: 500;
233
+ letter-spacing: -0.2px;
234
+ line-height: 1.375rem;
117
235
  }
118
- .pkt-header .pkt-btn__text--representing {
236
+ .pkt-user-menu__name {
119
237
  font-size: 1.125rem;
120
- font-weight: 300;
238
+ font-weight: 500;
121
239
  letter-spacing: -0.2px;
122
240
  line-height: 1.75rem;
241
+ }
242
+ .pkt-user-menu__last-logged-in, .pkt-user-menu__org_number {
243
+ font-size: 1rem;
244
+ font-weight: 300;
245
+ letter-spacing: -0.2px;
246
+ line-height: 1.5rem;
247
+ }
248
+ .pkt-user-menu .pkt-list {
249
+ margin: 0;
250
+ }
251
+ .pkt-user-menu .pkt-list .pkt-link {
252
+ text-decoration: none;
253
+ }
254
+ .pkt-user-menu .pkt-list .pkt-link:hover {
255
+ text-decoration: underline;
256
+ }
257
+ .pkt-user-menu .pkt-list > li > a {
258
+ grid-template-columns: 1.5rem auto;
259
+ gap: 0.5rem;
260
+ }
261
+ .pkt-user-menu .pkt-list-horizontal {
262
+ margin: 0;
123
263
  }
package/dist/css/components/header.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-header{background-color:var(--color-white);border-bottom:1px solid var(--color-gray);display:grid;gap:0 0;grid-template-areas:"header-logo header-actions";grid-template-columns:minmax(108.3870967742px, 116.1290322581px) 1fr;padding:1rem 1rem;align-items:center}@media screen and (min-width: 80rem){.pkt-header{padding:1.5rem 2.5rem}}.pkt-header__logo{grid-area:header-logo}.pkt-header__logo-link{display:block}.pkt-header__logo-svg{height:56px;width:108.3870967742px}@media screen and (min-width: 35.938rem){.pkt-header__logo-svg{height:60px;width:116.1290322581px}}.pkt-header__actions{grid-area:header-actions;display:flex;justify-content:flex-end;align-items:center}.pkt-header__action{align-items:center;display:inline-flex;flex-direction:row;margin:0 0 0 1rem}@media screen and (min-width: 35.938rem){.pkt-header__action{height:60px;margin:0 0 0 2rem}}.pkt-header__action-text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:inline-flex;align-items:center;max-width:3.125rem;white-space:nowrap}@media screen and (min-width: 35.938rem){.pkt-header__action-text{max-width:none}}.pkt-header__action-textrow{display:inline-flex;font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;max-width:3.125rem}@media screen and (min-width: 35.938rem){.pkt-header__action-textrow{max-width:none}}.pkt-header__action-textrow.text-row-inline{display:inline}.pkt-header__action-change{margin-left:.75rem}.pkt-header__action-icon{--fg-color: var(--color-blue-dark);height:1.5rem;line-height:1rem;width:1.5rem;margin-left:.25rem}@media screen and (min-width: 48rem){.pkt-header__action-icon{height:1.5rem;margin-left:.5rem;width:1.5rem}}.pkt-header .pkt-btn{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem;margin:0 0 0 .25rem;padding:.75rem .75rem}@media screen and (min-width: 48rem){.pkt-header .pkt-btn{margin:0 0 0 2rem;padding:.75rem 1rem}}.pkt-header .pkt-btn:hover .pkt-header__action-icon{--fg-color: var(--color-hover)}.pkt-header .pkt-btn__text--representing{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem}
1
+ .pkt-header{background-color:var(--color-white);border-bottom:1px solid var(--color-gray);display:flex;justify-content:space-between;align-items:center;padding:0 1rem;height:4.5rem}@media screen and (min-width: 48rem){.pkt-header{height:5.5rem}}@media screen and (min-width: 80rem){.pkt-header{height:6.5rem;padding:0 3rem}}.pkt-header--fixed{width:100vw;position:fixed;top:0;left:0;z-index:10}.pkt-header--scroll-to-hide{transform:translate3d(0, 0, 0);transition:.5s transform ease-in-out}.pkt-header--hidden{transform:translate3d(0, -100%, 0)}.pkt-header__logo{flex:0 1 auto;display:flex;align-items:center;gap:1rem;margin:0;padding:0}@media screen and (min-width: 80rem){.pkt-header__logo{gap:1.5rem}}.pkt-header__logo-link,.pkt-header__logo-service{display:inline-block;margin:0;padding:0}.pkt-header__logo-service{padding-top:.28rem;display:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:1.375rem;font-weight:300;letter-spacing:-0.2px;line-height:2.125rem}@media screen and (min-width: 48rem){.pkt-header__logo-service{display:inline-block}}@media screen and (min-width: 80rem){.pkt-header__logo-service{padding-top:.45rem;font-size:1.5rem;font-weight:300;letter-spacing:-0.2px;line-height:2.25rem}}.pkt-header__logo-svg{height:3.5rem;width:6.7741935484rem}@media screen and (min-width: 80rem){.pkt-header__logo-svg{height:4rem;width:7.7419354839rem}}.pkt-header--narrow{padding:0 1rem;height:4.5rem}.pkt-header--narrow .pkt-header__logo{gap:1rem}.pkt-header--narrow .pkt-header__logo-service{padding-top:.28rem;font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem}.pkt-header--narrow .pkt-header__logo-svg{height:3rem;width:5.8064516129rem}@media screen and (min-width: 0)and (max-width: 64rem){.pkt-header__menu-btn{border:0}.pkt-header__menu-btn .pkt-btn__text{display:none}}.pkt-header__user-btn{border-color:var(--color-yellow)}.pkt-header__actions{flex:1 0 auto;display:flex;justify-content:flex-end;align-items:stretch}.pkt-header__actions-row{list-style:none;padding-left:0;margin:0;display:flex;align-items:center;gap:2rem}.pkt-header__actions-row>li{padding:0}.pkt-header__dropdown{z-index:2;position:absolute;margin:0;margin-top:.75rem;right:0;left:0;padding-left:0;list-style:none;visibility:hidden;max-height:calc(100vh - 4.5rem);overflow-x:hidden;overflow-y:auto}@media screen and (min-width: 48rem){.pkt-header__dropdown{margin-top:1rem;left:auto;right:0;min-width:23rem;width:auto}}.pkt-header__dropdown>li{padding:2rem;background-color:var(--color-white)}.pkt-header__dropdown>li.footer{padding-top:1rem;padding-bottom:1rem}.pkt-header__dropdown>li:nth-child(odd){background-color:var(--color-gray-light)}.pkt-header__user-fullname{display:none}@media screen and (min-width: 80rem){.pkt-header__user-fullname{display:inline}}.pkt-header__user-shortname{display:inline}@media screen and (min-width: 80rem){.pkt-header__user-shortname{display:none}}@media screen and (min-width: 48rem){.pkt-header--has-dropdown{position:relative}}.pkt-header--has-dropdown>.pkt-btn:hover .pkt-btn--closed{--fg-color: var(--color-white)}.pkt-header--has-dropdown .pkt-btn--open{display:none}.pkt-header--has-dropdown .pkt-btn--closed{display:none}@media screen and (min-width: 80rem){.pkt-header--has-dropdown .pkt-btn--closed{display:inline-block}}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn{background-color:var(--color-active);border-color:var(--color-active);color:var(--color-white)}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--open{--fg-color: var(--color-white)}@media screen and (min-width: 80rem){.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--open{display:inline-block}}.pkt-header--has-dropdown.pkt-header--open-dropdown>.pkt-btn .pkt-btn--closed{display:none}.pkt-header--has-dropdown.pkt-header--open-dropdown .pkt-header__dropdown{visibility:visible}.pkt-user-menu p{margin:0}.pkt-user-menu__label{color:var(--color-grayscale-60);font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem}.pkt-user-menu__name{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.75rem}.pkt-user-menu__last-logged-in,.pkt-user-menu__org_number{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-user-menu .pkt-list{margin:0}.pkt-user-menu .pkt-list .pkt-link{text-decoration:none}.pkt-user-menu .pkt-list .pkt-link:hover{text-decoration:underline}.pkt-user-menu .pkt-list>li>a{grid-template-columns:1.5rem auto;gap:.5rem}.pkt-user-menu .pkt-list-horizontal{margin:0}