@oslokommune/punkt-css 9.2.2 → 9.2.5
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/inputwrapper.css +5 -7
- package/dist/css/components/inputwrapper.min.css +1 -1
- package/dist/css/components/textinput.css +11 -6
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-components.css +16 -13
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +12 -7
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +17 -14
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_inputwrapper.scss +9 -13
- package/dist/scss/elements/_input.scss +11 -7
- package/package.json +2 -2
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
align-items: flex-start;
|
|
13
13
|
gap: map.get(variables.$spacing, 'size-8');
|
|
14
14
|
|
|
15
|
-
>h2 {
|
|
15
|
+
> h2 {
|
|
16
16
|
font-size: inherit;
|
|
17
17
|
font-weight: inherit;
|
|
18
18
|
letter-spacing: inherit;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
gap: map.get(variables.$spacing, 'size-4');
|
|
31
31
|
@include typography.get-text('pkt-txt-14-light');
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
> * {
|
|
34
34
|
&:first-child {
|
|
35
35
|
margin-top: 0;
|
|
36
36
|
}
|
|
@@ -53,7 +53,8 @@
|
|
|
53
53
|
&-open {
|
|
54
54
|
display: block;
|
|
55
55
|
border-left: 2px solid var(--color-blue-dark);
|
|
56
|
-
padding: map.get(variables.$spacing, 'size-8')
|
|
56
|
+
padding: map.get(variables.$spacing, 'size-8')
|
|
57
|
+
map.get(variables.$spacing, 'size-16');
|
|
57
58
|
margin-bottom: map.get(variables.$spacing, 'size-4');
|
|
58
59
|
}
|
|
59
60
|
|
|
@@ -120,28 +121,23 @@
|
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
&--error {
|
|
123
|
-
|
|
124
124
|
.pkt-input,
|
|
125
125
|
.pkt-input-prefix,
|
|
126
126
|
.pkt-input-suffix,
|
|
127
|
-
.pkt-input-icon
|
|
128
|
-
border-color: var(--color-red);
|
|
129
|
-
}
|
|
130
|
-
|
|
127
|
+
.pkt-input-icon,
|
|
131
128
|
.pkt-input:hover,
|
|
129
|
+
.pkt-input__container:hover,
|
|
132
130
|
.pkt-input__container:hover .pkt-input,
|
|
133
131
|
.pkt-input__container:hover .pkt-input-prefix,
|
|
134
132
|
.pkt-input__container:hover .pkt-input-suffix,
|
|
135
|
-
.pkt-input__container:hover .pkt-input-icon
|
|
136
|
-
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.pkt-input:focus-within,
|
|
133
|
+
.pkt-input__container:hover .pkt-input-icon,
|
|
134
|
+
.pkt-input__container:focus-within,
|
|
140
135
|
.pkt-input__container:focus-within .pkt-input,
|
|
141
136
|
.pkt-input__container:focus-within .pkt-input-prefix,
|
|
142
137
|
.pkt-input__container:focus-within .pkt-input-suffix,
|
|
143
138
|
.pkt-input__container:focus-within .pkt-input-icon {
|
|
144
139
|
border-color: var(--color-red);
|
|
140
|
+
--focus-outline: var(--color-red);
|
|
145
141
|
}
|
|
146
142
|
}
|
|
147
143
|
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
padding-right: 3rem;
|
|
39
39
|
|
|
40
40
|
&:not([multiple]) {
|
|
41
|
-
|
|
41
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/9.2/icons/chevron-thin-down.svg);
|
|
42
|
+
background-image: var(--svg);
|
|
42
43
|
background-repeat: no-repeat;
|
|
43
44
|
background-position: right 0.7rem top 50%;
|
|
44
45
|
background-size: 1.5rem auto, 100%;
|
|
@@ -63,15 +64,15 @@
|
|
|
63
64
|
border-color: var(--color-hover);
|
|
64
65
|
}
|
|
65
66
|
|
|
66
|
-
&:focus-visible
|
|
67
|
+
&:focus-visible,
|
|
67
68
|
&.pkt-input__textinput--focus {
|
|
68
|
-
box-shadow: 0 0 0 2px var(--color-active);
|
|
69
69
|
border-color: var(--color-active);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
&:focus {
|
|
73
73
|
outline: none;
|
|
74
|
-
|
|
74
|
+
--focus-outline: var(--color-active);
|
|
75
|
+
box-shadow: 0 0 0 2px var(--focus-outline);
|
|
75
76
|
border-color: var(--color-active);
|
|
76
77
|
}
|
|
77
78
|
|
|
@@ -148,7 +149,8 @@
|
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
&--counter-error:focus {
|
|
151
|
-
|
|
152
|
+
--focus-outline: var(--color-red);
|
|
153
|
+
box-shadow: 0 0 0 2px var(--focus-outline);
|
|
152
154
|
}
|
|
153
155
|
|
|
154
156
|
&__container {
|
|
@@ -180,6 +182,7 @@
|
|
|
180
182
|
|
|
181
183
|
//states
|
|
182
184
|
& input:focus {
|
|
185
|
+
outline: none;
|
|
183
186
|
box-shadow: none;
|
|
184
187
|
}
|
|
185
188
|
|
|
@@ -191,12 +194,14 @@
|
|
|
191
194
|
}
|
|
192
195
|
|
|
193
196
|
&:focus-within {
|
|
194
|
-
outline:
|
|
197
|
+
--focus-outline: var(--color-active);
|
|
198
|
+
box-shadow: 0 0 0 2px var(--focus-outline);
|
|
195
199
|
|
|
196
200
|
.pkt-input,
|
|
197
201
|
.pkt-input-prefix,
|
|
198
202
|
.pkt-input-suffix,
|
|
199
203
|
.pkt-input-icon {
|
|
204
|
+
outline: 0;
|
|
200
205
|
border-color: var(--color-active);
|
|
201
206
|
}
|
|
202
207
|
}
|
|
@@ -216,7 +221,6 @@
|
|
|
216
221
|
|
|
217
222
|
// Dark mode
|
|
218
223
|
@at-root [data-mode='dark'] {
|
|
219
|
-
|
|
220
224
|
.pkt-input-prefix,
|
|
221
225
|
.pkt-input-suffix,
|
|
222
226
|
.pkt-input-icon {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.5",
|
|
4
4
|
"description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "5c986a43a0147d105240810ad902cfaec75bdcd9"
|
|
59
59
|
}
|