@oslokommune/punkt-css 12.34.0 → 12.34.1
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 +18 -26
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/pkt-components.css +18 -26
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +18 -26
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_alert.scss +26 -32
- package/package.json +2 -2
package/dist/css/pkt.css
CHANGED
|
@@ -19275,16 +19275,25 @@ pkt-alert {
|
|
|
19275
19275
|
display: block;
|
|
19276
19276
|
}
|
|
19277
19277
|
|
|
19278
|
+
.pkt-alert__grid {
|
|
19279
|
+
display: grid;
|
|
19280
|
+
grid-template-areas: "icon title close" "content content content" "date date date";
|
|
19281
|
+
grid-template-columns: min-content auto min-content;
|
|
19282
|
+
grid-row-gap: 1rem;
|
|
19283
|
+
grid-column-gap: 1.5rem;
|
|
19284
|
+
justify-items: left;
|
|
19285
|
+
align-items: center;
|
|
19286
|
+
}
|
|
19287
|
+
|
|
19278
19288
|
.pkt-alert {
|
|
19279
|
-
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
|
|
19280
|
-
display: block;
|
|
19281
|
-
position: relative;
|
|
19282
19289
|
border-left: 0.25rem solid var(--pkt-color-alert-bc);
|
|
19283
19290
|
background-color: var(--pkt-color-alert-bg);
|
|
19284
19291
|
color: var(--pkt-color-alert-txt);
|
|
19292
|
+
padding: 1rem 1.5rem;
|
|
19293
|
+
display: block;
|
|
19285
19294
|
}
|
|
19286
19295
|
.pkt-alert__title {
|
|
19287
|
-
|
|
19296
|
+
grid-area: title;
|
|
19288
19297
|
letter-spacing: -0.2px;
|
|
19289
19298
|
font-weight: 500;
|
|
19290
19299
|
font-size: 1.125rem;
|
|
@@ -19294,7 +19303,7 @@ pkt-alert {
|
|
|
19294
19303
|
margin: 0 4rem 1.5rem 2.5rem;
|
|
19295
19304
|
}
|
|
19296
19305
|
.pkt-alert__text {
|
|
19297
|
-
|
|
19306
|
+
grid-area: content;
|
|
19298
19307
|
overflow-wrap: break-word;
|
|
19299
19308
|
letter-spacing: -0.2px;
|
|
19300
19309
|
font-weight: 300;
|
|
@@ -19310,15 +19319,8 @@ pkt-alert {
|
|
|
19310
19319
|
.pkt-alert__text p:last-of-type {
|
|
19311
19320
|
margin-bottom: 0;
|
|
19312
19321
|
}
|
|
19313
|
-
.pkt-alert__close + .pkt-alert__text {
|
|
19314
|
-
margin: 0 4rem 0 2.5rem;
|
|
19315
|
-
}
|
|
19316
|
-
.pkt-alert__title + .pkt-alert__text {
|
|
19317
|
-
margin-left: 0;
|
|
19318
|
-
margin-right: 0;
|
|
19319
|
-
}
|
|
19320
19322
|
.pkt-alert__date {
|
|
19321
|
-
|
|
19323
|
+
grid-area: date;
|
|
19322
19324
|
letter-spacing: -0.2px;
|
|
19323
19325
|
font-weight: 300;
|
|
19324
19326
|
font-size: 0.875rem;
|
|
@@ -19328,37 +19330,27 @@ pkt-alert {
|
|
|
19328
19330
|
--fg-color: var(--pkt-color-alert-icon-fg);
|
|
19329
19331
|
height: 2rem;
|
|
19330
19332
|
width: 2rem;
|
|
19331
|
-
|
|
19332
|
-
top: 22px;
|
|
19333
|
-
left: 20px;
|
|
19333
|
+
grid-area: icon;
|
|
19334
19334
|
}
|
|
19335
19335
|
.pkt-alert__close {
|
|
19336
|
-
|
|
19337
|
-
right: 1.125rem;
|
|
19338
|
-
top: 0.625rem;
|
|
19336
|
+
grid-area: close;
|
|
19339
19337
|
}
|
|
19340
19338
|
.pkt-alert__close svg {
|
|
19341
19339
|
--fg-color: var(--pkt-color-alert-close-fg);
|
|
19342
19340
|
}
|
|
19343
19341
|
|
|
19344
19342
|
.pkt-alert--compact {
|
|
19345
|
-
padding: 0.75rem 1rem
|
|
19343
|
+
padding: 0.75rem 1rem;
|
|
19346
19344
|
}
|
|
19347
19345
|
.pkt-alert--compact .pkt-alert__icon {
|
|
19348
19346
|
width: 1.375rem;
|
|
19349
19347
|
height: 1.375rem;
|
|
19350
|
-
top: 0.81rem;
|
|
19351
|
-
left: 1.25rem;
|
|
19352
19348
|
}
|
|
19353
19349
|
.pkt-alert--compact .pkt-alert__text {
|
|
19354
19350
|
letter-spacing: -0.2px;
|
|
19355
19351
|
font-weight: 300;
|
|
19356
19352
|
font-size: 1rem;
|
|
19357
19353
|
line-height: 1.5rem;
|
|
19358
|
-
margin: 0 2.875rem;
|
|
19359
|
-
}
|
|
19360
|
-
.pkt-alert--compact .pkt-alert__close {
|
|
19361
|
-
top: 0.25rem;
|
|
19362
19354
|
}
|
|
19363
19355
|
|
|
19364
19356
|
/*
|