@oslokommune/punkt-css 13.5.0 → 13.5.12
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 +36 -0
- package/dist/css/components/combobox.css +17 -7
- package/dist/css/components/combobox.min.css +1 -1
- package/dist/css/elements/table.css +14 -3
- package/dist/css/elements/table.min.css +1 -1
- package/dist/css/pkt-components.css +17 -7
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +31 -10
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +14 -3
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +31 -10
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_combobox.scss +19 -7
- package/dist/scss/elements/_table.scss +17 -3
- package/package.json +2 -2
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
|
+
## [13.5.12](https://github.com/oslokommune/punkt/compare/13.5.11...13.5.12) (2025-09-11)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* Fix table styling (#3007).
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [13.5.11](https://github.com/oslokommune/punkt/compare/13.5.10...13.5.11) (2025-09-11)
|
|
27
|
+
|
|
28
|
+
### ⚠ BREAKING CHANGES
|
|
29
|
+
Ingen
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
Ingen
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
* Combobox visuelle og funksjonelle bugfikser (#3002). Løser: #2392 #2412 #2499 #2981
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Chores
|
|
39
|
+
Ingen
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
|
|
8
44
|
## [13.5.0](https://github.com/oslokommune/punkt/compare/13.4.2...13.5.0) (2025-09-05)
|
|
9
45
|
|
|
10
46
|
### ⚠ BREAKING CHANGES
|
|
@@ -19,7 +19,7 @@ pkt-combobox[fullwidth] {
|
|
|
19
19
|
}
|
|
20
20
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn {
|
|
21
21
|
position: absolute;
|
|
22
|
-
right: 0;
|
|
22
|
+
right: 0.25rem;
|
|
23
23
|
height: 100%;
|
|
24
24
|
min-width: 1.125rem;
|
|
25
25
|
min-height: 1.125rem;
|
|
@@ -29,8 +29,8 @@ pkt-combobox[fullwidth] {
|
|
|
29
29
|
}
|
|
30
30
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg {
|
|
31
31
|
transition: transform 0.1s ease-in-out;
|
|
32
|
-
width: 1.
|
|
33
|
-
height: 1.
|
|
32
|
+
width: 1.5rem;
|
|
33
|
+
height: 1.5rem;
|
|
34
34
|
}
|
|
35
35
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon {
|
|
36
36
|
transform: rotate(0deg);
|
|
@@ -47,14 +47,17 @@ pkt-combobox[fullwidth] {
|
|
|
47
47
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg {
|
|
48
48
|
transform: translateY(0.25rem);
|
|
49
49
|
}
|
|
50
|
+
.pkt-combobox__wrapper .pkt-combobox__value {
|
|
51
|
+
padding-left: 0.5rem;
|
|
52
|
+
}
|
|
50
53
|
.pkt-combobox__wrapper .pkt-combobox__input {
|
|
51
54
|
display: flex;
|
|
52
55
|
align-items: center;
|
|
53
56
|
position: relative;
|
|
54
57
|
margin: 0;
|
|
55
|
-
padding: 0.
|
|
58
|
+
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
|
56
59
|
border: 2px solid var(--pkt-color-border-default);
|
|
57
|
-
min-height:
|
|
60
|
+
min-height: 3rem;
|
|
58
61
|
gap: 0.375rem;
|
|
59
62
|
flex-wrap: wrap;
|
|
60
63
|
letter-spacing: -0.2px;
|
|
@@ -63,6 +66,12 @@ pkt-combobox[fullwidth] {
|
|
|
63
66
|
line-height: 1.75rem;
|
|
64
67
|
line-height: 1.25;
|
|
65
68
|
}
|
|
69
|
+
.pkt-combobox__wrapper .pkt-combobox__input-div {
|
|
70
|
+
display: contents;
|
|
71
|
+
}
|
|
72
|
+
.pkt-combobox__wrapper .pkt-combobox__input-div:first-child input {
|
|
73
|
+
padding-left: 0.5rem;
|
|
74
|
+
}
|
|
66
75
|
.pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
|
|
67
76
|
width: 100%;
|
|
68
77
|
}
|
|
@@ -87,13 +96,13 @@ pkt-combobox[fullwidth] {
|
|
|
87
96
|
color: inherit;
|
|
88
97
|
background: transparent;
|
|
89
98
|
letter-spacing: inherit;
|
|
90
|
-
line-height:
|
|
99
|
+
line-height: 1.4rem;
|
|
91
100
|
padding: 0;
|
|
92
101
|
margin: 0;
|
|
93
102
|
width: 0;
|
|
94
103
|
}
|
|
95
104
|
.pkt-combobox__wrapper .pkt-combobox__input input:focus, .pkt-combobox__wrapper .pkt-combobox__input input:active {
|
|
96
|
-
width:
|
|
105
|
+
width: 100%;
|
|
97
106
|
outline: none;
|
|
98
107
|
}
|
|
99
108
|
.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag {
|
|
@@ -110,6 +119,7 @@ pkt-combobox[fullwidth] {
|
|
|
110
119
|
.pkt-combobox__wrapper .pkt-combobox__placeholder {
|
|
111
120
|
color: var(--pkt-color-text-placeholder);
|
|
112
121
|
opacity: 1;
|
|
122
|
+
padding-left: 0.5rem;
|
|
113
123
|
}
|
|
114
124
|
.pkt-combobox__wrapper .pkt-listbox__open {
|
|
115
125
|
margin-top: 0.5rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
pkt-combobox{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth]{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right
|
|
1
|
+
pkt-combobox{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth]{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;transform:rotate(0deg);transition:transform 1s linear;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{transition:transform .1s ease-in-out;width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon{transform:rotate(0deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__value{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;border:2px solid var(--pkt-color-border-default);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input-div:first-child input{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-brand-warm-blue-1000);outline:none}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0;margin:0;width:0}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{width:100%;outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-left:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-top:.5rem}
|
|
@@ -13,6 +13,9 @@
|
|
|
13
13
|
font-size: 1.125rem;
|
|
14
14
|
font-weight: 500;
|
|
15
15
|
}
|
|
16
|
+
.pkt-table__header {
|
|
17
|
+
border-bottom: 2px solid var(--pkt-color-border-gray);
|
|
18
|
+
}
|
|
16
19
|
.pkt-table__body,
|
|
17
20
|
.pkt-table tbody {
|
|
18
21
|
text-align: left;
|
|
@@ -26,12 +29,12 @@
|
|
|
26
29
|
}
|
|
27
30
|
.pkt-table__header-cell,
|
|
28
31
|
.pkt-table th {
|
|
29
|
-
padding: 1rem;
|
|
32
|
+
padding: 0.75rem 1rem;
|
|
30
33
|
border-bottom: none;
|
|
31
34
|
}
|
|
32
35
|
.pkt-table__data-cell,
|
|
33
36
|
.pkt-table td {
|
|
34
|
-
padding: 1rem;
|
|
37
|
+
padding: 0.75rem 1rem;
|
|
35
38
|
border-bottom: none;
|
|
36
39
|
}
|
|
37
40
|
|
|
@@ -49,13 +52,17 @@
|
|
|
49
52
|
.pkt-table.pkt-table--compact th {
|
|
50
53
|
padding: 0.5rem 1rem;
|
|
51
54
|
}
|
|
55
|
+
.pkt-table.pkt-table--compact .pkt-table__data-cell,
|
|
56
|
+
.pkt-table.pkt-table--compact td {
|
|
57
|
+
padding: 0.5rem 1rem;
|
|
58
|
+
}
|
|
52
59
|
|
|
53
60
|
/**
|
|
54
61
|
* Skin: basic
|
|
55
62
|
*/
|
|
56
63
|
.pkt-table.pkt-table--basic .pkt-table__row,
|
|
57
64
|
.pkt-table.pkt-table--basic tr {
|
|
58
|
-
border-bottom:
|
|
65
|
+
border-bottom: 1px solid var(--pkt-color-border-gray);
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
/**
|
|
@@ -72,6 +79,10 @@
|
|
|
72
79
|
* Responsive Mobile view if class is set
|
|
73
80
|
*/
|
|
74
81
|
@media screen and (max-width: 48rem) {
|
|
82
|
+
.pkt-table.pkt-table--responsive .pkt-table__header {
|
|
83
|
+
border-bottom: none;
|
|
84
|
+
height: 0;
|
|
85
|
+
}
|
|
75
86
|
.pkt-table.pkt-table--responsive .pkt-table__row,
|
|
76
87
|
.pkt-table.pkt-table--responsive .pkt-table tr {
|
|
77
88
|
display: grid;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-table{width:100%;border-collapse:collapse}.pkt-table__header,.pkt-table thead,.pkt-table thead.pkt-table__header th{text-align:left;vertical-align:top;font-size:1.125rem;font-weight:500}.pkt-table__body,.pkt-table tbody{text-align:left;vertical-align:top;font-size:1rem;font-weight:300}.pkt-table__body .pkt-table__row:hover>.pkt-table__data-cell,.pkt-table tbody .pkt-table__row:hover>.pkt-table__data-cell{background:rgba(42,40,89,.01)}.pkt-table__header-cell,.pkt-table th{padding
|
|
1
|
+
.pkt-table{width:100%;border-collapse:collapse}.pkt-table__header,.pkt-table thead,.pkt-table thead.pkt-table__header th{text-align:left;vertical-align:top;font-size:1.125rem;font-weight:500}.pkt-table__header{border-bottom:2px solid var(--pkt-color-border-gray)}.pkt-table__body,.pkt-table tbody{text-align:left;vertical-align:top;font-size:1rem;font-weight:300}.pkt-table__body .pkt-table__row:hover>.pkt-table__data-cell,.pkt-table tbody .pkt-table__row:hover>.pkt-table__data-cell{background:rgba(42,40,89,.01)}.pkt-table__header-cell,.pkt-table th{padding:.75rem 1rem;border-bottom:none}.pkt-table__data-cell,.pkt-table td{padding:.75rem 1rem;border-bottom:none}.pkt-table__cell-wrapper{text-align:left;vertical-align:top;display:inline-flex;gap:.5rem}.pkt-table.pkt-table--compact .pkt-table__header-cell,.pkt-table.pkt-table--compact th{padding:.5rem 1rem}.pkt-table.pkt-table--compact .pkt-table__data-cell,.pkt-table.pkt-table--compact td{padding:.5rem 1rem}.pkt-table.pkt-table--basic .pkt-table__row,.pkt-table.pkt-table--basic tr{border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-table.pkt-table--zebra-blue .pkt-table__body .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--zebra-blue .pkt-table__body tr:nth-child(odd),.pkt-table.pkt-table--zebra-blue tbody .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--zebra-blue tbody tr:nth-child(odd){background:var(--pkt-color-surface-subtle-pale-blue)}@media screen and (max-width: 48rem){.pkt-table.pkt-table--responsive .pkt-table__header{border-bottom:none;height:0}.pkt-table.pkt-table--responsive .pkt-table__row,.pkt-table.pkt-table--responsive .pkt-table tr{display:grid;grid-template-columns:max-content 1fr;gap:1rem;padding:1rem 1rem}.pkt-table.pkt-table--responsive .pkt-table__row .pkt-table__header-cell,.pkt-table.pkt-table--responsive .pkt-table__row th,.pkt-table.pkt-table--responsive .pkt-table tr .pkt-table__header-cell,.pkt-table.pkt-table--responsive .pkt-table tr th{display:none}.pkt-table.pkt-table--responsive .pkt-table__cell-wrapper{grid-column:2/3}.pkt-table.pkt-table--responsive .pkt-table__data-cell,.pkt-table.pkt-table--responsive .pkt-table td{padding:.5rem 1rem;display:contents}.pkt-table.pkt-table--responsive .pkt-table__data-cell::before,.pkt-table.pkt-table--responsive .pkt-table td::before{grid-column:1/2;content:attr(data-label);font-weight:500}.pkt-table.pkt-table--responsive .pkt-table__compact .pkt-table__row,.pkt-table.pkt-table--responsive .pkt-table__compact tr{padding:.5rem .5rem;gap:.5rem}.pkt-table.pkt-table--responsive .pkt-table__zebra-blue .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--responsive .pkt-table__zebra-blue tr:nth-child(odd){background:var(--pkt-color-surface-subtle-pale-blue)}}
|
|
@@ -997,7 +997,7 @@ pkt-combobox[fullwidth] {
|
|
|
997
997
|
}
|
|
998
998
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn {
|
|
999
999
|
position: absolute;
|
|
1000
|
-
right: 0;
|
|
1000
|
+
right: 0.25rem;
|
|
1001
1001
|
height: 100%;
|
|
1002
1002
|
min-width: 1.125rem;
|
|
1003
1003
|
min-height: 1.125rem;
|
|
@@ -1007,8 +1007,8 @@ pkt-combobox[fullwidth] {
|
|
|
1007
1007
|
}
|
|
1008
1008
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg {
|
|
1009
1009
|
transition: transform 0.1s ease-in-out;
|
|
1010
|
-
width: 1.
|
|
1011
|
-
height: 1.
|
|
1010
|
+
width: 1.5rem;
|
|
1011
|
+
height: 1.5rem;
|
|
1012
1012
|
}
|
|
1013
1013
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon {
|
|
1014
1014
|
transform: rotate(0deg);
|
|
@@ -1025,14 +1025,17 @@ pkt-combobox[fullwidth] {
|
|
|
1025
1025
|
.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg {
|
|
1026
1026
|
transform: translateY(0.25rem);
|
|
1027
1027
|
}
|
|
1028
|
+
.pkt-combobox__wrapper .pkt-combobox__value {
|
|
1029
|
+
padding-left: 0.5rem;
|
|
1030
|
+
}
|
|
1028
1031
|
.pkt-combobox__wrapper .pkt-combobox__input {
|
|
1029
1032
|
display: flex;
|
|
1030
1033
|
align-items: center;
|
|
1031
1034
|
position: relative;
|
|
1032
1035
|
margin: 0;
|
|
1033
|
-
padding: 0.
|
|
1036
|
+
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
|
1034
1037
|
border: 2px solid var(--pkt-color-border-default);
|
|
1035
|
-
min-height:
|
|
1038
|
+
min-height: 3rem;
|
|
1036
1039
|
gap: 0.375rem;
|
|
1037
1040
|
flex-wrap: wrap;
|
|
1038
1041
|
letter-spacing: -0.2px;
|
|
@@ -1041,6 +1044,12 @@ pkt-combobox[fullwidth] {
|
|
|
1041
1044
|
line-height: 1.75rem;
|
|
1042
1045
|
line-height: 1.25;
|
|
1043
1046
|
}
|
|
1047
|
+
.pkt-combobox__wrapper .pkt-combobox__input-div {
|
|
1048
|
+
display: contents;
|
|
1049
|
+
}
|
|
1050
|
+
.pkt-combobox__wrapper .pkt-combobox__input-div:first-child input {
|
|
1051
|
+
padding-left: 0.5rem;
|
|
1052
|
+
}
|
|
1044
1053
|
.pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
|
|
1045
1054
|
width: 100%;
|
|
1046
1055
|
}
|
|
@@ -1065,13 +1074,13 @@ pkt-combobox[fullwidth] {
|
|
|
1065
1074
|
color: inherit;
|
|
1066
1075
|
background: transparent;
|
|
1067
1076
|
letter-spacing: inherit;
|
|
1068
|
-
line-height:
|
|
1077
|
+
line-height: 1.4rem;
|
|
1069
1078
|
padding: 0;
|
|
1070
1079
|
margin: 0;
|
|
1071
1080
|
width: 0;
|
|
1072
1081
|
}
|
|
1073
1082
|
.pkt-combobox__wrapper .pkt-combobox__input input:focus, .pkt-combobox__wrapper .pkt-combobox__input input:active {
|
|
1074
|
-
width:
|
|
1083
|
+
width: 100%;
|
|
1075
1084
|
outline: none;
|
|
1076
1085
|
}
|
|
1077
1086
|
.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag {
|
|
@@ -1088,6 +1097,7 @@ pkt-combobox[fullwidth] {
|
|
|
1088
1097
|
.pkt-combobox__wrapper .pkt-combobox__placeholder {
|
|
1089
1098
|
color: var(--pkt-color-text-placeholder);
|
|
1090
1099
|
opacity: 1;
|
|
1100
|
+
padding-left: 0.5rem;
|
|
1091
1101
|
}
|
|
1092
1102
|
.pkt-combobox__wrapper .pkt-listbox__open {
|
|
1093
1103
|
margin-top: 0.5rem;
|