@oslokommune/punkt-css 2.0.3 → 2.0.4
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 +15 -0
- package/dist/css/components/alert.css +59 -70
- package/dist/css/components/alert.min.css +1 -1
- package/dist/css/components/icon.css +0 -41
- package/dist/css/components/icon.min.css +1 -1
- package/dist/css/pkt-base.css +36 -0
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +59 -111
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt.css +95 -111
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_colors.scss +4 -0
- package/dist/scss/components/_alert.scss +64 -102
- package/dist/scss/components/_icon.scss +0 -54
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,21 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0](https://github.com/oslokommune/punkt/compare/v2.0.3...v3.0.0) (2023-03-13)
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
* [#684](https://github.com/oslokommune/punkt/issues/684) Endre CSS for Alert
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
* [#508](https://github.com/oslokommune/punkt/issues/508) Gjør Alerts innholdsslot mer fleksibel
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
* [#703](https://github.com/oslokommune/punkt/issues/703)
|
|
16
|
+
|
|
17
|
+
### Chores
|
|
18
|
+
* Oppdater hvordan Sass bygges
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
## [2.0.3](https://github.com/oslokommune/punkt/compare/v2.0.2...v2.0.3) (2023-03-09)
|
|
7
22
|
|
|
8
23
|
|
|
@@ -2,31 +2,65 @@
|
|
|
2
2
|
* Alert component
|
|
3
3
|
*/
|
|
4
4
|
.pkt-alert {
|
|
5
|
-
|
|
5
|
+
--pkt-alert-bc: var(--color-blue);
|
|
6
|
+
--pkt-alert-bg: var(--color-blue-60);
|
|
7
|
+
--pkt-alert-txt: var(--color-blue-dark);
|
|
8
|
+
--pkt-alert-icon-fg: var(--color-blue-dark);
|
|
9
|
+
--pkt-alert-close-fg: var(--color-blue-dark);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.pkt-alert--error {
|
|
13
|
+
--pkt-alert-bc: var(--color-red);
|
|
14
|
+
--pkt-alert-bg: var(--color-red-30);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pkt-alert--success {
|
|
18
|
+
--pkt-alert-bc: var(--color-green);
|
|
19
|
+
--pkt-alert-bg: var(--color-green-30);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.pkt-alert--warning {
|
|
23
|
+
--pkt-alert-bc: var(--color-yellow);
|
|
24
|
+
--pkt-alert-bg: var(--color-yellow-50);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.pkt-alert {
|
|
28
|
+
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
|
|
6
29
|
display: block;
|
|
7
|
-
overflow: hidden;
|
|
8
30
|
position: relative;
|
|
31
|
+
border-left: 0.25rem solid var(--pkt-alert-bc);
|
|
32
|
+
background-color: var(--pkt-alert-bg);
|
|
33
|
+
color: var(--pkt-alert-txt);
|
|
9
34
|
}
|
|
10
|
-
.pkt-
|
|
35
|
+
.pkt-alert__title {
|
|
11
36
|
font-size: 1.125rem;
|
|
12
|
-
font-weight:
|
|
37
|
+
font-weight: 500;
|
|
13
38
|
letter-spacing: -0.2px;
|
|
14
39
|
line-height: 1.5em;
|
|
15
|
-
margin
|
|
16
|
-
padding: 0;
|
|
40
|
+
margin: 0 0 1.5rem 2.5rem;
|
|
17
41
|
}
|
|
18
|
-
.pkt-alert__title {
|
|
42
|
+
.pkt-alert__close ~ .pkt-alert__title {
|
|
43
|
+
margin: 0 4rem 1.5rem 2.5rem;
|
|
44
|
+
}
|
|
45
|
+
.pkt-alert__text {
|
|
19
46
|
font-size: 1.125rem;
|
|
20
|
-
font-weight:
|
|
47
|
+
font-weight: 300;
|
|
21
48
|
letter-spacing: -0.2px;
|
|
22
49
|
line-height: 1.5em;
|
|
23
|
-
|
|
24
|
-
align-items: center;
|
|
25
|
-
margin-bottom: 1.5rem;
|
|
50
|
+
margin: 0 0 0 2.5rem;
|
|
26
51
|
}
|
|
27
|
-
.pkt-
|
|
28
|
-
|
|
29
|
-
|
|
52
|
+
.pkt-alert__text p {
|
|
53
|
+
margin-bottom: 1rem;
|
|
54
|
+
}
|
|
55
|
+
.pkt-alert__text p:last-of-type {
|
|
56
|
+
margin-bottom: 0;
|
|
57
|
+
}
|
|
58
|
+
.pkt-alert__close + .pkt-alert__text {
|
|
59
|
+
margin: 0 4rem 0 2.5rem;
|
|
60
|
+
}
|
|
61
|
+
.pkt-alert__title + .pkt-alert__text {
|
|
62
|
+
margin-left: 0;
|
|
63
|
+
margin-right: 0;
|
|
30
64
|
}
|
|
31
65
|
.pkt-alert__date {
|
|
32
66
|
font-size: 0.875rem;
|
|
@@ -35,62 +69,17 @@
|
|
|
35
69
|
line-height: 1.5em;
|
|
36
70
|
margin-top: 1.5rem;
|
|
37
71
|
}
|
|
38
|
-
.pkt-alert__close {
|
|
39
|
-
display: flex;
|
|
40
|
-
float: right;
|
|
41
|
-
margin-left: 1.5rem;
|
|
42
|
-
}
|
|
43
72
|
.pkt-alert__icon {
|
|
44
|
-
|
|
45
|
-
height:
|
|
46
|
-
width:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
border-left: 3px solid #034b45;
|
|
51
|
-
background-color: #f2fff3;
|
|
52
|
-
color: #034b45;
|
|
53
|
-
}
|
|
54
|
-
.pkt-alert--success.pkt-alert .pkt-alert__icon {
|
|
55
|
-
--bg-color: var(--color-green-dark);
|
|
56
|
-
--fg-color: var(--color-green-dark-5);
|
|
57
|
-
}
|
|
58
|
-
.pkt-alert--success.pkt-alert .pkt-alert__close {
|
|
59
|
-
--fg-color: var(--color-green-dark);
|
|
60
|
-
}
|
|
61
|
-
.pkt-alert--error {
|
|
62
|
-
border-left: 3px solid #96281c;
|
|
63
|
-
background-color: #fff3f2;
|
|
64
|
-
color: #96281c;
|
|
73
|
+
--fg-color: var(--pkt-alert-icon-fg);
|
|
74
|
+
height: 2rem;
|
|
75
|
+
width: 2rem;
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 22px;
|
|
78
|
+
left: 20px;
|
|
65
79
|
}
|
|
66
|
-
.pkt-
|
|
67
|
-
--
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
--fg-color: var(--color-error);
|
|
72
|
-
}
|
|
73
|
-
.pkt-alert--warning {
|
|
74
|
-
border-left: 3px solid #f9c66b;
|
|
75
|
-
background-color: #fef9f0;
|
|
76
|
-
color: #774c01;
|
|
77
|
-
}
|
|
78
|
-
.pkt-alert--warning.pkt-alert .pkt-alert__icon {
|
|
79
|
-
--bg-color: var(--color-yellow);
|
|
80
|
-
--fg-color: var(--color-blue-dark);
|
|
81
|
-
}
|
|
82
|
-
.pkt-alert--warning.pkt-alert .pkt-alert__close {
|
|
83
|
-
--fg-color: var(--color-warning);
|
|
84
|
-
}
|
|
85
|
-
.pkt-alert--info {
|
|
86
|
-
border-left: 3px solid #2a2859;
|
|
87
|
-
background-color: #f2f9ff;
|
|
88
|
-
color: #2a2859;
|
|
89
|
-
}
|
|
90
|
-
.pkt-alert--info.pkt-alert .pkt-alert__icon {
|
|
91
|
-
--bg-color: var(--color-blue);
|
|
92
|
-
--fg-color: var(--color-blue-dark);
|
|
93
|
-
}
|
|
94
|
-
.pkt-alert--info.pkt-alert .pkt-alert__close {
|
|
95
|
-
--fg-color: var(--color-blue-dark);
|
|
80
|
+
.pkt-alert__close {
|
|
81
|
+
--fg-color: var(--pkt-alert-close-fg);
|
|
82
|
+
position: absolute;
|
|
83
|
+
right: 1.125rem;
|
|
84
|
+
top: 0.625rem;
|
|
96
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-alert{
|
|
1
|
+
.pkt-alert{--pkt-alert-bc: var(--color-blue);--pkt-alert-bg: var(--color-blue-60);--pkt-alert-txt: var(--color-blue-dark);--pkt-alert-icon-fg: var(--color-blue-dark);--pkt-alert-close-fg: var(--color-blue-dark)}.pkt-alert--error{--pkt-alert-bc: var(--color-red);--pkt-alert-bg: var(--color-red-30)}.pkt-alert--success{--pkt-alert-bc: var(--color-green);--pkt-alert-bg: var(--color-green-30)}.pkt-alert--warning{--pkt-alert-bc: var(--color-yellow);--pkt-alert-bg: var(--color-yellow-50)}.pkt-alert{padding:1.5rem 1.5rem 1.5rem 1.25rem;display:block;position:relative;border-left:.25rem solid var(--pkt-alert-bc);background-color:var(--pkt-alert-bg);color:var(--pkt-alert-txt)}.pkt-alert__title{font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;margin:0 0 1.5rem 2.5rem}.pkt-alert__close~.pkt-alert__title{margin:0 4rem 1.5rem 2.5rem}.pkt-alert__text{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5em;margin:0 0 0 2.5rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__close+.pkt-alert__text{margin:0 4rem 0 2.5rem}.pkt-alert__title+.pkt-alert__text{margin-left:0;margin-right:0}.pkt-alert__date{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.5em;margin-top:1.5rem}.pkt-alert__icon{--fg-color: var(--pkt-alert-icon-fg);height:2rem;width:2rem;position:absolute;top:22px;left:20px}.pkt-alert__close{--fg-color: var(--pkt-alert-close-fg);position:absolute;right:1.125rem;top:.625rem}
|
|
@@ -19,45 +19,4 @@
|
|
|
19
19
|
.pkt-icon.large {
|
|
20
20
|
height: 4rem;
|
|
21
21
|
width: 4rem;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.pkt-font-icon {
|
|
25
|
-
display: inline-block;
|
|
26
|
-
font-family: 'Oslo Icons', sans-serif;
|
|
27
|
-
}
|
|
28
|
-
.pkt-font-icon--chevron-left::before {
|
|
29
|
-
content: "\e907";
|
|
30
|
-
}
|
|
31
|
-
.pkt-font-icon--chevron-right::before {
|
|
32
|
-
content: "\e908";
|
|
33
|
-
}
|
|
34
|
-
.pkt-font-icon--chevron-up::before {
|
|
35
|
-
content: "\e909";
|
|
36
|
-
}
|
|
37
|
-
.pkt-font-icon--chevron-down::before {
|
|
38
|
-
content: "\e906";
|
|
39
|
-
}
|
|
40
|
-
.pkt-font-icon--user::before {
|
|
41
|
-
content: "\e921";
|
|
42
|
-
}
|
|
43
|
-
.pkt-font-icon--menu::before {
|
|
44
|
-
content: "\e917";
|
|
45
|
-
}
|
|
46
|
-
.pkt-font-icon--close::before {
|
|
47
|
-
content: "\e923";
|
|
48
|
-
}
|
|
49
|
-
.pkt-font-icon--search::before {
|
|
50
|
-
content: "\e915";
|
|
51
|
-
}
|
|
52
|
-
.pkt-font-icon--trash::before {
|
|
53
|
-
content: "\e92d";
|
|
54
|
-
}
|
|
55
|
-
.pkt-font-icon--edit::before {
|
|
56
|
-
content: "\e949";
|
|
57
|
-
}
|
|
58
|
-
.pkt-font-icon--filter::before {
|
|
59
|
-
content: "\e910";
|
|
60
|
-
}
|
|
61
|
-
.pkt-font-icon--envelope::before {
|
|
62
|
-
content: "\e929";
|
|
63
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.pkt-icon{display:inline-flex;height:2rem;width:2rem}.pkt-icon.small{height:1rem;width:1rem}.pkt-icon.medium{height:1.5rem;width:1.5rem}.pkt-icon.large{height:4rem;width:4rem}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -79,12 +79,16 @@
|
|
|
79
79
|
--color-blue-dark-10: #d9e9f2;
|
|
80
80
|
--color-blue-5: #f1fdff;
|
|
81
81
|
--color-blue-10: #e5fcff;
|
|
82
|
+
--color-blue-60: #cdf5fb;
|
|
82
83
|
--color-green-dark-5: #f2fff3;
|
|
83
84
|
--color-green-dark-10: #d9f2ef;
|
|
84
85
|
--color-green-10: #e5ffe6;
|
|
86
|
+
--color-green-30: #c0f6e3;
|
|
85
87
|
--color-red-5: #fff3f2;
|
|
86
88
|
--color-red-10: #ffe8e5;
|
|
89
|
+
--color-red-30: #f9cfca;
|
|
87
90
|
--color-yellow-5: #fef9f0;
|
|
91
|
+
--color-yellow-50: #fae1b6;
|
|
88
92
|
--color-gray-light: #f9f9f9;
|
|
89
93
|
--color-gray: #f2f2f2;
|
|
90
94
|
--color-gray-dark: #2c2c2c;
|
|
@@ -318,6 +322,14 @@
|
|
|
318
322
|
color: #e5fcff !important;
|
|
319
323
|
}
|
|
320
324
|
|
|
325
|
+
.bg-color-blue-60 {
|
|
326
|
+
background-color: #cdf5fb !important;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.txt-color-blue-60 {
|
|
330
|
+
color: #cdf5fb !important;
|
|
331
|
+
}
|
|
332
|
+
|
|
321
333
|
.bg-color-green-dark-5 {
|
|
322
334
|
background-color: #f2fff3 !important;
|
|
323
335
|
}
|
|
@@ -342,6 +354,14 @@
|
|
|
342
354
|
color: #e5ffe6 !important;
|
|
343
355
|
}
|
|
344
356
|
|
|
357
|
+
.bg-color-green-30 {
|
|
358
|
+
background-color: #c0f6e3 !important;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.txt-color-green-30 {
|
|
362
|
+
color: #c0f6e3 !important;
|
|
363
|
+
}
|
|
364
|
+
|
|
345
365
|
.bg-color-red-5 {
|
|
346
366
|
background-color: #fff3f2 !important;
|
|
347
367
|
}
|
|
@@ -358,6 +378,14 @@
|
|
|
358
378
|
color: #ffe8e5 !important;
|
|
359
379
|
}
|
|
360
380
|
|
|
381
|
+
.bg-color-red-30 {
|
|
382
|
+
background-color: #f9cfca !important;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.txt-color-red-30 {
|
|
386
|
+
color: #f9cfca !important;
|
|
387
|
+
}
|
|
388
|
+
|
|
361
389
|
.bg-color-yellow-5 {
|
|
362
390
|
background-color: #fef9f0 !important;
|
|
363
391
|
}
|
|
@@ -366,6 +394,14 @@
|
|
|
366
394
|
color: #fef9f0 !important;
|
|
367
395
|
}
|
|
368
396
|
|
|
397
|
+
.bg-color-yellow-50 {
|
|
398
|
+
background-color: #fae1b6 !important;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.txt-color-yellow-50 {
|
|
402
|
+
color: #fae1b6 !important;
|
|
403
|
+
}
|
|
404
|
+
|
|
369
405
|
.bg-color-gray-light {
|
|
370
406
|
background-color: #f9f9f9 !important;
|
|
371
407
|
}
|