@oslokommune/punkt-css 17.1.0 → 17.1.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 +36 -0
- package/CONTRIBUTING.md +1 -1
- package/dist/css/components/messagebox.css +6 -3
- package/dist/css/components/messagebox.min.css +1 -1
- package/dist/css/pkt-components.css +6 -3
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +6 -3
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt.css +6 -3
- package/dist/css/pkt.layer.css +6 -3
- package/dist/css/pkt.layer.min.css +1 -1
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_messagebox.scss +16 -16
- package/package.json +4 -4
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
@use '../abstracts/mixins/breakpoints' as *;
|
|
7
7
|
@use '../abstracts/' as *;
|
|
8
8
|
|
|
9
|
-
$-module-name: 'pkt-messagebox';
|
|
10
|
-
|
|
11
9
|
pkt-messagebox {
|
|
12
10
|
display: block;
|
|
13
11
|
}
|
|
@@ -18,28 +16,28 @@ $-messagebox-spacing-compact: map.get(variables.$spacing, 'size-16');
|
|
|
18
16
|
$-border-thickness: map.get(variables.$spacing, 'size-4');
|
|
19
17
|
|
|
20
18
|
// default is "info"
|
|
21
|
-
|
|
19
|
+
.pkt-messagebox {
|
|
22
20
|
--pkt-color-messagebox-bc: var(--pkt-color-border-beige);
|
|
23
21
|
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
|
|
24
22
|
--pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
|
|
25
23
|
}
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
.pkt-messagebox--red {
|
|
28
26
|
--pkt-color-messagebox-bc: var(--pkt-color-border-red);
|
|
29
27
|
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
|
|
30
28
|
}
|
|
31
29
|
|
|
32
|
-
|
|
30
|
+
.pkt-messagebox--green {
|
|
33
31
|
--pkt-color-messagebox-bc: var(--pkt-color-border-green);
|
|
34
32
|
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
|
|
35
33
|
}
|
|
36
34
|
|
|
37
|
-
|
|
35
|
+
.pkt-messagebox--blue {
|
|
38
36
|
--pkt-color-messagebox-bc: var(--pkt-color-border-blue);
|
|
39
37
|
--pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
|
|
40
38
|
}
|
|
41
39
|
|
|
42
|
-
|
|
40
|
+
.pkt-messagebox {
|
|
43
41
|
padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing
|
|
44
42
|
calc($-messagebox-spacing - $-border-thickness);
|
|
45
43
|
|
|
@@ -49,7 +47,7 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
|
|
|
49
47
|
overflow-wrap: break-word;
|
|
50
48
|
overflow: hidden;
|
|
51
49
|
|
|
52
|
-
&:not(:has(
|
|
50
|
+
&:not(:has(.pkt-messagebox__title)):has(.pkt-messagebox__close) {
|
|
53
51
|
grid-template: 'text close';
|
|
54
52
|
grid-template-columns: minmax(0, 1fr) 40px;
|
|
55
53
|
}
|
|
@@ -69,10 +67,11 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
|
|
|
69
67
|
margin: 0;
|
|
70
68
|
@include get-text('pkt-txt-18-light');
|
|
71
69
|
|
|
72
|
-
p
|
|
70
|
+
p,
|
|
71
|
+
ul {
|
|
73
72
|
margin-block-end: map.get(variables.$spacing, 'size-16');
|
|
74
73
|
|
|
75
|
-
&:last-
|
|
74
|
+
&:last-child {
|
|
76
75
|
margin-block-end: 0;
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -88,18 +87,19 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
|
|
|
88
87
|
}
|
|
89
88
|
|
|
90
89
|
// Compact variant
|
|
91
|
-
|
|
92
|
-
padding: $-messagebox-spacing-compact $-messagebox-spacing
|
|
93
|
-
calc($-messagebox-spacing
|
|
94
|
-
|
|
90
|
+
.pkt-messagebox--compact {
|
|
91
|
+
padding: $-messagebox-spacing-compact $-messagebox-spacing $-messagebox-spacing-compact
|
|
92
|
+
calc($-messagebox-spacing - $-border-thickness);
|
|
93
|
+
.pkt-messagebox__title {
|
|
95
94
|
@include get-text('pkt-txt-16-medium');
|
|
95
|
+
margin-block-end: $-messagebox-spacing-compact;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
.pkt-messagebox__text {
|
|
99
99
|
@include get-text('pkt-txt-16-light');
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
|
|
102
|
+
.pkt-messagebox__close > .pkt-btn {
|
|
103
103
|
top: -15px;
|
|
104
104
|
}
|
|
105
105
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "17.1.
|
|
3
|
+
"version": "17.1.2",
|
|
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",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@oslokommune/punkt-assets": "^17.
|
|
28
|
+
"@oslokommune/punkt-assets": "^17.1.2",
|
|
29
29
|
"edit-json-file": "^1.8.1",
|
|
30
30
|
"fs-extra": "^11.3.5",
|
|
31
31
|
"prettier": "^3.8.4",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@oslokommune/punkt-assets": ">=3.1.0"
|
|
38
38
|
},
|
|
39
39
|
"engines": {
|
|
40
|
-
"node": "
|
|
40
|
+
"node": "^22.19.0 || ^24.0.0 || ^26.0.0"
|
|
41
41
|
},
|
|
42
42
|
"private": false,
|
|
43
43
|
"publishConfig": {
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"dependencies": {
|
|
63
63
|
"astro": "^7.2.0"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "51f7f8d53f738720e275a3d9492b26f7ff16b88a"
|
|
66
66
|
}
|