@sb1/ffe-context-message 5.0.17 → 5.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.
Files changed (2) hide show
  1. package/less/ffe-context-message.less +190 -47
  2. package/package.json +2 -2
package/less/ffe-context-message.less CHANGED
@@ -43,12 +43,12 @@
43
43
  // --success - Success message
44
44
  // --error - Error message
45
45
  //
46
- // Styleguide ffe-context-message.context-message.2
46
+ // Styleguide ffe-context-message.context-message.
47
47
 
48
48
  .ffe-context-message-content {
49
49
  align-items: center;
50
50
  display: flex;
51
- flex-direction: column;
51
+ flex-direction: row;
52
52
  flex-wrap: nowrap;
53
53
  padding: @ffe-spacing-sm;
54
54
  text-align: left;
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  &__header {
68
- &:extend(.ffe-h5);
68
+ &:extend(.ffe-strong-text);
69
69
 
70
70
  color: @ffe-farge-svart;
71
71
  margin-bottom: @ffe-spacing-2xs;
@@ -77,33 +77,30 @@
77
77
  display: flex;
78
78
  flex-shrink: 0;
79
79
  justify-content: center;
80
- margin-bottom: @app-margin;
81
- background-color: @ffe-farge-hvit;
80
+ border: 2px solid;
82
81
  border-radius: 50%;
83
- height: 4em;
84
- width: 4em;
85
- .native & {
86
- @media (prefers-color-scheme: dark) {
87
- background-color: @ffe-farge-svart;
88
- }
89
- }
90
- &-svg {
91
- height: 2.2em;
92
- width: 2.2em;
93
- padding: @ffe-spacing-2xs;
94
- fill: @ffe-farge-fjell;
82
+ margin-right: @ffe-spacing-sm;
83
+ height: 2em;
84
+ width: 2em;
85
+
86
+ @media (min-width: @breakpoint-sm) {
87
+ align-self: flex-start;
88
+ margin-bottom: 0;
89
+ height: 4em;
90
+ width: 4em;
95
91
  .native & {
96
92
  @media (prefers-color-scheme: dark) {
97
- fill: @ffe-farge-vann-70;
93
+ background-color: @ffe-farge-svart;
98
94
  }
99
95
  }
100
96
  }
97
+ }
101
98
 
102
- @media (min-width: @breakpoint-sm) {
103
- align-self: flex-start;
104
- margin-bottom: 0;
105
- margin-right: @ffe-spacing-lg;
106
- }
99
+ &__icon-svg {
100
+ height: 2em;
101
+ width: 2em;
102
+ padding: @ffe-spacing-2xs;
103
+ fill: @ffe-farge-hvit;
107
104
  }
108
105
 
109
106
  &__close-button {
@@ -111,27 +108,27 @@
111
108
  cursor: pointer;
112
109
  color: @ffe-farge-moerkgraa;
113
110
  fill: @ffe-farge-moerkgraa;
114
- border: none;
115
- box-sizing: content-box;
116
- padding: @ffe-spacing-sm;
111
+ border: 2px solid transparent;
112
+ box-sizing: border-box;
113
+ padding-top: @ffe-spacing-xs;
117
114
  outline: none;
118
115
  background-color: transparent;
119
- height: 1em;
120
- width: 1em;
121
- margin: 0.2rem 0.2rem 0 0;
116
+ align-self: start;
117
+ height: 3rem;
118
+ width: 3rem;
122
119
 
123
120
  &:hover {
124
121
  fill: @ffe-farge-svart;
125
122
  }
126
123
  &:focus {
127
- outline: 2px solid @ffe-farge-vann;
124
+ border: 2px solid @ffe-farge-vann;
128
125
  border-radius: 5px;
129
126
  }
127
+ }
130
128
 
131
- &-svg {
132
- height: 100%;
133
- width: 100%;
134
- }
129
+ &__close-button-svg {
130
+ height: 1rem;
131
+ width: 1rem;
135
132
  }
136
133
 
137
134
  @media (min-width: @breakpoint-sm) {
@@ -159,20 +156,15 @@
159
156
  margin-bottom: 0;
160
157
  margin-right: @ffe-spacing-sm;
161
158
  border-radius: 50%;
162
- height: 2.2em;
163
- width: 2.2em;
159
+ height: 2em;
160
+ width: 2em;
161
+ border: none;
164
162
  }
165
163
 
166
164
  .ffe-context-message-content__icon-svg {
167
165
  height: 1.5em;
168
166
  width: 1.5em;
169
167
  padding: @ffe-spacing-2xs;
170
- fill: @ffe-farge-fjell;
171
- .native & {
172
- @media (prefers-color-scheme: dark) {
173
- fill: @ffe-farge-vann-70;
174
- }
175
- }
176
168
  }
177
169
  }
178
170
 
@@ -183,10 +175,80 @@
183
175
  background-color: @ffe-farge-vann-30;
184
176
  }
