@oslokommune/punkt-css 16.2.0 → 16.4.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.
- package/CHANGELOG.md +34 -0
- package/dist/css/components/backlink.css +4 -0
- package/dist/css/components/backlink.min.css +1 -1
- package/dist/css/components/modal.css +11 -6
- package/dist/css/components/modal.min.css +1 -1
- package/dist/css/components/textinput.css +1 -1
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/elements/checkbox-radio.css +3 -3
- package/dist/css/elements/checkbox-radio.min.css +1 -1
- package/dist/css/elements/input.css +1 -1
- package/dist/css/elements/input.min.css +1 -1
- package/dist/css/elements/select.css +1 -1
- package/dist/css/elements/select.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +16 -7
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +20 -11
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +4 -4
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +20 -11
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/components/_backlink.scss +4 -0
- package/dist/scss/components/_modal.scss +11 -7
- package/package.json +2 -2
|
@@ -352,6 +352,10 @@ pkt-alert {
|
|
|
352
352
|
/*
|
|
353
353
|
* Back link component
|
|
354
354
|
*/
|
|
355
|
+
.pkt-back-link .pkt-link {
|
|
356
|
+
display: inline-flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
}
|
|
355
359
|
.pkt-back-link__icon {
|
|
356
360
|
flex-basis: 1rem;
|
|
357
361
|
}
|
|
@@ -4100,7 +4104,7 @@ pkt-listbox {
|
|
|
4100
4104
|
.pkt-modal {
|
|
4101
4105
|
border: none;
|
|
4102
4106
|
padding: 0;
|
|
4103
|
-
background-color:
|
|
4107
|
+
background-color: var(--pkt-color-background-default);
|
|
4104
4108
|
opacity: 0;
|
|
4105
4109
|
display: none;
|
|
4106
4110
|
transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out, overlay 0.2s ease-in-out allow-discrete, display 0.2s ease-in-out allow-discrete;
|
|
@@ -4154,11 +4158,10 @@ pkt-listbox {
|
|
|
4154
4158
|
max-height: 100vh;
|
|
4155
4159
|
max-height: 100dvh;
|
|
4156
4160
|
margin: 0;
|
|
4157
|
-
overflow-y: auto;
|
|
4158
4161
|
}
|
|
4159
4162
|
.pkt-modal__drawer .pkt-modal__wrapper {
|
|
4160
|
-
|
|
4161
|
-
|
|
4163
|
+
height: 100vh;
|
|
4164
|
+
height: 100dvh;
|
|
4162
4165
|
}
|
|
4163
4166
|
.pkt-modal__drawer[open] {
|
|
4164
4167
|
translate: 0 0;
|
|
@@ -4213,13 +4216,17 @@ pkt-listbox {
|
|
|
4213
4216
|
}
|
|
4214
4217
|
.pkt-modal .pkt-modal__container {
|
|
4215
4218
|
padding-top: 2rem;
|
|
4219
|
+
margin-top: -1px;
|
|
4216
4220
|
background: var(--pkt-color-background-default);
|
|
4217
|
-
|
|
4221
|
+
display: flex;
|
|
4222
|
+
flex-direction: column;
|
|
4223
|
+
min-height: 0;
|
|
4224
|
+
overflow: hidden;
|
|
4218
4225
|
}
|
|
4219
4226
|
.pkt-modal .pkt-modal__header {
|
|
4220
4227
|
display: grid;
|
|
4221
4228
|
grid-template-columns: 1fr 4rem;
|
|
4222
|
-
grid-template-rows: 4rem 1fr;
|
|
4229
|
+
grid-template-rows: calc(4rem + 1px) 1fr;
|
|
4223
4230
|
grid-template-areas: "header close" "header empty";
|
|
4224
4231
|
justify-content: flex-start;
|
|
4225
4232
|
width: 100%;
|
|
@@ -4286,6 +4293,7 @@ pkt-listbox {
|
|
|
4286
4293
|
flex-grow: 1;
|
|
4287
4294
|
gap: 1rem;
|
|
4288
4295
|
overflow-y: auto;
|
|
4296
|
+
overscroll-behavior: contain;
|
|
4289
4297
|
padding: 2rem 2.5rem;
|
|
4290
4298
|
padding-top: 0;
|
|
4291
4299
|
position: relative;
|
|
@@ -4361,6 +4369,7 @@ body.pkt-modal--open {
|
|
|
4361
4369
|
}
|
|
4362
4370
|
.pkt-modal--noShadow {
|
|
4363
4371
|
box-shadow: none;
|
|
4372
|
+
background-color: transparent;
|
|
4364
4373
|
}
|
|
4365
4374
|
|
|
4366
4375
|
.pkt-modal--transparentBackdrop::backdrop, .pkt-modal--transparentBackdrop[open]::backdrop {
|
|
@@ -5490,7 +5499,7 @@ pkt-select {
|
|
|
5490
5499
|
padding-right: 3rem;
|
|
5491
5500
|
}
|
|
5492
5501
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
5493
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/16.
|
|
5502
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/16.4/icons/chevron-thin-down.svg);
|
|
5494
5503
|
background-image: var(--svg);
|
|
5495
5504
|
background-repeat: no-repeat;
|
|
5496
5505
|
background-position: right 0.7rem top 50%;
|