@oslokommune/punkt-css 9.2.1 → 9.2.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.
@@ -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') map.get(variables.$spacing, 'size-16');
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
- border-color: var(--color-red);
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
+ outline-color: 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
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
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,13 @@
63
64
  border-color: var(--color-hover);
64
65
  }
65
66
 
66
- &:focus-visible+&-suffix,
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
- outline: none;
74
- box-shadow: 0 0 0 2px var(--color-active);
73
+ outline: 2px solid var(--color-active);
75
74
  border-color: var(--color-active);
76
75
  }
77
76
 
@@ -148,7 +147,7 @@
148
147
  }
149
148
 
150
149
  &--counter-error:focus {
151
- box-shadow: 0 0 0 2px var(--color-red);
150
+ outline: 2px solid var(--color-red);
152
151
  }
153
152
 
154
153
  &__container {
@@ -180,7 +179,7 @@
180
179
 
181
180
  //states
182
181
  & input:focus {
183
- box-shadow: none;
182
+ outline: none;
184
183
  }
185
184
 
186
185
  &:hover .pkt-input,
@@ -197,6 +196,7 @@
197
196
  .pkt-input-prefix,
198
197
  .pkt-input-suffix,
199
198
  .pkt-input-icon {
199
+ outline: 0;
200
200
  border-color: var(--color-active);
201
201
  }
202
202
  }
@@ -216,7 +216,6 @@
216
216
 
217
217
  // Dark mode
218
218
  @at-root [data-mode='dark'] {
219
-
220
219
  .pkt-input-prefix,
221
220
  .pkt-input-suffix,
222
221
  .pkt-input-icon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "9.2.1",
3
+ "version": "9.2.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",
@@ -20,7 +20,7 @@
20
20
  "preview": "astro preview"
21
21
  },
22
22
  "devDependencies": {
23
- "@oslokommune/punkt-assets": "^9.2.1",
23
+ "@oslokommune/punkt-assets": "^9.2.2",
24
24
  "astro": "^2.8.1",
25
25
  "edit-json-file": "^1.7.0",
26
26
  "fs-extra": "^11.1.0",
@@ -55,5 +55,5 @@
55
55
  "url": "https://github.com/oslokommune/punkt/issues"
56
56
  },
57
57
  "license": "MIT",
58
- "gitHead": "0347e89a19b3d9c1a711ecfd60f8a5c6c732eadb"
58
+ "gitHead": "dc9bd418fa7ef937b5a13eacd4db2736a4565318"
59
59
  }