@oslokommune/punkt-css 12.34.1 → 12.34.2
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 +18 -0
- package/dist/css/components/alert.css +29 -8
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/pkt-components.css +29 -8
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +29 -8
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_alert.scss +32 -12
- package/package.json +2 -2
package/dist/css/pkt.css
CHANGED
|
@@ -19277,7 +19277,6 @@ pkt-alert {
|
|
|
19277
19277
|
|
|
19278
19278
|
.pkt-alert__grid {
|
|
19279
19279
|
display: grid;
|
|
19280
|
-
grid-template-areas: "icon title close" "content content content" "date date date";
|
|
19281
19280
|
grid-template-columns: min-content auto min-content;
|
|
19282
19281
|
grid-row-gap: 1rem;
|
|
19283
19282
|
grid-column-gap: 1.5rem;
|
|
@@ -19285,6 +19284,17 @@ pkt-alert {
|
|
|
19285
19284
|
align-items: center;
|
|
19286
19285
|
}
|
|
19287
19286
|
|
|
19287
|
+
.pkt-alert__noTitle .pkt-alert__text {
|
|
19288
|
+
grid-row: 1/2;
|
|
19289
|
+
grid-column: 2/3;
|
|
19290
|
+
}
|
|
19291
|
+
@media (max-width: 768px) {
|
|
19292
|
+
.pkt-alert__noTitle .pkt-alert__text {
|
|
19293
|
+
grid-row: 2/3;
|
|
19294
|
+
grid-column: 1/-1;
|
|
19295
|
+
}
|
|
19296
|
+
}
|
|
19297
|
+
|
|
19288
19298
|
.pkt-alert {
|
|
19289
19299
|
border-left: 0.25rem solid var(--pkt-color-alert-bc);
|
|
19290
19300
|
background-color: var(--pkt-color-alert-bg);
|
|
@@ -19293,17 +19303,15 @@ pkt-alert {
|
|
|
19293
19303
|
display: block;
|
|
19294
19304
|
}
|
|
19295
19305
|
.pkt-alert__title {
|
|
19296
|
-
grid-
|
|
19306
|
+
grid-column: 2/3;
|
|
19297
19307
|
letter-spacing: -0.2px;
|
|
19298
19308
|
font-weight: 500;
|
|
19299
19309
|
font-size: 1.125rem;
|
|
19300
19310
|
line-height: 1.75rem;
|
|
19301
19311
|
}
|
|
19302
|
-
.pkt-alert__close ~ .pkt-alert__title {
|
|
19303
|
-
margin: 0 4rem 1.5rem 2.5rem;
|
|
19304
|
-
}
|
|
19305
19312
|
.pkt-alert__text {
|
|
19306
|
-
grid-
|
|
19313
|
+
grid-column: 1/-1;
|
|
19314
|
+
grid-row: 2/3;
|
|
19307
19315
|
overflow-wrap: break-word;
|
|
19308
19316
|
letter-spacing: -0.2px;
|
|
19309
19317
|
font-weight: 300;
|
|
@@ -19320,7 +19328,8 @@ pkt-alert {
|
|
|
19320
19328
|
margin-bottom: 0;
|
|
19321
19329
|
}
|
|
19322
19330
|
.pkt-alert__date {
|
|
19323
|
-
grid-
|
|
19331
|
+
grid-column: 1/-1;
|
|
19332
|
+
grid-row: 3/4;
|
|
19324
19333
|
letter-spacing: -0.2px;
|
|
19325
19334
|
font-weight: 300;
|
|
19326
19335
|
font-size: 0.875rem;
|
|
@@ -19331,9 +19340,12 @@ pkt-alert {
|
|
|
19331
19340
|
height: 2rem;
|
|
19332
19341
|
width: 2rem;
|
|
19333
19342
|
grid-area: icon;
|
|
19343
|
+
grid-row: 1/2;
|
|
19344
|
+
grid-column: 1/2;
|
|
19334
19345
|
}
|
|
19335
19346
|
.pkt-alert__close {
|
|
19336
|
-
grid-
|
|
19347
|
+
grid-column: 3/4;
|
|
19348
|
+
grid-row: 1/2;
|
|
19337
19349
|
}
|
|
19338
19350
|
.pkt-alert__close svg {
|
|
19339
19351
|
--fg-color: var(--pkt-color-alert-close-fg);
|
|
@@ -19342,10 +19354,19 @@ pkt-alert {
|
|
|
19342
19354
|
.pkt-alert--compact {
|
|
19343
19355
|
padding: 0.75rem 1rem;
|
|
19344
19356
|
}
|
|
19357
|
+
.pkt-alert--compact .pkt-alert__grid {
|
|
19358
|
+
gap: 0.5rem;
|
|
19359
|
+
}
|
|
19345
19360
|
.pkt-alert--compact .pkt-alert__icon {
|
|
19346
19361
|
width: 1.375rem;
|
|
19347
19362
|
height: 1.375rem;
|
|
19348
19363
|
}
|
|
19364
|
+
.pkt-alert--compact .pkt-alert__title {
|
|
19365
|
+
letter-spacing: -0.2px;
|
|
19366
|
+
font-weight: 500;
|
|
19367
|
+
font-size: 1rem;
|
|
19368
|
+
line-height: 1.5rem;
|
|
19369
|
+
}
|
|
19349
19370
|
.pkt-alert--compact .pkt-alert__text {
|
|
19350
19371
|
letter-spacing: -0.2px;
|
|
19351
19372
|
font-weight: 300;
|