@oslokommune/punkt-css 9.5.3 → 9.5.4

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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/pkt-elements.css +4 -1
  3. package/dist/css/pkt-elements.min.css +1 -1
  4. package/dist/css/pkt.css +4 -1
  5. package/dist/css/pkt.min.css +1 -1
  6. package/dist/scss/elements/_checkbox-radio.scss +59 -46
  7. package/package.json +2 -2
package/dist/scss/elements/_checkbox-radio.scss CHANGED
@@ -43,8 +43,6 @@ $-module-name: 'pkt-input-check';
43
43
  flex-direction: column;
44
44
  row-gap: 1rem;
45
45
 
46
-
47
-
48
46
  &__input {
49
47
  display: flex;
50
48
  gap: 0.5rem;
@@ -62,7 +60,9 @@ $-module-name: 'pkt-input-check';
62
60
  }
63
61
 
64
62
  // Input states
65
- &:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label {
63
+ &:hover
64
+ > .pkt-input-check__input-checkbox:not(:disabled)
65
+ + .pkt-input-check__input-label {
66
66
  color: var(--pkt-color-input-text-hover);
67
67
  }
68
68
 
@@ -88,7 +88,7 @@ $-module-name: 'pkt-input-check';
88
88
  }
89
89
 
90
90
  // Checkbox states
91
- &:focus-visible:not(:disabled)+.pkt-input-check__input-label {
91
+ &:focus-visible:not(:disabled) + .pkt-input-check__input-label {
92
92
  color: var(--pkt-color-input-text-hover);
93
93
  }
94
94
 
@@ -113,9 +113,7 @@ $-module-name: 'pkt-input-check';
113
113
  outline-color: var(--pkt-color-input-border-hover);
114
114
  }
115
115
 
116
-
117
116
  &:checked {
118
-
119
117
  // Checkbox
120
118
  &[type='checkbox'] {
121
119
  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/check-medium.svg);
@@ -143,7 +141,8 @@ $-module-name: 'pkt-input-check';
143
141
  height: 24px;
144
142
  background-image: var(--svg);
145
143
  background-repeat: no-repeat;
146
- filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
144
+ filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
145
+ saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
147
146
  }
148
147
 
149
148
  // Radio
@@ -154,22 +153,23 @@ $-module-name: 'pkt-input-check';
154
153
  }
155
154
 
156
155
  // Checked states
