@oslokommune/punkt-css 5.2.0 → 6.0.0

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 (20) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/CONTRIBUTING.md +0 -3
  3. package/dist/css/components/header.css +214 -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 +214 -76
  8. package/dist/css/pkt-components.min.css +1 -1
  9. package/dist/css/pkt-elements.css +23 -2
  10. package/dist/css/pkt-elements.min.css +1 -1
  11. package/dist/css/pkt.css +1084 -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 +230 -73
  16. package/dist/scss/elements/_checkbox-radio.scss +1 -1
  17. package/dist/scss/elements/_form.scss +3 -0
  18. package/dist/scss/elements/_list.scss +20 -0
  19. package/dist/scss/elements/_select.scss +1 -1
  20. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -5,6 +5,42 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [6.0.0](https://github.com/oslokommune/punkt/compare/5.2.3...6.0.0) (2023-08-22)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ * 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.
12
+
13
+
14
+ ### Features
15
+ Ingen
16
+
17
+ ### Bug Fixes
18
+ Ingen
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
26
+ ## [5.2.1](https://github.com/oslokommune/punkt/compare/5.2.0...5.2.1) (2023-08-14)
27
+
28
+ ### ⚠ BREAKING CHANGES
29
+ Ingen
30
+
31
+ ### Features
32
+ Ingen
33
+
34
+ ### Bug Fixes
35
+ * Fiks label på ny linje i UU-dokumentasjon sin sjekkliste (#1040).
36
+
37
+
38
+ ### Chores
39
+ Ingen
40
+
41
+ ---
42
+
43
+
8
44
  ## [5.2.0](https://github.com/oslokommune/punkt/compare/5.1.21...5.2.0) (2023-08-11)
9
45
 
10
46
  ### ⚠ 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,258 @@
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
+ right: 0;
141
+ left: 0;
142
+ padding-left: 0;
143
+ margin: 0;
144
+ list-style: none;
145
+ visibility: hidden;
146
+ max-height: calc(100vh - 4.5rem);
147
+ overflow-x: hidden;
148
+ overflow-y: auto;
93
149
  }
94
150
  @media screen and (min-width: 48rem) {
95
- .pkt-header__action-icon {
96
- height: 1.5rem;
97
- margin-left: 0.5rem;
98
- width: 1.5rem;
151
+ .pkt-header__dropdown {
152
+ left: auto;
153
+ right: 0;
154
+ min-width: 23rem;
155
+ width: auto;
99
156
  }
100
157
  }
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;
158
+ .pkt-header__dropdown > li {
159
+ padding: 2rem;
160
+ background-color: var(--color-white);
161
+ }
162
+ .pkt-header__dropdown > li.footer {
163
+ padding-top: 1rem;
164
+ padding-bottom: 1rem;
165
+ }
166
+ .pkt-header__dropdown > li:nth-child(odd) {
167
+ background-color: var(--color-gray-light);
168
+ }
169
+ .pkt-header__user-fullname {
170
+ display: none;
171
+ }
172
+ @media screen and (min-width: 80rem) {
173
+ .pkt-header__user-fullname {
174
+ display: inline;
175
+ }
176
+ }
177
+ .pkt-header__user-shortname {
178
+ display: inline;
179
+ }
180
+ @media screen and (min-width: 80rem) {
181
+ .pkt-header__user-shortname {
182
+ display: none;
183
+ }
108
184
  }
109
185
  @media screen and (min-width: 48rem) {
110
- .pkt-header .pkt-btn {
111
- margin: 0 0 0 2rem;
112
- padding: 0.75rem 1rem;
186
+ .pkt-header--has-dropdown {
187
+ position: relative;
188
+ }
189
+ }
190
+ .pkt-header--has-dropdown > .pkt-btn:hover .pkt-btn--closed {
191
+ --fg-color: var(--color-white);
192
+ }
193
+ .pkt-header--has-dropdown .pkt-btn--open {
194
+ display: none;
195
+ }
196
+ .pkt-header--has-dropdown .pkt-btn--closed {
197
+ display: none;
198
+ }
199
+ @media screen and (min-width: 80rem) {
200
+ .pkt-header--has-dropdown .pkt-btn--closed {
201
+ display: inline-block;
202
+ }
203
+ }
204
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn {
205
+ background-color: var(--color-active);
206
+ border-color: var(--color-active);
207
+ color: var(--color-white);
208
+ }
209
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
210
+ --fg-color: var(--color-white);
211
+ }
212
+ @media screen and (min-width: 80rem) {
213
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
214
+ display: inline-block;
113
215
  }
114
216
  }
115
- .pkt-header .pkt-btn:hover .pkt-header__action-icon {
116
- --fg-color: var(--color-hover);
217
+ .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--closed {
218
+ display: none;
219
+ }
220
+ .pkt-header--has-dropdown.pkt-header--open-dropdown .pkt-header__dropdown {
221
+ visibility: visible;
222
+ }
223
+
224
+ .pkt-user-menu p {
225
+ margin: 0;
226
+ }
227
+ .pkt-user-menu__label {
228
+ color: var(--color-grayscale-60);
229
+ font-size: 0.875rem;
230
+ font-weight: 500;
231
+ letter-spacing: -0.2px;
232
+ line-height: 1.375rem;
117
233
  }
118
- .pkt-header .pkt-btn__text--representing {
234
+ .pkt-user-menu__name {
119
235
  font-size: 1.125rem;
120
- font-weight: 300;
236
+ font-weight: 500;
121
237
  letter-spacing: -0.2px;
122
238
  line-height: 1.75rem;
239
+ }
240
+ .pkt-user-menu__last-logged-in, .pkt-user-menu__org_number {
241
+ font-size: 1rem;
242
+ font-weight: 300;
243
+ letter-spacing: -0.2px;
244
+ line-height: 1.5rem;
245
+ }
246
+ .pkt-user-menu .pkt-list {
247
+ margin: 0;
248
+ }
249
+ .pkt-user-menu .pkt-list .pkt-link {
250
+ text-decoration: none;
251
+ }
252
+ .pkt-user-menu .pkt-list .pkt-link:hover {
253
+ text-decoration: underline;
254
+ }
255
+ .pkt-user-menu .pkt-list > li > a {
256
+ grid-template-columns: 1.5rem auto;
257
+ gap: 0.5rem;
258
+ }
259
+ .pkt-user-menu .pkt-list-horizontal {
260
+ margin: 0;
123
261
  }
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;right:0;left:0;padding-left:0;margin: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{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}