@oslokommune/punkt-css 16.2.0 → 16.3.0

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.
@@ -6,7 +6,7 @@
6
6
  @forward 'spacing';
7
7
 
8
8
  // Default icon path
9
- $icon-path: 'https://punkt-cdn.oslo.kommune.no/16.2/icons' !default;
9
+ $icon-path: 'https://punkt-cdn.oslo.kommune.no/16.3/icons' !default;
10
10
 
11
11
  // Borders
12
12
  $border-width: (
@@ -12,7 +12,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
12
12
  .pkt-modal {
13
13
  border: none;
14
14
  padding: 0;
15
- background-color: transparent;
15
+ background-color: var(--pkt-color-background-default);
16
16
  opacity: 0;
17
17
  display: none;
18
18
  transition:
@@ -65,10 +65,9 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
65
65
  max-height: 100vh;
66
66
  max-height: 100dvh;
67
67
  margin: 0;
68
- overflow-y: auto;
69
68
  .pkt-modal__wrapper {
70
- min-height: 100vh;
71
- min-height: 100dvh;
69
+ height: 100vh;
70
+ height: 100dvh;
72
71
  }
73
72
  &[open] {
74
73
  translate: 0 0;
@@ -127,14 +126,18 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
127
126
 
128
127
  .pkt-modal__container {
129
128
  padding-top: $pkt-modal-gap;
129
+ margin-top: -1px;
130
130
  background: var(--pkt-color-background-default);
131
- overflow-y: auto;
131
+ display: flex;
132
+ flex-direction: column;
133
+ min-height: 0;
134
+ overflow: hidden;
132
135
  }
133
136
 
134
137
  .pkt-modal__header {
135
138
  display: grid;
136
139
  grid-template-columns: 1fr 4rem;
137
- grid-template-rows: 4rem 1fr;
140
+ grid-template-rows: calc(4rem + 1px) 1fr;
138
141
  grid-template-areas:
139
142
  'header close'
140
143
  'header empty';
@@ -157,7 +160,6 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
157
160
 
158
161
  .pkt-modal__closeButton {
159
162
  grid-area: close;
160
-
161
163
  display: flex;
162
164
  flex-direction: row-reverse;
163
165
  align-self: flex-start;
@@ -214,6 +216,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
214
216
  flex-grow: 1;
215
217
  gap: map.get(variables.$spacing, 'size-16');
216
218
  overflow-y: auto;
219
+ overscroll-behavior: contain;
217
220
  padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-40');
218
221
  padding-top: 0;
219
222
  position: relative;
@@ -321,6 +324,7 @@ body.pkt-modal--open {
321
324
 
322
325
  .pkt-modal--noShadow {
323
326
  box-shadow: none;
327
+ background-color: transparent;
324
328
  }
325
329
 
326
330
  .pkt-modal--transparentBackdrop {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "16.2.0",
3
+ "version": "16.3.0",
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": "554167272be133d1486fb9b041b3afe0980c5069"
58
+ "gitHead": "3561a39e6329e3fc85d558d89cf20b58aa410d24"
59
59
  }