@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
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
$-module-name: 'pkt-alert';
|
|
10
10
|
|
|
11
11
|
// Spacing
|
|
12
|
+
$-spacing-8: map.get(variables.$spacing, 'size-8');
|
|
12
13
|
$-spacing-12: map.get(variables.$spacing, 'size-12');
|
|
13
14
|
$-spacing-16: map.get(variables.$spacing, 'size-16');
|
|
14
15
|
$-spacing-24: map.get(variables.$spacing, 'size-24');
|
|
@@ -50,10 +51,6 @@ pkt-alert {
|
|
|
50
51
|
|
|
51
52
|
.pkt-alert__grid {
|
|
52
53
|
display: grid;
|
|
53
|
-
grid-template-areas:
|
|
54
|
-
'icon title close'
|
|
55
|
-
'content content content'
|
|
56
|
-
'date date date';
|
|
57
54
|
grid-template-columns: min-content auto min-content;
|
|
58
55
|
grid-row-gap: $-spacing-16;
|
|
59
56
|
grid-column-gap: $-spacing-24;
|
|
@@ -61,6 +58,20 @@ pkt-alert {
|
|
|
61
58
|
align-items: center;
|
|
62
59
|
}
|
|
63
60
|
|
|
61
|
+
.pkt-alert__noTitle {
|
|
62
|
+
.pkt-alert__text {
|
|
63
|
+
grid-row: 1/2;
|
|
64
|
+
grid-column: 2/3;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (max-width: 768px) {
|
|
68
|
+
.pkt-alert__text {
|
|
69
|
+
grid-row: 2 / 3;
|
|
70
|
+
grid-column: 1 / -1;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
64
75
|
.pkt-alert {
|
|
65
76
|
border-left: $-border-thickness solid var(--pkt-color-alert-bc);
|
|
66
77
|
background-color: var(--pkt-color-alert-bg);
|
|
@@ -70,16 +81,13 @@ pkt-alert {
|
|
|
70
81
|
display: block;
|
|
71
82
|
|
|
72
83
|
&__title {
|
|
73
|
-
grid-
|
|
84
|
+
grid-column: 2 / 3;
|
|
74
85
|
@include get-text('pkt-txt-18-medium');
|
|
75
86
|
}
|
|
76
87
|
|
|
77
|
-
&__close ~ &__title {
|
|
78
|
-
margin: 0 4rem $-spacing-24 2.5rem;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
88
|
&__text {
|
|
82
|
-
grid-
|
|
89
|
+
grid-column: 1 / -1;
|
|
90
|
+
grid-row: 2 / 3;
|
|
83
91
|
overflow-wrap: break-word;
|
|
84
92
|
|
|
85
93
|
@include get-text('pkt-txt-18-light');
|
|
@@ -98,7 +106,8 @@ pkt-alert {
|
|
|
98
106
|
}
|
|
99
107
|
|
|
100
108
|
&__date {
|
|
101
|
-
grid-
|
|
109
|
+
grid-column: 1 / -1;
|
|
110
|
+
grid-row: 3 / 4;
|
|
102
111
|
@include get-text('pkt-txt-14-light');
|
|
103
112
|
}
|
|
104
113
|
|
|
@@ -107,10 +116,13 @@ pkt-alert {
|
|
|
107
116
|
height: 2rem;
|
|
108
117
|
width: 2rem;
|
|
109
118
|
grid-area: icon;
|
|
119
|
+
grid-row: 1 / 2;
|
|
120
|
+
grid-column: 1 / 2;
|
|
110
121
|
}
|
|
111
122
|
|
|
112
123
|
&__close {
|
|
113
|
-
grid-
|
|
124
|
+
grid-column: 3/4;
|
|
125
|
+
grid-row: 1/2;
|
|
114
126
|
|
|
115
127
|
& svg {
|
|
116
128
|
--fg-color: var(--pkt-color-alert-close-fg);
|
|
@@ -121,11 +133,19 @@ pkt-alert {
|
|
|
121
133
|
.pkt-alert--compact {
|
|
122
134
|
padding: $-spacing-12 $-spacing-16;
|
|
123
135
|
|
|
136
|
+
.pkt-alert__grid {
|
|
137
|
+
gap: $-spacing-8;
|
|
138
|
+
}
|
|
139
|
+
|
|
124
140
|
.pkt-alert__icon {
|
|
125
141
|
width: 1.375rem;
|
|
126
142
|
height: 1.375rem;
|
|
127
143
|
}
|
|
128
144
|
|
|
145
|
+
.pkt-alert__title {
|
|
146
|
+
@include get-text('pkt-txt-16-medium');
|
|
147
|
+
}
|
|
148
|
+
|
|
129
149
|
.pkt-alert__text {
|
|
130
150
|
@include get-text('pkt-txt-16-light');
|
|
131
151
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "12.34.
|
|
3
|
+
"version": "12.34.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",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
55
55
|
},
|
|
56
56
|
"license": "MIT",
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "780c78ea4619450ddd43ba97183c2eb239a53524"
|
|
58
58
|
}
|