185
177
  }
178
+
179
+ .ffe-context-message-content__icon {
180
+ background-color: @ffe-farge-vann;
181
+ border-color: @ffe-farge-vann;
182
+ }
183
+
184
+ .ffe-context-message-content__icon-svg {
185
+ fill: @ffe-farge-hvit;
186
+ }
187
+
188
+ @media (min-width: @breakpoint-sm) {
189
+ .ffe-context-message-content__icon {
190
+ background-color: @ffe-farge-hvit;
191
+ border-color: @ffe-farge-vann;
192
+ .native & {
193
+ @media (prefers-color-scheme: dark) {
194
+ background-color: @ffe-farge-svart;
195
+ border-color: @ffe-farge-vann-70;
196
+ }
197
+ }
198
+ }
199
+ .ffe-context-message-content__icon-svg {
200
+ fill: @ffe-farge-vann;
201
+ .native & {
202
+ @media (prefers-color-scheme: dark) {
203
+ fill: @ffe-farge-vann-70;
204
+ }
205
+ }
206
+ }
207
+ }
208
+ }
209
+
210
+ &--info&--coloredbg {
211
+ background-color: @ffe-farge-hvit;
212
+ .native & {
213
+ @media (prefers-color-scheme: dark) {
214
+ background-color: @ffe-farge-vann-30;
215
+ }
216
+ }
217
+ }
218
+
219
+ &--info&--compact {
220
+ .ffe-context-message-content__icon {
221
+ background-color: @ffe-farge-vann;
222
+ }
223
+ .ffe-context-message-content__icon-svg {
224
+ fill: @ffe-farge-hvit;
225
+ }
186
226
  }
187
227
 