157
- &[type="checkbox"]:focus-visible {
156
+ &[type='checkbox']:focus-visible {
158
157
  background-color: var(--pkt-color-input-border-active);
159
158
  }
160
159
 
161
- &[type="checkbox"]:hover {
160
+ &[type='checkbox']:hover {
162
161
  background-color: var(--pkt-color-input-border-hover);
163
162
  }
164
163
 
165
- &[type="radio"]:focus-visible {
164
+ &[type='radio']:focus-visible {
166
165
  background-color: var(--pkt-color-input-border-active);
167
166
  border: 3px solid var(--pkt-color-input-background-normal);
168
167
  outline: none;
169
- box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
168
+ box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
169
+ 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
170
170
  }
171
171
 
172
- &[type="radio"]:hover {
172
+ &[type='radio']:hover {
173
173
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
174
174
  background-color: var(--pkt-color-input-border-hover);
175
175
  }
@@ -184,7 +184,8 @@ $-module-name: 'pkt-input-check';
184
184
  }
185
185
 
186
186
  &[type='radio'] {
187
- box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
187
+ box-shadow: 0px 0px 0px 0.125rem
188
+ var(--pkt-color-input-border-disabled);
188
189
  background-color: var(--pkt-color-surface-default-gray);
189
190
  cursor: not-allowed;
190
191
  outline-color: var(--pkt-color-input-border-disabled);
@@ -198,66 +199,66 @@ $-module-name: 'pkt-input-check';
198
199
  }
199
200
 
200
201
  &[type='radio'] {
201
- box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
202
+ box-shadow: 0px 0px 0px 0.125rem
203
+ var(--pkt-color-input-border-disabled);
202
204
  background-color: var(--pkt-color-input-border-disabled);
203
205
  }
204
206
  }
205
207
 
206
- &:disabled+.pkt-inputwrapper {
208
+ &:disabled + .pkt-inputwrapper {
207
209
  color: var(--pkt-color-input-text-disabled);
208
210
  cursor: not-allowed;
209
211
  }
210
212
 
211
213
  //Modifiers checkbox and radio
212
214
  &--error {
213
-
214
215
  //Checkmark
215
216
  &[type='checkbox']:checked::after {
216
- filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
217
+ filter: brightness(0) saturate(100%) invert(15%) sepia(11%)
218
+ saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
217
219
  }
218
220
 
219
- &[type=checkbox],
220
- &[type=checkbox]:hover,
221
- &[type=checkbox]:focus-visible,
222
- &[type=checkbox]:checked,
223
- &[type=checkbox]:checked:focus-visible,
224
- &[type=checkbox]:checked:hover,
225
- &[type=checkbox]:active:not(:disabled),
226
- &:checked[type=checkbox]:checked::before {
221
+ &[type='checkbox'],
222
+ &[type='checkbox']:hover,
223
+ &[type='checkbox']:focus-visible,
224
+ &[type='checkbox']:checked,
225
+ &[type='checkbox']:checked:focus-visible,
226
+ &[type='checkbox']:checked:hover,
227
+ &[type='checkbox']:active:not(:disabled),
228
+ &:checked[type='checkbox']:checked::before {
227
229
  background-color: var(--pkt-color-surface-default-faded-red);
228
230
  border-color: var(--pkt-color-input-border-error);
229
231
  outline-color: var(--pkt-color-input-border-error);
230
232
  }
231
233
 
232
234
  // Radio
233
- &[type=radio],
234
- &[type=radio]:hover,
235
- &[type=radio]:focus-visible,
236
- &[type=radio]:hover,
237
- &[type=radio]:active:not(:disabled) {
235
+ &[type='radio'],
236
+ &[type='radio']:hover,
237
+ &[type='radio']:focus-visible,
238
+ &[type='radio']:hover,
239
+ &[type='radio']:active:not(:disabled) {
238
240
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
239
241
  background-color: var(--pkt-color-surface-default-faded-red);
240
242
  }
241
243
 
242
- &[type=radio]:checked,
243
- &[type=radio]:checked:focus-visible,
244
- &[type=radio]:checked:hover,
245
- &[type=radio]:checked:focus-visible+.pkt-input-check__input--tile {
244
+ &[type='radio']:checked,
245
+ &[type='radio']:checked:focus-visible,
246
+ &[type='radio']:checked:hover,
247
+ &[type='radio']:checked:focus-visible + .pkt-input-check__input--tile {
246
248
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
247
249
  background-color: var(--pkt-color-input-border-active);
248
250
  }
249
251
 
250
- &[type=radio]:checked:hover,
251
- &[type=radio]:checked:focus-visible {
252
+ &[type='radio']:checked:hover,
253
+ &[type='radio']:checked:focus-visible {
252
254
  background-color: var(--pkt-color-input-border-active);
253
255
  }
254
256
  }
255
257
  }
256
258
 
257
- // Modifiers input
259
+ // Modifiers input
258
260
  &--tile {
259
261
  border: 2px solid var(--pkt-color-border-subtle);
260
- padding: 1rem;
261
262
  width: 21.875rem;
262
263
  position: relative;
263
264
 
@@ -265,11 +266,18 @@ $-module-name: 'pkt-input-check';
265
266
  content: '';
266
267
  }
267
268
 
268
- &>.pkt-input-check__input-label {
269
+ & > .pkt-input-check__input-label {
270
+ padding: 1rem 1rem 1rem 0;
269
271
  width: 100%;
270
272
  }
271
273
 
272
- & .pkt-input-check__input-checkbox:checked:not(:disabled)+.pkt-input-check__input-label:before {
274
+ & > .pkt-input-check__input-checkbox {
275
+ margin: 1rem 0 1rem 1rem;
276
+ }
277
+
278
+ &
279
+ .pkt-input-check__input-checkbox:checked:not(:disabled)
280
+ + .pkt-input-check__input-label:before {
273
281
  content: '';
274
282
  position: absolute;
275
283
  left: -2px;
@@ -295,11 +303,15 @@ $-module-name: 'pkt-input-check';
295
303
  border-color: var(--pkt-color-border-states-hover);
296
304
  }
297
305
 
298
- &:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before {
306
+ &:hover
307
+ > .pkt-input-check__input-checkbox:checked
308
+ + .pkt-input-check__input-label:before {
299
309
  border-color: var(--pkt-color-border-states-hover);
300
310
  }
301
311
 
302
- &:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before {
312
+ &:active:not(:disabled)
313
+ > .pkt-input-check__input-checkbox:checked
314
+ + .pkt-input-check__input-label:before {
303
315
  border-color: var(--pkt-color-border-states-active);
304
316
  }
305
317
 
@@ -307,8 +319,9 @@ $-module-name: 'pkt-input-check';
307
319
  border-color: var(--pkt-color-border-states-disabled);
308
320
  }
309
321
 
310
-
311
- .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible {
322
+ .pkt-input-check__input-checkbox:not(
323
+ .pkt-input-check__input-checkbox--error
324
+ ):checked[type='radio']:focus-visible {
312
325
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
313
326
  }
314
327
 
@@ -320,8 +333,8 @@ $-module-name: 'pkt-input-check';
320
333
  }
321
334
 
322
335
  [data-mode='dark'] .#{$-module-name} {
323
-
324
336
  &__input-checkbox[type='checkbox']::after {
325
- filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
337
+ filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%)
338
+ hue-rotate(212deg) brightness(96%) contrast(94%);
326
339
  }
327
340
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "9.5.3",
3
+ "version": "9.5.4",
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": "d7d85983b33b29dfb25e902837a86fa8bff3f29c"
58
+ "gitHead": "cca44afdb59aedce5385dba04f9bf27eec8f05e0"
59
59
  }