@sb1/ffe-buttons 11.1.1 → 13.0.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.
Files changed (3) hide show
  1. package/less/base-button.less +166 -195
  2. package/less/inline-base-button.less +60 -52
  3. package/package.json +3 -3
package/less/base-button.less CHANGED
@@ -54,9 +54,8 @@
54
54
  align-items: center;
55
55
  appearance: none;
56
56
  border: 2px solid transparent;
57
- border-radius: 4px;
58
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
59
- color: @ffe-white;
57
+ border-radius: 1.375rem;
58
+ color: @ffe-farge-hvit;
60
59
  cursor: pointer;
61
60
  display: flex;
62
61
  font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
@@ -72,31 +71,46 @@
72
71
  white-space: nowrap;
73
72
  width: 100%;
74
73
  .ffe-fontsize-button();
75
- .native & {
76
- @media (prefers-color-scheme: dark) {
77
- color: @ffe-blue-azure-darkmode;
74
+
75
+ &::after {
76
+ content: '';
77
+ opacity: 0;
78
+ display: block;
79
+ position: absolute;
80
+ background: transparent;
81
+ border-radius: 1.5rem;
82
+ top: -5px;
83
+ left: -5px;
84
+ right: -5px;
85
+ bottom: -5px;
86
+ box-shadow: 0 0 0 2px @ffe-farge-vann;
87
+ transition: opacity @ffe-transition-duration @ffe-ease;
88
+
89
+ .native & {
90
+ box-shadow: 0 0 0 2px @ffe-farge-hvit;
78
91
  }
79
92
  }
80
93
 
81
- &:focus {
82
- outline: none;
94
+ &:focus::after {
95
+ opacity: 1;
83
96
  }
84
97
 
85
- &:hover {
86
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
98
+ &:focus:not(:focus-visible)::after {
99
+ opacity: 0;
100
+ }
101
+
102
+ &:focus {
103
+ outline: none;
104
+ position: relative;
105
+ overflow: unset;
87
106
  }
88
107
 
89
108
  &:active {
90
- box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
109
+ transform: scale(0.97);
91
110
  }
92
111
 
93
112
  &:visited {
94
113
  color: @ffe-white;
95
- .native & {
96
- @media (prefers-color-scheme: dark) {
97
- color: @ffe-blue-azure-darkmode;
98
- }
99
- }
100
114
  }
101
115
 
102
116
  @media (min-width: @breakpoint-sm) {
@@ -110,154 +124,121 @@
110
124
  &:focus,
111
125
  &:visited {
112
126
  background-color: transparent;
113
- border: 2px solid @ffe-green-shamrock;
114
- color: @ffe-green-shamrock;
127
+ border: 2px solid @ffe-farge-nordlys-wcag;
128
+ color: @ffe-farge-svart;
115
129
  .native & {
116
130
  @media (prefers-color-scheme: dark) {
117
- color: @ffe-blue-azure-darkmode;
118
- border-color: @ffe-blue-azure-darkmode;
131
+ color: @ffe-farge-nordlys-30;
132
+ border-color: @ffe-farge-nordlys;
119
133
  background-color: transparent;
120
134
  }
121
135
  }
122
136
  }
123
137
 
124
138
  &:hover {
125
- background-color: darken(@ffe-green-shamrock, 5%);
126
- border-color: darken(@ffe-green-shamrock, 5%);
127
- color: @ffe-white;
128
- .native & {
129
- @media (prefers-color-scheme: dark) {
130
- color: lighten(@ffe-blue-azure-darkmode, 10%);
131
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
132
- background-color: @ffe-grey-darkmode;
133
- }
134
- }
135
- }
136
-
137
- &:active {
138
- background-color: darken(@ffe-green-shamrock, 10%);
139
+ background-color: @ffe-farge-skog;
140
+ border-color: @ffe-farge-skog;
141
+ color: @ffe-farge-hvit;
139
142
  .native & {
140
143
  @media (prefers-color-scheme: dark) {
141
- background-color: lighten(@ffe-grey-darkmode, 5%);
144
+ color: @ffe-farge-hvit;
145
+ border-color: @ffe-farge-nordlys-30;
146
+ background-color: transparent;
142
147
  }
143
148
  }
144
149
  }
145
150
  }
146
151
 
147
152
  .ffe-button--action {
148
- background-color: @ffe-green-shamrock;
153
+ background-color: @ffe-farge-nordlys-wcag;
154
+
149
155
  .native & {
150
156
  @media (prefers-color-scheme: dark) {
151
- background-color: @ffe-grey-darkmode;
152
- border: 2px solid @ffe-blue-azure-darkmode;
153
- &.ffe-button--dark {
154
- background-color: @ffe-green-shamrock;
155
- border-color: @ffe-green-shamrock;
156
- color: @ffe-white;
157
- }
157
+ background-color: @ffe-farge-nordlys;
158
+ border: 2px solid transparent;
159
+ color: @ffe-farge-svart;
158
160
  }
159
161
  }
160
162
 
163
+ &.ffe-button--dark {
164
+ background-color: @ffe-green-shamrock;
165
+ border-color: @ffe-green-shamrock;
166
+ color: @ffe-white;
167
+ }
168
+
161
169
  &:focus {
162
- background-color: darken(@ffe-green-shamrock, 5%);
163
- box-shadow: 0 0 0 1px @ffe-white, 0 0 0 4px @ffe-blue-focus;
170
+ background-color: @ffe-farge-nordlys-wcag;
171
+
164
172
  .native & {
165
173
  @media (prefers-color-scheme: dark) {
166
- background-color: lighten(@ffe-grey-darkmode, 5%);
167
- &.ffe-button--dark {
168
- background-color: darken(@ffe-green-shamrock, 5%);
169
- border-color: @ffe-green-shamrock;
170
- color: @ffe-white;
171
- }
174
+ background-color: @ffe-farge-nordlys;
172
175
  }
173
176
  }
174
177
 
175
178
  &.ffe-button--dark {
179
+ background-color: darken(@ffe-green-shamrock, 5%);
180
+ border-color: @ffe-green-shamrock;
181
+ color: @ffe-white;
176
182
  box-shadow: 0 0 0 2px @ffe-blue-focus;
177
183
  }
178
184
  }
179
185
 
180
186
  &:hover {
181
- background-color: darken(@ffe-green-shamrock, 5%);
187
+ background-color: @ffe-farge-skog;
182
188
  .native & {
183
189
  @media (prefers-color-scheme: dark) {
184
- color: lighten(@ffe-blue-azure-darkmode, 10%);
185
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
186
- background-color: lighten(@ffe-grey-darkmode, 5%);
187
- &.ffe-button--dark {
188
- background-color: darken(@ffe-green-shamrock, 5%);
189
- border-color: darken(@ffe-green-shamrock, 5%);
190
- color: @ffe-white;
191
- }
190
+ background-color: @ffe-farge-nordlys-30;
192
191
  }
193
192
  }
194
- }
195
193
 
196
- &:active {
197
- background-color: darken(@ffe-green-shamrock, 10%);
198
- .native & {
199
- @media (prefers-color-scheme: dark) {
200
- background-color: lighten(@ffe-grey-darkmode, 5%);
201
- }
194
+ &.ffe-button--dark {
195
+ background-color: darken(@ffe-green-shamrock, 5%);
196
+ border-color: darken(@ffe-green-shamrock, 5%);
197
+ color: @ffe-white;
202
198
  }
203
199
  }
204
200
  }
205
201
 
206
202
  .ffe-button--primary {
207
- background-color: @ffe-blue-azure;
203
+ background-color: @ffe-farge-vann;
208
204
  .native & {
209
205
  @media (prefers-color-scheme: dark) {
210
- background-color: @ffe-grey-darkmode;
211
- &.ffe-button--dark {
212
- color: @ffe-white;
213
- background-color: @ffe-blue-azure;
214
- }
206
+ background-color: @ffe-farge-vann-70;
207
+ color: @ffe-farge-svart;
215
208
  }
216
209
  }
217
210
 
211
+ &.ffe-button--dark {
212
+ color: @ffe-white;
213
+ background-color: @ffe-blue-azure;
214
+ }
215
+
218
216
  &:focus {
219
- background-color: darken(@ffe-blue-azure, 5%);
220
- box-shadow: 0 0 0 1px @ffe-white, 0 0 0 4px @ffe-blue-focus;
217
+ background-color: @ffe-farge-vann;
218
+
221
219
  .native & {
222
220
  @media (prefers-color-scheme: dark) {
223
- color: lighten(@ffe-blue-azure-darkmode, 10%);
224
- background-color: lighten(@ffe-grey-darkmode, 5%);
225
- &.ffe-button--dark {
226
- color: @ffe-white;
227
- background-color: darken(@ffe-blue-azure, 5%);
228
- }
221
+ background-color: @ffe-farge-vann-70;
229
222
  }
230
223
  }
231
224
 
232
225
  &.ffe-button--dark {
226
+ color: @ffe-white;
227
+ background-color: darken(@ffe-blue-azure, 5%);
233
228
  box-shadow: 0 0 0 2px @ffe-blue-focus;
234
229
  }
235
230
  }
236
231
 
237
232
  &:hover {
238
- background-color: darken(@ffe-blue-azure, 5%);
233
+ background-color: @ffe-farge-fjell;
239
234
  .native & {
240
235
  @media (prefers-color-scheme: dark) {
241
- color: lighten(@ffe-blue-azure-darkmode, 10%);
242
- background-color: lighten(@ffe-grey-darkmode, 5%);
243
- &.ffe-button--dark {
244
- color: @ffe-white;
245
- background-color: darken(@ffe-blue-azure, 5%);
246
- }
236
+ background-color: @ffe-farge-vann-30;
247
237
  }
248
238
  }
249
- }
250
-
251
- &:active {
252
- background-color: darken(@ffe-blue-azure, 10%);
253
- .native & {
254
- @media (prefers-color-scheme: dark) {
255
- background-color: lighten(@ffe-grey-darkmode, 5%);
256
- &.ffe-button--dark {
257
- color: @ffe-white;
258
- background-color: darken(@ffe-blue-azure, 10%);
259
- }
260
- }
239
+ &.ffe-button--dark {
240
+ color: @ffe-white;
241
+ background-color: darken(@ffe-blue-azure, 5%);
261
242
  }
262
243
  }
263
244
  }
@@ -265,90 +246,65 @@
265
246
  .ffe-button--secondary,
266
247
  .ffe-button--shortcut,
267
248
  .ffe-button--expand {
268
- background-color: @ffe-white;
269
- border: solid 2px @ffe-grey-silver;
270
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05);
271
- color: @ffe-blue-azure;
249
+ background-color: @ffe-farge-hvit;
250
+ border: solid 2px @ffe-farge-vann;
251
+ color: @ffe-farge-vann;
272
252
  .native & {
273
253
  @media (prefers-color-scheme: dark) {
274
- color: @ffe-blue-azure-darkmode;
275
- background-color: @ffe-grey-charcoal-darkmode;
276
- border-color: @ffe-grey-charcoal-darkmode;
277
- &.ffe-button--dark {
278
- background-color: transparent;
279
- color: @ffe-white;
280
- border: solid 2px @ffe-grey-silver;
281
- }
254
+ color: @ffe-farge-vann-30;
255
+ background-color: transparent;
256
+ border-color: @ffe-farge-vann-70;
282
257
  }
283
258
  }
284
-
285
259
  &.ffe-button--dark {
286
260
  background-color: transparent;
287
261
  color: @ffe-white;
262
+ border: solid 2px @ffe-grey-silver;
288
263
  }
289
264
 
290
265
  &:active,
291
266
  &:focus,
292
- &:hover,
293
267
  &:visited {
294
- background-color: @ffe-white;
295
- color: @ffe-blue-azure;
296
-
297
- &.ffe-button--dark {
298
- background-color: transparent;
299
- color: @ffe-white;
300
- .native & {
301
- @media (prefers-color-scheme: dark) {
302
- background-color: transparent;
303
- color: @ffe-white;
304
- }
305
- }
306
- }
307
- }
268
+ color: @ffe-farge-vann;
308
269
 
309
- &:visited {
310
270
  .native & {
311
271
  @media (prefers-color-scheme: dark) {
312
- color: @ffe-blue-azure-darkmode;
313
- background-color: @ffe-grey-charcoal-darkmode;
272
+ background-color: transparent;
273
+ color: @ffe-farge-vann-30;
314
274
  }
315
275
  }
276
+
277
+ &.ffe-button--dark {
278
+ background-color: transparent;
279
+ color: @ffe-white;
280
+ }
316
281
  }
317
282
 
318
- &:active,
319
- &:focus,
320
- &:hover {
321
- border-color: @ffe-blue-azure;
283
+ &:focus {
322
284
  .native & {
323
285
  @media (prefers-color-scheme: dark) {
324
- color: lighten(@ffe-blue-azure-darkmode, 10%);
325
- background-color: lighten(@ffe-grey-charcoal-darkmode, 5%);
326
- border-color: lighten(@ffe-grey-charcoal-darkmode, 5%);
286
+ background-color: transparent;
287
+ border-color: @ffe-farge-vann-70;
288
+ color: @ffe-farge-vann-30;
327
289
  }
328
290
  }
329
-
330
291
  &.ffe-button--dark {
331
- border-color: @ffe-blue-focus;
332
- .native & {
333
- @media (prefers-color-scheme: dark) {
334
- border-color: @ffe-blue-focus;
335
- }
336
- }
292
+ background-color: @ffe-grey-dark-blue--dark;
293
+ border-color: @ffe-grey-dark-blue--dark;
294
+ box-shadow: 0 0 0 2px @ffe-blue-focus;
337
295
  }
338
296
  }
339
297
 
340
- &:focus {
341
- box-shadow: 0 0 0 1px @ffe-white, 0 0 0 4px @ffe-blue-focus;
298
+ &:hover {
299
+ background-color: @ffe-farge-vann-30-hover;
300
+ border-color: @ffe-farge-fjell;
301
+ color: @ffe-farge-fjell;
342
302
 
343
- &.ffe-button--dark {
344
- background-color: @ffe-grey-dark-blue--dark;
345
- border-color: @ffe-grey-dark-blue--dark;
346
- box-shadow: 0 0 0 2px @ffe-blue-focus;
347
- .native & {
348
- @media (prefers-color-scheme: dark) {
349
- background-color: @ffe-grey-dark-blue--dark;
350
- border-color: @ffe-grey-dark-blue--dark;
351
- }
303
+ .native & {
304
+ @media (prefers-color-scheme: dark) {
305
+ background-color: @ffe-farge-natt;
306
+ border-color: @ffe-farge-vann-30;
307
+ color: @ffe-farge-hvit;
352
308
  }
353
309
  }
354
310
  }
@@ -359,44 +315,62 @@
359
315
  height: 45px;
360
316
  }
361
317
 
362
- .ffe-button--expanded  {
318
+ .ffe-button--expanded {
363
319
  padding: @ffe-spacing-xs;
364
320
  width: 45px;
365
321
  }
366
322
 
367
323
  .ffe-button--task {
368
324
  background: transparent;
369
- border-radius: 0;
325
+ border-radius: 1.75rem;
326
+ border: 2px solid transparent;
370
327
  box-shadow: none;
371
- color: @ffe-blue-azure;
328
+ color: @ffe-farge-vann;
372
329
  display: inline-block;
373
- padding: @ffe-spacing-2xs;
330
+ padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs @ffe-spacing-2xs;
374
331
  text-align: left;
375
332
  transition: all @ffe-transition-duration @ffe-ease;
376
333
  width: auto;
377
334
  .native & {
378
335
  @media (prefers-color-scheme: dark) {
379
- color: @ffe-blue-azure-darkmode;
336
+ color: @ffe-farge-vann-30;
380
337
  }
381
338
  }
382
339
 
383
- &:active,
384
- &:focus,
385
- &:hover,
386
- &:visited {
387
- color: @ffe-blue-cobalt;
340
+ &:hover {
341
+ color: @ffe-farge-fjell;
388
342
  box-shadow: none;
343
+
344
+ .native & {
345
+ @media (prefers-color-scheme: dark) {
346
+ color: @ffe-farge-hvit;
347
+ }
348
+ }
349
+ }
350
+
351
+ &:focus {
352
+ border-color: @ffe-farge-vann;
353
+
389
354
  .native & {
390
355
  @media (prefers-color-scheme: dark) {
391
- color: lighten(@ffe-blue-azure-darkmode, 10%);
356
+ border-color: @ffe-farge-hvit;
392
357
  }
393
358
  }
359
+
360
+ &::after {
361
+ display: none;
362
+ }
394
363
  }
395
364
  }
396
365
 
397
366
  .ffe-button--condensed {
398
367
  padding: @ffe-spacing-2xs @ffe-spacing-sm;
399
368
  .ffe-fontsize-button-condensed();
369
+
370
+ &.ffe-button--task {
371
+ padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs
372
+ @ffe-spacing-2xs;
373
+ }
400
374
  }
401
375
 
402
376
  .ffe-button--loading {
@@ -436,59 +410,56 @@
436
410
  }
437
411
 
438
412
  .ffe-button--task & {
439
- border: 2px solid @ffe-grey-silver;
413
+ border: 2px solid @ffe-farge-vann;
440
414
  border-radius: 50%;
441
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
442
- background-color: @ffe-white;
443
- fill: @ffe-blue-azure;
415
+ background-color: @ffe-farge-hvit;
416
+ fill: @ffe-farge-vann;
444
417
  height: 45px;
445
418
  padding: 13px;
446
- margin: 0 5px 0 0;
419
+ margin: 0 @ffe-spacing-xs 0 0;
447
420
  width: 45px;
448
421
  transition: all @ffe-transition-duration @ffe-ease;
449
422
  .native & {
450
423
  @media (prefers-color-scheme: dark) {
451
- border-color: @ffe-blue-azure-darkmode;
452
- background-color: @ffe-grey-darkmode;
453
- fill: @ffe-blue-azure-darkmode;
424
+ border-color: @ffe-farge-vann-70;
425
+ background-color: transparent;
426
+ fill: @ffe-farge-vann-30;
454
427
  }
455
428
  }
456
429
  }
457
430
 
458
- .ffe-button--task.ffe-button--condensed & {
459
- height: 25px;
460
- width: 25px;
461
- padding: 5px;
462
- }
463
-
464
- .ffe-button--task:hover & {
465
- border-color: @ffe-blue-cobalt;
466
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
431
+ .ffe-button--expand & {
467
432
  .native & {
468
433
  @media (prefers-color-scheme: dark) {
469
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
470
- background-color: lighten(@ffe-grey-darkmode, 5%);
471
- fill: lighten(@ffe-blue-azure-darkmode, 10%);
434
+ fill: @ffe-farge-vann-30;
472
435
  }
473
436
  }
474
437
  }
475
438
 
476
- .ffe-button--task:active & {
477
- border-color: @ffe-blue-cobalt;
478
- box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
439
+ .ffe-button--expand:hover & {
479
440
  .native & {
480
441
  @media (prefers-color-scheme: dark) {
481
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
442
+ fill: @ffe-farge-hvit;
443
+ background-color: @ffe-farge-natt;
482
444
  }
483
445
  }
484
446
  }
485
447
 
486
- .ffe-button--task:focus & {
487
- border-color: @ffe-blue-cobalt;
488
- box-shadow: 0 0 0 1px @ffe-white, 0 0 0 4px @ffe-blue-focus;
448
+ .ffe-button--task.ffe-button--condensed & {
449
+ height: 25px;
450
+ width: 25px;
451
+ padding: 5px;
452
+ }
453
+
454
+ .ffe-button--task:hover & {
455
+ border-color: @ffe-farge-fjell;
456
+ background-color: @ffe-farge-vann-30-hover;
457
+ fill: @ffe-farge-fjell;
489
458
  .native & {
490
459
  @media (prefers-color-scheme: dark) {
491
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
460
+ border-color: @ffe-farge-vann-30;
461
+ background-color: @ffe-farge-natt;
462
+ fill: @ffe-farge-hvit;
492
463
  }
493
464
  }
494
465
  }
package/less/inline-base-button.less CHANGED
@@ -15,90 +15,108 @@
15
15
  appearance: none;
16
16
  background-color: transparent;
17
17
  border: none;
18
- border-radius: 6px;
18
+ border-radius: 1.375rem;
19
19
  cursor: pointer;
20
20
  display: inline-flex;
21
21
  font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
22
22
  margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus
23
+ transition: all @ffe-transition-duration @ffe-ease;
23
24
  overflow: hidden;
24
25
  padding: 0 @ffe-spacing-2xs;
25
26
  text-decoration: none;
26
27
  .ffe-fontsize-body-text();
27
28
 
29
+ &:active {
30
+ transform: scale(0.97);
31
+ }
32
+
28
33
  &:active,
29
34
  &:focus {
30
- box-shadow: 0 0 0 3px @ffe-blue-focus;
31
- color: @ffe-blue-cobalt;
35
+ box-shadow: 0 0 0 2px @ffe-farge-vann;
32
36
  outline: none;
33
37
  .native & {
34
38
  @media (prefers-color-scheme: dark) {
35
- color: lighten(@ffe-blue-azure-darkmode, 10%);
39
+ box-shadow: 0 0 0 2px @ffe-farge-hvit;
36
40
  }
37
41
  }
38
42
  }
39
43
  }
40
44
 
41
45
  .ffe-inline-button--back {
42
- background: transparent no-repeat
43
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23676767' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
44
- color: @ffe-grey-charcoal;
45
- line-height: 26px;
46
- padding-left: 1em;
46
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23005aa4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
47
+ background-repeat: no-repeat;
48
+ background-position: 1.375rem center;
49
+ color: @ffe-farge-vann;
50
+ line-height: 24px;
51
+ padding: @ffe-spacing-xs @ffe-spacing-md @ffe-spacing-xs @ffe-spacing-2xl;
47
52
  outline: none;
48
53
  .native & {
49
54
  @media (prefers-color-scheme: dark) {
50
- color: @ffe-blue-azure-darkmode;
51
- background: transparent no-repeat
52
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%230a91ff' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
55
+ color: @ffe-farge-vann-70;
56
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%234d8cbf' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
53
57
  }
54
58
  }
55
59
 
56
60
  .ffe-inline-button__label {
61
+ transition: all @ffe-transition-duration @ffe-ease;
57
62
  border-bottom: 1px solid transparent;
58
63
  }
59
64
 
60
- &:focus,
61
- &:hover {
62
- background-color: transparent;
65
+ &:focus {
66
+ .native & {
67
+ @media (prefers-color-scheme: dark) {
68
+ color: @ffe-farge-vann-70;
69
+ }
70
+ }
63
71
  }
64
72
 
65
73
  &:hover {
66
- box-shadow: none;
74
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23002776' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
75
+
76
+ .native & {
77
+ @media (prefers-color-scheme: dark) {
78
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23b3cee4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
79
+ }
80
+ }
67
81
  }
68
82
 
69
83
  &:hover .ffe-inline-button__label {
70
- border-bottom-color: @ffe-grey-charcoal;
84
+ color: @ffe-farge-fjell;
85
+ border-bottom-color: @ffe-farge-fjell;
71
86
  .native & {
72
87
  @media (prefers-color-scheme: dark) {
73
- border-bottom-color: @ffe-blue-azure-darkmode;
88
+ color: @ffe-farge-vann-30;
89
+ border-bottom-color: @ffe-farge-vann-30;
74
90
  }
75
91
  }
76
92
  }
77
93
 
78
94
  &.ffe-inline-button--dark {
79
- background: transparent no-repeat
80
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23FFFFFF' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
81
- color: @ffe-white;
95
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23FFFFFF' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
96
+ color: @ffe-farge-hvit;
82
97
 
83
98
  &:hover .ffe-inline-button__label {
84
- border-bottom-color: @ffe-white;
99
+ border-bottom-color: @ffe-farge-hvit;
85
100
  }
86
101
  }
87
102
  }
88
103
 
89
104
  .ffe-inline-button--expand {
90
- color: @ffe-blue-azure;
105
+ color: @ffe-farge-vann;
106
+ padding: 0 @ffe-spacing-xs;
107
+ margin: 0;
108
+
91
109
  .native & {
92
110
  @media (prefers-color-scheme: dark) {
93
- color: @ffe-blue-azure-darkmode;
111
+ color: @ffe-farge-vann-70;
94
112
  }
95
113
  }
96
114
 
97
115
  &:hover {
98
- color: @ffe-blue-cobalt;
116
+ color: @ffe-farge-fjell;
99
117
  .native & {
100
118
  @media (prefers-color-scheme: dark) {
101
- color: lighten(@ffe-blue-azure-darkmode, 10%);
119
+ color: @ffe-farge-vann-30;
102
120
  }
103
121
  }
104
122
  }
@@ -106,13 +124,13 @@
106
124
 
107
125
  .ffe-inline-button--tertiary {
108
126
  align-content: center;
109
- color: @ffe-blue-azure;
127
+ color: @ffe-farge-vann;
110
128
  flex-wrap: wrap;
111
- padding: (@ffe-spacing-xs - 2) (@ffe-spacing-sm + 1) (@ffe-spacing-xs - 1);
112
- border: 3px solid transparent;
129
+ padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
130
+ border: 2px solid transparent;
113
131
  .native & {
114
132
  @media (prefers-color-scheme: dark) {
115
- color: @ffe-blue-azure-darkmode;
133
+ color: @ffe-farge-vann-30;
116
134
  }
117
135
  }
118
136
 
@@ -123,40 +141,26 @@
123
141
  width: 100%;
124
142
  }
125
143
 
126
- &:hover {
127
- color: @ffe-blue-cobalt;
128
- .native & {
129
- @media (prefers-color-scheme: dark) {
130
- color: lighten(@ffe-blue-azure-darkmode, 10%);
131
- }
132
- }
133
- }
134
-
135
144
  &:active,
136
145
  &:focus {
137
- border-radius: 4px;
138
146
  box-shadow: none;
139
- }
147
+ border-color: @ffe-farge-vann;
148
+ color: @ffe-farge-vann;
140
149
 
141
- &:focus {
142
- border-color: @ffe-blue-focus;
143
- color: @ffe-blue-cobalt;
144
150
  .native & {
145
151
  @media (prefers-color-scheme: dark) {
146
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
147
- color: lighten(@ffe-blue-azure-darkmode, 10%);
152
+ border-color: @ffe-farge-hvit;
153
+ box-shadow: none;
154
+ color: @ffe-farge-vann-30;
148
155
  }
149
156
  }
150
157
  }
151
158
 
152
- &:active {
153
- border: 2px solid @ffe-blue-azure;
154
- color: @ffe-blue-azure;
155
- padding: (@ffe-spacing-xs - 1) (@ffe-spacing-sm + 2) @ffe-spacing-xs;
159
+ &:hover {
160
+ color: @ffe-farge-fjell;
156
161
  .native & {
157
162
  @media (prefers-color-scheme: dark) {
158
- border-color: lighten(@ffe-blue-azure-darkmode, 10%);
159
- color: lighten(@ffe-blue-azure-darkmode, 10%);
163
+ color: @ffe-farge-hvit;
160
164
  }
161
165
  }
162
166
  }
@@ -202,6 +206,10 @@
202
206
  .ffe-inline-button--back & {
203
207
  transform: rotate(90deg);
204
208
  }
209
+
210
+ .ffe-inline-button--expand & {
211
+ transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
212
+ }
205
213
  }
206
214
 
207
215
  .ffe-inline-button__icon--left {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "11.1.1",
3
+ "version": "13.0.2",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -15,7 +15,7 @@
15
15
  "test": "npm run lint"
16
16
  },
17
17
  "devDependencies": {
18
- "@sb1/ffe-core": "^18.3.0",
18
+ "@sb1/ffe-core": "^19.1.0",
19
19
  "stylelint": "^13.0.0"
20
20
  },
21
21
  "peerDependencies": {
@@ -24,5 +24,5 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "5121a32ae6e04698c9b3ae21220220ddc6967bf4"
27
+ "gitHead": "8886f3c7f73c8dc931a338ef3ad3d504a068c2ed"
28
28
  }