188
228
  &--tip {
189
- background-color: @ffe-farge-sand-70;
229
+ background-color: @ffe-farge-sand;
230
+ .ffe-context-message-content__icon {
231
+ background-color: @ffe-farge-sol;
232
+ border-color: @ffe-farge-sol;
233
+ }
234
+
235
+ @media (min-width: @breakpoint-sm) {
236
+ .ffe-context-message-content__icon {
237
+ background-color: @ffe-farge-hvit;
238
+ border-color: @ffe-farge-sol;
239
+ .native & {
240
+ @media (prefers-color-scheme: dark) {
241
+ background-color: @ffe-farge-svart;
242
+ }
243
+ }
244
+ }
245
+ .ffe-context-message-content__icon-svg {
246
+ fill: @ffe-farge-sol;
247
+ }
248
+ }
249
+ }
250
+ &--tip&--coloredbg {
251
+ background-color: @ffe-farge-hvit;
190
252
  .native & {
191
253
  @media (prefers-color-scheme: dark) {
192
254
  background-color: @ffe-farge-sand;
@@ -194,22 +256,103 @@
194
256
  }
195
257
  }
196
258
 
259
+ &--tip&--compact {
260
+ .ffe-context-message-content__icon {
261
+ background-color: @ffe-farge-sol;
262
+ }
263
+ .ffe-context-message-content__icon-svg {
264
+ fill: @ffe-farge-hvit;
265
+ }
266
+ }
267
+
197
268
  &--success {
198
269
  background-color: @ffe-farge-nordlys-30;
270
+ .ffe-context-message-content__icon {
271
+ background-color: @ffe-farge-nordlys-wcag;
272
+ border-color: @ffe-farge-nordlys-wcag;
273
+ }
274
+
275
+ @media (min-width: @breakpoint-sm) {
276
+ .ffe-context-message-content__icon {
277
+ background-color: @ffe-farge-hvit;
278
+ border-color: @ffe-farge-nordlys-wcag;
279
+ .native & {
280
+ @media (prefers-color-scheme: dark) {
281
+ background-color: @ffe-farge-svart;
282
+ border-color: @ffe-farge-nordlys;
283
+ }
284
+ }
285
+ }
286
+ .ffe-context-message-content__icon-svg {
287
+ fill: @ffe-farge-nordlys-wcag;
288
+ .native & {
289
+ @media (prefers-color-scheme: dark) {
290
+ fill: @ffe-farge-nordlys;
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+
297
+ &--success&--coloredbg {
298
+ background-color: @ffe-farge-hvit;
299
+ .native & {
300
+ @media (prefers-color-scheme: dark) {
301
+ background-color: @ffe-farge-nordlys-30;
302
+ }
303
+ }
304
+ }
305
+
306
+ &--success&--compact {
307
+ .ffe-context-message-content__icon {
308
+ background-color: @ffe-farge-nordlys-wcag;
309
+ }
199
310
  .ffe-context-message-content__icon-svg {
200
- fill: @ffe-farge-nordlys;
311
+ fill: @ffe-farge-hvit;
201
312
  }
202
313
  }
203
314
 
204
315
  &--error {
205
316
  background-color: @ffe-farge-baer-30;
317
+ .ffe-context-message-content__icon {
318
+ background-color: @ffe-farge-baer;
319
+ border-color: @ffe-farge-baer;
320
+ }
321
+ .ffe-context-message-content__icon-svg {
322
+ fill: @ffe-farge-hvit;
323
+ }
206
324
 
207
- .ffe-context-message-content__header {
208
- color: @ffe-farge-svart;
325
+ @media (min-width: @breakpoint-sm) {
326
+ .ffe-context-message-content__icon {
327
+ background-color: @ffe-farge-hvit;
328
+ border-color: @ffe-farge-baer;
329
+ .native & {
330
+ @media (prefers-color-scheme: dark) {
331
+ background-color: @ffe-farge-svart;
332
+ }
333
+ }
334
+ }
335
+ .ffe-context-message-content__icon-svg {
336
+ fill: @ffe-farge-baer;
337
+ }
338
+ }
339
+ }
340
+
341
+ &--error&--coloredbg {
342
+ background-color: @ffe-farge-hvit;
343
+ .native & {
344
+ @media (prefers-color-scheme: dark) {
345
+ background-color: @ffe-farge-baer-30;
346
+ }
209
347
  }
348
+ }
210
349
 
350
+ &--error&--compact {
351
+ .ffe-context-message-content__icon {
352
+ background-color: @ffe-farge-baer;
353
+ }
211
354
  .ffe-context-message-content__icon-svg {
212
- fill: @ffe-farge-baer;
355
+ fill: @ffe-farge-hvit;
213
356
  }
214
357
  }
215
358
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-context-message",
3
- "version": "5.0.17",
3
+ "version": "5.1.0",
4
4
  "description": "Messagebox showing non-critical tip or information about a page or product",
5
5
  "keywords": [
6
6
  "ffe"
@@ -27,5 +27,5 @@
27
27
  "publishConfig": {
28
28
  "access": "public"
29
29
  },
30
- "gitHead": "c6f6635273fc103d52b5359b8b4b40fcb10cd71e"
30
+ "gitHead": "a65e9a094adc4226cf148163f9729d2398fdd3ed"
31
31
  }