@oslokommune/punkt-css 11.4.9 → 11.5.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.
- package/CHANGELOG.md +107 -0
- package/dist/css/components/loader.css +52 -0
- package/dist/css/components/loader.min.css +1 -0
- package/dist/css/components/textinput.css +1 -1
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +54 -1
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +3 -3
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +57 -4
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/components/_index.scss +1 -0
- package/dist/scss/components/_loader.scss +58 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,113 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.5.1](https://github.com/oslokommune/punkt/compare/11.5.0...11.5.1) (2024-02-14)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* loader (#1509). * chore(loader): change status ++
|
|
18
|
+
|
|
19
|
+
* Oslo-former-loader aspect ratio
|
|
20
|
+
|
|
21
|
+
* Fikser choppy Chrome-ytelse på animerte SVG-er
|
|
22
|
+
|
|
23
|
+
---------
|
|
24
|
+
|
|
25
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Chores
|
|
29
|
+
Ingen
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## [11.5.0](https://github.com/oslokommune/punkt/compare/11.4.9...11.5.0) (2024-02-14)
|
|
35
|
+
|
|
36
|
+
### ⚠ BREAKING CHANGES
|
|
37
|
+
Ingen
|
|
38
|
+
|
|
39
|
+
### Features
|
|
40
|
+
* Loader, tre varianter (#1490). * feat(react): loader with variants (#1489)
|
|
41
|
+
- add react loader
|
|
42
|
+
- add size options: "small", "medium" and "large"
|
|
43
|
+
- add text option
|
|
44
|
+
- add accessibility labels
|
|
45
|
+
- add variants
|
|
46
|
+
- Note to self: always re-run the server when changing css (no hot reloading on the css)
|
|
47
|
+
|
|
48
|
+
* feat(react): loader
|
|
49
|
+
- Fix svg fetching
|
|
50
|
+
|
|
51
|
+
* feat(react): add tests and specs
|
|
52
|
+
- NB! Consider adding some test for checking if the svg is fetched properly if that is relevant
|
|
53
|
+
|
|
54
|
+
* La til inline, ryddet litt, fikset tester
|
|
55
|
+
|
|
56
|
+
* Branch heter "react" men jeg legger med Vue-versjonen også…
|
|
57
|
+
|
|
58
|
+
* Laget CSS-testview og ryddet litt i Vue-komponent
|
|
59
|
+
|
|
60
|
+
---------
|
|
61
|
+
|
|
62
|
+
Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
|
|
63
|
+
|
|
64
|
+
* Oppdatere Loader-specs
|
|
65
|
+
|
|
66
|
+
* Dokumentasjon-ressurser
|
|
67
|
+
|
|
68
|
+
* Fjernet innhold
|
|
69
|
+
|
|
70
|
+
* Aria-live burde ikke forsvinne selv om det ikke loades
|
|
71
|
+
|
|
72
|
+
* docs:#1473 loader dokumentasjon (#1492)
|
|
73
|
+
|
|
74
|
+
* docs:#1473 Lagt til bilder
|
|
75
|
+
|
|
76
|
+
* docs:#1473 Lagt til innhold
|
|
77
|
+
|
|
78
|
+
* docs:#1473 Oppdatert bildenavn
|
|
79
|
+
|
|
80
|
+
* docs:#1473 Tester GIF
|
|
81
|
+
|
|
82
|
+
* docs:#1473 Lagt til GIF
|
|
83
|
+
|
|
84
|
+
* docs:#1473 Oppdaterte bilder
|
|
85
|
+
|
|
86
|
+
* chore(docs): legg til kode dokumentasjon
|
|
87
|
+
|
|
88
|
+
* chore(docs): svg importering og UU docs
|
|
89
|
+
|
|
90
|
+
- Importerer spinner og loader SVGene slik at vi kan bruke de med <use>
|
|
91
|
+
- Oppdaterer UU docs
|
|
92
|
+
- Legger til CodeExample i loader index docs
|
|
93
|
+
|
|
94
|
+
* chore(docs): add doc about comp usage as wrapper
|
|
95
|
+
|
|
96
|
+
---------
|
|
97
|
+
|
|
98
|
+
Co-authored-by: My Thao Nguyen <my.nguyen@origo.oslo.kommune.no>
|
|
99
|
+
|
|
100
|
+
---------
|
|
101
|
+
|
|
102
|
+
Co-authored-by: My T. Nguyen <my.nguyen@origo.oslo.kommune.no>
|
|
103
|
+
Co-authored-by: Victoria Nerem <118815886+vicnerem@users.noreply.github.com>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
### Bug Fixes
|
|
107
|
+
Ingen
|
|
108
|
+
|
|
109
|
+
### Chores
|
|
110
|
+
Ingen
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
|
|
8
115
|
## [11.4.9](https://github.com/oslokommune/punkt/compare/11.4.8...11.4.9) (2024-02-06)
|
|
9
116
|
|
|
10
117
|
### ⚠ BREAKING CHANGES
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Loader component
|
|
3
|
+
*/
|
|
4
|
+
.pkt-loader {
|
|
5
|
+
width: fit-content;
|
|
6
|
+
text-align: center;
|
|
7
|
+
}
|
|
8
|
+
.pkt-loader--inline {
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
.pkt-loader > p {
|
|
12
|
+
margin: 1rem 0;
|
|
13
|
+
}
|
|
14
|
+
.pkt-loader .pkt-loader__shapes svg {
|
|
15
|
+
aspect-ratio: 600/165;
|
|
16
|
+
}
|
|
17
|
+
.pkt-loader--small > p {
|
|
18
|
+
font-size: 0.75rem;
|
|
19
|
+
font-weight: 300;
|
|
20
|
+
letter-spacing: -0.2px;
|
|
21
|
+
line-height: 1.25rem;
|
|
22
|
+
}
|
|
23
|
+
.pkt-loader--small .pkt-loader__svg svg {
|
|
24
|
+
height: 1rem;
|
|
25
|
+
}
|
|
26
|
+
.pkt-loader--small .pkt-loader__svg:not(.pkt-loader__shapes) svg {
|
|
27
|
+
width: 1rem;
|
|
28
|
+
}
|
|
29
|
+
.pkt-loader--medium > p {
|
|
30
|
+
font-size: 1rem;
|
|
31
|
+
font-weight: 300;
|
|
32
|
+
letter-spacing: -0.2px;
|
|
33
|
+
line-height: 1.5rem;
|
|
34
|
+
}
|
|
35
|
+
.pkt-loader--medium .pkt-loader__svg svg {
|
|
36
|
+
height: 2.5rem;
|
|
37
|
+
}
|
|
38
|
+
.pkt-loader--medium .pkt-loader__svg:not(.pkt-loader__shapes) svg {
|
|
39
|
+
width: 2.5rem;
|
|
40
|
+
}
|
|
41
|
+
.pkt-loader--large > p {
|
|
42
|
+
font-size: 1.125rem;
|
|
43
|
+
font-weight: 300;
|
|
44
|
+
letter-spacing: -0.2px;
|
|
45
|
+
line-height: 1.75rem;
|
|
46
|
+
}
|
|
47
|
+
.pkt-loader--large .pkt-loader__svg svg {
|
|
48
|
+
height: 3.5rem;
|
|
49
|
+
}
|
|
50
|
+
.pkt-loader--large .pkt-loader__svg:not(.pkt-loader__shapes) svg {
|
|
51
|
+
width: 3.5rem;
|
|
52
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pkt-loader{width:fit-content;text-align:center}.pkt-loader--inline{display:inline-block}.pkt-loader>p{margin:1rem 0}.pkt-loader .pkt-loader__shapes svg{aspect-ratio:600/165}.pkt-loader--small>p{font-size:.75rem;font-weight:300;letter-spacing:-0.2px;line-height:1.25rem}.pkt-loader--small .pkt-loader__svg svg{height:1rem}.pkt-loader--small .pkt-loader__svg:not(.pkt-loader__shapes) svg{width:1rem}.pkt-loader--medium>p{font-size:1rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5rem}.pkt-loader--medium .pkt-loader__svg svg{height:2.5rem}.pkt-loader--medium .pkt-loader__svg:not(.pkt-loader__shapes) svg{width:2.5rem}.pkt-loader--large>p{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem}.pkt-loader--large .pkt-loader__svg svg{height:3.5rem}.pkt-loader--large .pkt-loader__svg:not(.pkt-loader__shapes) svg{width:3.5rem}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
padding-right: 3rem;
|
|
75
75
|
}
|
|
76
76
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
77
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/11.
|
|
77
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.5/icons/chevron-thin-down.svg);
|
|
78
78
|
background-image: var(--svg);
|
|
79
79
|
background-repeat: no-repeat;
|
|
80
80
|
background-position: right 0.7rem top 50%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/11.
|
|
1
|
+
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/11.5/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly],[readonly].pkt-textinput__input{opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -13335,7 +13335,7 @@ a:active, a.pkt-link--active,
|
|
|
13335
13335
|
}
|
|
13336
13336
|
.pkt-link--external::after {
|
|
13337
13337
|
content: " ";
|
|
13338
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/11.
|
|
13338
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.5/icons/new-window-small.svg);
|
|
13339
13339
|
background-image: var(--svg);
|
|
13340
13340
|
background-repeat: no-repeat;
|
|
13341
13341
|
background-size: 18px 18px;
|