@sb1/ffe-context-message 6.0.14 → 6.1.0
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/less/context-message.less +2 -0
- package/less/ffe-context-message.less +95 -89
- package/less/theme.less +45 -0
- package/package.json +2 -2
|
@@ -52,23 +52,25 @@
|
|
|
52
52
|
flex-wrap: nowrap;
|
|
53
53
|
padding: @ffe-spacing-sm;
|
|
54
54
|
text-align: left;
|
|
55
|
+
|
|
55
56
|
.ffe-body-paragraph,
|
|
56
57
|
.ffe-body-text {
|
|
57
58
|
.native & {
|
|
58
59
|
@media (prefers-color-scheme: dark) {
|
|
59
|
-
color:
|
|
60
|
+
color: var(--ffe-farge-svart);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
63
|
+
|
|
62
64
|
.ffe-link-text:not(:focus) {
|
|
63
|
-
color:
|
|
64
|
-
border-color:
|
|
65
|
+
color: var(--ffe-farge-fjell);
|
|
66
|
+
border-color: var(--ffe-farge-fjell);
|
|
65
67
|
}
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
&__header {
|
|
69
71
|
&:extend(.ffe-strong-text);
|
|
70
72
|
|
|
71
|
-
color:
|
|
73
|
+
color: var(--ffe-farge-svart);
|
|
72
74
|
margin-bottom: @ffe-spacing-2xs;
|
|
73
75
|
}
|
|
74
76
|
|
|
@@ -89,9 +91,10 @@
|
|
|
89
91
|
margin-bottom: 0;
|
|
90
92
|
height: 4em;
|
|
91
93
|
width: 4em;
|
|
94
|
+
|
|
92
95
|
.native & {
|
|
93
96
|
@media (prefers-color-scheme: dark) {
|
|
94
|
-
background-color:
|
|
97
|
+
background-color: var(--ffe-farge-svart);
|
|
95
98
|
}
|
|
96
99
|
}
|
|
97
100
|
}
|
|
@@ -100,19 +103,25 @@
|
|
|
100
103
|
&__icon-svg {
|
|
101
104
|
height: 1em;
|
|
102
105
|
width: 1em;
|
|
103
|
-
fill:
|
|
106
|
+
fill: var(--ffe-farge-svart);
|
|
104
107
|
|
|
105
108
|
@media (min-width: @breakpoint-sm) {
|
|
106
109
|
height: 2em;
|
|
107
110
|
width: 2em;
|
|
108
111
|
}
|
|
112
|
+
|
|
113
|
+
.native & {
|
|
114
|
+
@media (prefers-color-scheme: dark) {
|
|
115
|
+
fill: var(--ffe-farge-hvit);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
109
118
|
}
|
|
110
119
|
|
|
111
120
|
&__close-button {
|
|
112
121
|
flex: 0 0 auto;
|
|
113
122
|
cursor: pointer;
|
|
114
|
-
color:
|
|
115
|
-
fill:
|
|
123
|
+
color: var(--ffe-v-context-message-close-button-color);
|
|
124
|
+
fill: var(--ffe-v-context-message-close-button-color);
|
|
116
125
|
border: 2px solid transparent;
|
|
117
126
|
box-sizing: border-box;
|
|
118
127
|
padding-top: @ffe-spacing-xs;
|
|
@@ -123,10 +132,12 @@
|
|
|
123
132
|
width: 3rem;
|
|
124
133
|
|
|
125
134
|
&:hover {
|
|
126
|
-
fill:
|
|
135
|
+
fill: var(--ffe-v-context-message-close-button-color-hover);
|
|
127
136
|
}
|
|
137
|
+
|
|
128
138
|
&:focus {
|
|
129
|
-
border: 2px solid
|
|
139
|
+
border: 2px solid
|
|
140
|
+
var(--ffe-v-context-message-close-button-border-color-focus);
|
|
130
141
|
border-radius: 5px;
|
|
131
142
|
}
|
|
132
143
|
}
|
|
@@ -173,190 +184,185 @@
|
|
|
173
184
|
}
|
|
174
185
|
|
|
175
186
|
&--info {
|
|
176
|
-
background-color:
|
|
177
|
-
.native & {
|
|
178
|
-
@media (prefers-color-scheme: dark) {
|
|
179
|
-
background-color: @ffe-farge-vann-30;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
187
|
+
background-color: var(--ffe-v-context-message-info-bg-color);
|
|
182
188
|
|
|
183
189
|
.ffe-context-message-content__icon {
|
|
184
|
-
background-color:
|
|
185
|
-
|
|
190
|
+
background-color: var(
|
|
191
|
+
--ffe-v-context-message-info-icon-compact-color
|
|
192
|
+
);
|
|
193
|
+
border-color: var(--ffe-v-context-message-info-icon-compact-color);
|
|
186
194
|
}
|
|
187
195
|
|
|
188
196
|
.ffe-context-message-content__icon-svg {
|
|
189
|
-
fill:
|
|
197
|
+
fill: var(--ffe-farge-hvit);
|
|
190
198
|
}
|
|
191
199
|
|
|
192
200
|
@media (min-width: @breakpoint-sm) {
|
|
193
201
|
.ffe-context-message-content__icon {
|
|
194
|
-
background-color:
|
|
195
|
-
border-color:
|
|
196
|
-
.native & {
|
|
197
|
-
@media (prefers-color-scheme: dark) {
|
|
198
|
-
background-color: @ffe-farge-svart;
|
|
199
|
-
border-color: @ffe-farge-vann-70;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
+
background-color: var(--ffe-v-context-message-icon-bg-color);
|
|
203
|
+
border-color: var(--ffe-v-context-message-info-icon-color);
|
|
202
204
|
}
|
|
205
|
+
|
|
203
206
|
.ffe-context-message-content__icon-svg {
|
|
204
|
-
fill:
|
|
205
|
-
.native & {
|
|
206
|
-
@media (prefers-color-scheme: dark) {
|
|
207
|
-
fill: @ffe-farge-vann-70;
|
|
208
|
-
}
|
|
209
|
-
}
|
|
207
|
+
fill: var(--ffe-v-context-message-info-icon-color);
|
|
210
208
|
}
|
|
211
209
|
}
|
|
212
210
|
}
|
|
213
211
|
|
|
214
212
|
&--info&--coloredbg {
|
|
215
|
-
background-color:
|
|
213
|
+
background-color: var(--ffe-v-context-message-variant-bg-color);
|
|
214
|
+
|
|
216
215
|
.native & {
|
|
217
216
|
@media (prefers-color-scheme: dark) {
|
|
218
|
-
background-color:
|
|
217
|
+
background-color: var(--ffe-v-context-message-info-bg-color);
|
|
219
218
|
}
|
|
220
219
|
}
|
|
221
220
|
}
|
|
222
221
|
|
|
223
222
|
&--info&--compact {
|
|
224
223
|
.ffe-context-message-content__icon {
|
|
225
|
-
background-color:
|
|
224
|
+
background-color: var(
|
|
225
|
+
--ffe-v-context-message-info-icon-compact-color
|
|
226
|
+
);
|
|
226
227
|
}
|
|
228
|
+
|
|
227
229
|
.ffe-context-message-content__icon-svg {
|
|
228
|
-
fill:
|
|
230
|
+
fill: var(--ffe-farge-hvit);
|
|
229
231
|
}
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
&--tips {
|
|
233
|
-
background-color:
|
|
235
|
+
background-color: var(--ffe-v-context-message-tips-bg-color);
|
|
236
|
+
|
|
234
237
|
.ffe-context-message-content__icon {
|
|
235
|
-
background-color:
|
|
236
|
-
border-color:
|
|
238
|
+
background-color: var(--ffe-v-context-message-tips-icon-color);
|
|
239
|
+
border-color: var(--ffe-v-context-message-tips-icon-color);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.ffe-context-message-content__icon-svg {
|
|
243
|
+
fill: var(--ffe-farge-hvit);
|
|
237
244
|
}
|
|
238
245
|
|
|
239
246
|
@media (min-width: @breakpoint-sm) {
|
|
240
247
|
.ffe-context-message-content__icon {
|
|
241
|
-
background-color:
|
|
242
|
-
border-color:
|
|
243
|
-
.native & {
|
|
244
|
-
@media (prefers-color-scheme: dark) {
|
|
245
|
-
background-color: @ffe-farge-svart;
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
+
background-color: var(--ffe-v-context-message-icon-bg-color);
|
|
249
|
+
border-color: var(--ffe-v-context-message-tips-icon-color);
|
|
248
250
|
}
|
|
251
|
+
|
|
249
252
|
.ffe-context-message-content__icon-svg {
|
|
250
|
-
fill:
|
|
253
|
+
fill: var(--ffe-v-context-message-tips-icon-color);
|
|
251
254
|
}
|
|
252
255
|
}
|
|
253
256
|
}
|
|
257
|
+
|
|
254
258
|
&--tips&--coloredbg {
|
|
255
|
-
background-color:
|
|
259
|
+
background-color: var(--ffe-v-context-message-variant-bg-color);
|
|
260
|
+
|
|
256
261
|
.native & {
|
|
257
262
|
@media (prefers-color-scheme: dark) {
|
|
258
|
-
background-color:
|
|
263
|
+
background-color: var(--ffe-v-context-message-tips-bg-color);
|
|
259
264
|
}
|
|
260
265
|
}
|
|
261
266
|
}
|
|
262
267
|
|
|
263
268
|
&--tips&--compact {
|
|
264
269
|
.ffe-context-message-content__icon {
|
|
265
|
-
background-color:
|
|
270
|
+
background-color: var(--ffe-v-context-message-tips-icon-color);
|
|
266
271
|
}
|
|
272
|
+
|
|
267
273
|
.ffe-context-message-content__icon-svg {
|
|
268
|
-
fill:
|
|
274
|
+
fill: var(--ffe-farge-hvit);
|
|
269
275
|
}
|
|
270
276
|
}
|
|
271
277
|
|
|
272
278
|
&--success {
|
|
273
|
-
background-color:
|
|
279
|
+
background-color: var(--ffe-v-context-message-success-bg-color);
|
|
280
|
+
|
|
274
281
|
.ffe-context-message-content__icon {
|
|
275
|
-
background-color:
|
|
276
|
-
|
|
282
|
+
background-color: var(
|
|
283
|
+
--ffe-v-context-message-success-compact-color
|
|
284
|
+
);
|
|
285
|
+
border-color: var(--ffe-v-context-message-success-compact-color);
|
|
286
|
+
}
|
|
287
|
+
.ffe-context-message-content__icon-svg {
|
|
288
|
+
fill: var(--ffe-farge-hvit);
|
|
277
289
|
}
|
|
278
290
|
|
|
279
291
|
@media (min-width: @breakpoint-sm) {
|
|
280
292
|
.ffe-context-message-content__icon {
|
|
281
|
-
background-color:
|
|
282
|
-
border-color:
|
|
283
|
-
.native & {
|
|
284
|
-
@media (prefers-color-scheme: dark) {
|
|
285
|
-
background-color: @ffe-farge-svart;
|
|
286
|
-
border-color: @ffe-farge-nordlys;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
293
|
+
background-color: var(--ffe-v-context-message-icon-bg-color);
|
|
294
|
+
border-color: var(--ffe-v-context-message-success-icon-color);
|
|
289
295
|
}
|
|
296
|
+
|
|
290
297
|
.ffe-context-message-content__icon-svg {
|
|
291
|
-
fill:
|
|
292
|
-
.native & {
|
|
293
|
-
@media (prefers-color-scheme: dark) {
|
|
294
|
-
fill: @ffe-farge-nordlys;
|
|
295
|
-
}
|
|
296
|
-
}
|
|
298
|
+
fill: var(--ffe-v-context-message-success-icon-color);
|
|
297
299
|
}
|
|
298
300
|
}
|
|
299
301
|
}
|
|
300
302
|
|
|
301
303
|
&--success&--coloredbg {
|
|
302
|
-
background-color:
|
|
304
|
+
background-color: var(--ffe-v-context-message-variant-bg-color);
|
|
305
|
+
|
|
303
306
|
.native & {
|
|
304
307
|
@media (prefers-color-scheme: dark) {
|
|
305
|
-
background-color:
|
|
308
|
+
background-color: var(--ffe-v-context-message-success-bg-color);
|
|
306
309
|
}
|
|
307
310
|
}
|
|
308
311
|
}
|
|
309
312
|
|
|
310
313
|
&--success&--compact {
|
|
311
314
|
.ffe-context-message-content__icon {
|
|
312
|
-
background-color:
|
|
315
|
+
background-color: var(
|
|
316
|
+
--ffe-v-context-message-success-compact-color
|
|
317
|
+
);
|
|
313
318
|
}
|
|
319
|
+
|
|
314
320
|
.ffe-context-message-content__icon-svg {
|
|
315
|
-
fill:
|
|
321
|
+
fill: var(--ffe-farge-hvit);
|
|
316
322
|
}
|
|
317
323
|
}
|
|
318
324
|
|
|
319
325
|
&--error {
|
|
320
|
-
background-color:
|
|
326
|
+
background-color: var(--ffe-v-context-message-error-bg-color);
|
|
327
|
+
|
|
321
328
|
.ffe-context-message-content__icon {
|
|
322
|
-
background-color:
|
|
323
|
-
border-color:
|
|
329
|
+
background-color: var(--ffe-v-context-message-error-icon-color);
|
|
330
|
+
border-color: var(--ffe-v-context-message-error-icon-color);
|
|
324
331
|
}
|
|
332
|
+
|
|
325
333
|
.ffe-context-message-content__icon-svg {
|
|
326
|
-
fill:
|
|
334
|
+
fill: var(--ffe-farge-hvit);
|
|
327
335
|
}
|
|
328
336
|
|
|
329
337
|
@media (min-width: @breakpoint-sm) {
|
|
330
338
|
.ffe-context-message-content__icon {
|
|
331
|
-
background-color:
|
|
332
|
-
border-color:
|
|
333
|
-
.native & {
|
|
334
|
-
@media (prefers-color-scheme: dark) {
|
|
335
|
-
background-color: @ffe-farge-svart;
|
|
336
|
-
}
|
|
337
|
-
}
|
|
339
|
+
background-color: var(--ffe-v-context-message-icon-bg-color);
|
|
340
|
+
border-color: var(--ffe-v-context-message-error-icon-color);
|
|
338
341
|
}
|
|
342
|
+
|
|
339
343
|
.ffe-context-message-content__icon-svg {
|
|
340
|
-
fill:
|
|
344
|
+
fill: var(--ffe-v-context-message-error-icon-color);
|
|
341
345
|
}
|
|
342
346
|
}
|
|
343
347
|
}
|
|
344
348
|
|
|
345
349
|
&--error&--coloredbg {
|
|
346
|
-
background-color:
|
|
350
|
+
background-color: var(--ffe-v-context-message-variant-bg-color);
|
|
351
|
+
|
|
347
352
|
.native & {
|
|
348
353
|
@media (prefers-color-scheme: dark) {
|
|
349
|
-
background-color:
|
|
354
|
+
background-color: var(--ffe-v-context-message-error-bg-color);
|
|
350
355
|
}
|
|
351
356
|
}
|
|
352
357
|
}
|
|
353
358
|
|
|
354
359
|
&--error&--compact {
|
|
355
360
|
.ffe-context-message-content__icon {
|
|
356
|
-
background-color:
|
|
361
|
+
background-color: var(--ffe-v-context-message-error-icon-color);
|
|
357
362
|
}
|
|
363
|
+
|
|
358
364
|
.ffe-context-message-content__icon-svg {
|
|
359
|
-
fill:
|
|
365
|
+
fill: var(--ffe-farge-hvit);
|
|
360
366
|
}
|
|
361
367
|
}
|
|
362
368
|
}
|
package/less/theme.less
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/** Close button */
|
|
3
|
+
--ffe-v-context-message-close-button-color: var(--ffe-farge-moerkgraa);
|
|
4
|
+
--ffe-v-context-message-close-button-color-hover: var(--ffe-farge-svart);
|
|
5
|
+
--ffe-v-context-message-close-button-border-color-focus: var(
|
|
6
|
+
--ffe-farge-vann
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
/** onColoredBg variant */
|
|
10
|
+
--ffe-v-context-message-variant-bg-color: var(--ffe-farge-hvit);
|
|
11
|
+
|
|
12
|
+
/* Common */
|
|
13
|
+
--ffe-v-context-message-icon-bg-color: var(--ffe-farge-hvit);
|
|
14
|
+
|
|
15
|
+
/** Info */
|
|
16
|
+
--ffe-v-context-message-info-bg-color: var(--ffe-farge-frost-30);
|
|
17
|
+
--ffe-v-context-message-info-icon-color: var(--ffe-farge-vann);
|
|
18
|
+
--ffe-v-context-message-info-icon-compact-color: var(--ffe-farge-vann);
|
|
19
|
+
|
|
20
|
+
/** Tips */
|
|
21
|
+
--ffe-v-context-message-tips-bg-color: var(--ffe-farge-sand);
|
|
22
|
+
--ffe-v-context-message-tips-icon-color: var(--ffe-farge-sol);
|
|
23
|
+
|
|
24
|
+
/** Success */
|
|
25
|
+
--ffe-v-context-message-success-bg-color: var(--ffe-farge-nordlys-30);
|
|
26
|
+
--ffe-v-context-message-success-compact-color: var(
|
|
27
|
+
--ffe-farge-nordlys-wcag
|
|
28
|
+
);
|
|
29
|
+
--ffe-v-context-message-success-icon-color: var(--ffe-farge-nordlys-wcag);
|
|
30
|
+
|
|
31
|
+
/** Error */
|
|
32
|
+
--ffe-v-context-message-error-bg-color: var(--ffe-farge-baer-30);
|
|
33
|
+
--ffe-v-context-message-error-icon-color: var(--ffe-farge-baer);
|
|
34
|
+
|
|
35
|
+
@media (prefers-color-scheme: dark) {
|
|
36
|
+
.native {
|
|
37
|
+
--ffe-v-context-message-icon-bg-color: var(--ffe-farge-svart);
|
|
38
|
+
--ffe-v-context-message-info-bg-color: var(--ffe-farge-vann-30);
|
|
39
|
+
--ffe-v-context-message-info-color: var(--ffe-farge-vann-70);
|
|
40
|
+
--ffe-v-context-message-success-icon-color: var(
|
|
41
|
+
--ffe-farge-nordlys
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-context-message",
|
|
3
|
-
"version": "6.0
|
|
3
|
+
"version": "6.1.0",
|
|
4
4
|
"description": "Messagebox showing non-critical tip or information about a page or product",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "ece2ec4c5d9988e07a5a3418ce08422d2ea1f30b"
|
|
32
32
|
}
|