@sb1/ffe-buttons 100.6.0 → 100.6.1

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/css/buttons.css +55 -144
  2. package/package.json +4 -4
package/css/buttons.css CHANGED
@@ -1,45 +1,35 @@
1
1
  .ffe-button-group {
2
- display: -webkit-box;
3
2
  display: -ms-flexbox;
4
3
  display: flex;
5
- -webkit-box-orient: vertical;
6
- -webkit-box-direction: normal;
7
- -ms-flex-direction: column;
8
- flex-direction: column;
4
+ -ms-flex-direction: column;
5
+ flex-direction: column;
9
6
  padding: var(--ffe-spacing-xl) 0;
10
7
  width: 100%;
11
8
  }
12
9
  .ffe-button-group .ffe-button,
13
10
  .ffe-button-group .ffe-inline-button {
14
- -webkit-box-pack: center;
15
- -ms-flex-pack: center;
16
- justify-content: center;
11
+ -ms-flex-pack: center;
12
+ justify-content: center;
17
13
  margin: 0 0 var(--ffe-spacing-xs);
18
14
  }
19
15
  .ffe-button-group--thin {
20
16
  padding: 0;
21
17
  }
22
18
  .ffe-button-group--inline {
23
- -webkit-box-align: center;
24
- -ms-flex-align: center;
25
- align-items: center;
19
+ -ms-flex-align: center;
20
+ align-items: center;
26
21
  }
27
22
  .ffe-button-group--inline .ffe-button,
28
23
  .ffe-button-group--inline .ffe-inline-button {
29
24
  display: inline;
30
- width: -webkit-fit-content;
31
- width: -moz-fit-content;
32
25
  width: fit-content;
33
26
  }
34
27
  @media (min-width: 480px) {
35
28
  .ffe-button-group {
36
- display: -webkit-inline-box;
37
29
  display: -ms-inline-flexbox;
38
30
  display: inline-flex;
39
- -webkit-box-orient: horizontal;
40
- -webkit-box-direction: normal;
41
- -ms-flex-direction: row;
42
- flex-direction: row;
31
+ -ms-flex-direction: row;
32
+ flex-direction: row;
43
33
  width: auto;
44
34
  -ms-flex-wrap: wrap;
45
35
  flex-wrap: wrap;
@@ -56,33 +46,25 @@
56
46
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
57
47
  --padding-lg: calc(12px - var(--border-width));
58
48
  --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
59
- -webkit-box-align: center;
60
- -ms-flex-align: center;
61
- align-items: center;
62
- -webkit-appearance: none;
63
- -moz-appearance: none;
64
- appearance: none;
49
+ -ms-flex-align: center;
50
+ align-items: center;
51
+ appearance: none;
65
52
  border: var(--border-width) solid transparent;
66
53
  border-radius: 6em;
67
54
  color: var(--ffe-color-component-button-primary-foreground-default);
68
55
  cursor: pointer;
69
- display: -webkit-box;
70
56
  display: -ms-flexbox;
71
57
  display: flex;
72
58
  font-family: var(--ffe-g-font-strong);
73
- -webkit-box-pack: center;
74
- -ms-flex-pack: center;
75
- justify-content: center;
59
+ -ms-flex-pack: center;
60
+ justify-content: center;
76
61
  line-height: 1.5;
77
62
  overflow: hidden;
78
63
  position: relative;
79
64
  text-align: center;
80
65
  text-decoration: none;
81
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
82
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
83
66
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
84
67
  -webkit-user-select: none;
85
- -moz-user-select: none;
86
68
  -ms-user-select: none;
87
69
  user-select: none;
88
70
  hyphens: auto;
@@ -97,10 +79,7 @@
97
79
  background: transparent;
98
80
  border-radius: 1.5rem;
99
81
  inset: -5px;
100
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
101
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
102
- -webkit-transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
103
- -o-transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
82
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
104
83
  transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
105
84
  }
106
85
  .ffe-button:focus::after {
@@ -115,8 +94,7 @@
115
94
  overflow: unset;
116
95
  }
117
96
  .ffe-button:active {
118
- -webkit-transform: scale(0.97);
119
- transform: scale(0.97);
97
+ transform: scale(0.97);
120
98
  background-color: var(--ffe-color-component-button-primary-fill-pressed);
121
99
  }
122
100
  .ffe-button:visited {
@@ -124,7 +102,6 @@
124
102
  }
125
103
  @media (min-width: 480px) {
126
104
  .ffe-button {
127
- display: -webkit-inline-box;
128
105
  display: -ms-inline-flexbox;
129
106
  display: inline-flex;
130
107
  width: auto;
@@ -134,15 +111,12 @@
134
111
  display: block;
135
112
  }
136
113
  .ffe-button--icon-only {
137
- display: -webkit-box;
138
114
  display: -ms-flexbox;
139
115
  display: flex;
140
- -webkit-box-align: center;
141
- -ms-flex-align: center;
142
- align-items: center;
143
- -webkit-box-pack: center;
144
- -ms-flex-pack: center;
145
- justify-content: center;
116
+ -ms-flex-align: center;
117
+ align-items: center;
118
+ -ms-flex-pack: center;
119
+ justify-content: center;
146
120
  }
147
121
  .ffe-button--icon-only .ffe-icons {
148
122
  background-color: var(--icon-only-color);
@@ -175,8 +149,7 @@
175
149
  color: var(--ffe-color-component-button-action-foreground-default);
176
150
  }
177
151
  .ffe-button--action:active {
178
- -webkit-transform: scale(0.97);
179
- transform: scale(0.97);
152
+ transform: scale(0.97);
180
153
  background-color: var(--ffe-color-component-button-action-fill-pressed);
181
154
  }
182
155
  @media (hover: hover) and (pointer: fine) {
@@ -195,8 +168,7 @@
195
168
  color: var(--text-color);
196
169
  }
197
170
  .ffe-button--primary:active {
198
- -webkit-transform: scale(0.97);
199
- transform: scale(0.97);
171
+ transform: scale(0.97);
200
172
  --background-color: var(--ffe-color-component-button-primary-fill-pressed);
201
173
  }
202
174
  @media (hover: hover) and (pointer: fine) {
@@ -235,8 +207,7 @@
235
207
  }
236
208
  .ffe-button--secondary:active,
237
209
  .ffe-button--expand:active {
238
- -webkit-transform: scale(0.97);
239
- transform: scale(0.97);
210
+ transform: scale(0.97);
240
211
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
241
212
  border-color: var(--ffe-color-component-button-secondary-border-pressed);
242
213
  color: var(--ffe-color-component-button-secondary-foreground-hover);
@@ -248,11 +219,7 @@
248
219
  }
249
220
  .ffe-button--shortcut .ffe-button__icon {
250
221
  color: var(--ffe-color-component-button-secondary-foreground-default);
251
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
252
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
253
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease);
254
222
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
255
- transition: transform var(--ffe-transition-duration) var(--ffe-ease), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
256
223
  }
257
224
  @media (hover: hover) and (pointer: fine) {
258
225
  .ffe-button--shortcut:hover {
@@ -264,8 +231,7 @@
264
231
  }
265
232
  }
266
233
  .ffe-button--shortcut:active {
267
- -webkit-transform: scale(0.97);
268
- transform: scale(0.97);
234
+ transform: scale(0.97);
269
235
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
270
236
  color: var(--ffe-color-component-button-secondary-foreground-hover);
271
237
  }
@@ -279,8 +245,7 @@
279
245
  }
280
246
  .ffe-button--shortcut:hover .ffe-button__icon,
281
247
  .ffe-button--shortcut:focus .ffe-button__icon {
282
- -webkit-transform: translateX(4px);
283
- transform: translateX(4px);
248
+ transform: translateX(4px);
284
249
  }
285
250
  .ffe-button--expanded.ffe-button--sm {
286
251
  padding: var(--padding-sm);
@@ -296,15 +261,12 @@
296
261
  background: transparent;
297
262
  border-radius: 1.75rem;
298
263
  border: none;
299
- -webkit-box-shadow: none;
300
- box-shadow: none;
264
+ box-shadow: none;
301
265
  color: var(--text-color);
302
266
  display: inline-block;
303
267
  padding: 0;
304
268
  margin: var(--ffe-spacing-2xs);
305
269
  text-align: left;
306
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
307
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
308
270
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
309
271
  width: auto;
310
272
  }
@@ -317,29 +279,22 @@
317
279
  border-radius: 50%;
318
280
  height: 48px;
319
281
  width: 48px;
320
- display: -webkit-box;
321
282
  display: -ms-flexbox;
322
283
  display: flex;
323
- -webkit-box-align: center;
324
- -ms-flex-align: center;
325
- align-items: center;
326
- -webkit-box-pack: center;
327
- -ms-flex-pack: center;
328
- justify-content: center;
329
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
330
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
284
+ -ms-flex-align: center;
285
+ align-items: center;
286
+ -ms-flex-pack: center;
287
+ justify-content: center;
331
288
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
332
289
  }
333
290
  .ffe-button--task :where(.ffe-button__icon) :where(.ffe-icons) {
334
291
  color: var(--icon-color);
335
292
  }
336
293
  .ffe-button--task:focus::after {
337
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
338
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
294
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
339
295
  }
340
296
  .ffe-button--task:active {
341
- -webkit-transform: scale(0.97);
342
- transform: scale(0.97);
297
+ transform: scale(0.97);
343
298
  background-color: transparent;
344
299
  }
345
300
  .ffe-button--task:active .ffe-button__icon {
@@ -356,46 +311,35 @@
356
311
  pointer-events: none;
357
312
  }
358
313
  .ffe-button--loading .ffe-button__label {
359
- -webkit-transform: translateY(-32px);
360
- transform: translateY(-32px);
314
+ transform: translateY(-32px);
361
315
  opacity: 0;
362
316
  }
363
317
  .ffe-button--loading .ffe-button__spinner {
364
318
  opacity: 1;
365
- -webkit-transform: none;
366
- transform: none;
319
+ transform: none;
367
320
  visibility: visible;
368
321
  }
369
322
  .ffe-button__label {
370
- -webkit-box-align: center;
371
- -ms-flex-align: center;
372
- align-items: center;
373
- display: -webkit-box;
323
+ -ms-flex-align: center;
324
+ align-items: center;
374
325
  display: -ms-flexbox;
375
326
  display: flex;
376
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
377
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
378
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease);
379
327
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
380
- transition: transform var(--ffe-transition-duration) var(--ffe-ease), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease);
381
328
  gap: var(--ffe-spacing-xs);
382
329
  }
383
330
  .ffe-button__spinner {
384
331
  inset: 0;
385
332
  opacity: 0;
386
333
  position: absolute;
387
- -webkit-transform: translateY(24px);
388
- transform: translateY(24px);
389
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
390
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
334
+ transform: translateY(24px);
391
335
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
392
336
  visibility: hidden;
337
+ display: -ms-grid;
393
338
  display: grid;
394
339
  place-items: center;
395
340
  }
396
341
  .ffe-button__spinner::after {
397
- -webkit-animation: 1s linear infinite button-loading-spin;
398
- animation: 1s linear infinite button-loading-spin;
342
+ animation: 1s linear infinite button-loading-spin;
399
343
  border: 3px solid currentcolor;
400
344
  border-radius: 50%;
401
345
  border-top-color: transparent;
@@ -404,75 +348,52 @@
404
348
  height: 1.375rem;
405
349
  aspect-ratio: 1;
406
350
  }
407
- @-webkit-keyframes button-loading-spin {
408
- from {
409
- -webkit-transform: none;
410
- transform: none;
411
- }
412
- to {
413
- -webkit-transform: rotate(360deg);
414
- transform: rotate(360deg);
415
- }
416
- }
417
351
  @keyframes button-loading-spin {
418
352
  from {
419
- -webkit-transform: none;
420
- transform: none;
353
+ transform: none;
421
354
  }
422
355
  to {
423
- -webkit-transform: rotate(360deg);
424
- transform: rotate(360deg);
356
+ transform: rotate(360deg);
425
357
  }
426
358
  }
427
359
  .ffe-inline-button {
428
- -webkit-appearance: none;
429
- -moz-appearance: none;
430
- appearance: none;
360
+ appearance: none;
431
361
  background-color: transparent;
432
362
  border: none;
433
363
  border-radius: 1.375rem;
434
364
  cursor: pointer;
435
- display: -webkit-inline-box;
436
365
  display: -ms-inline-flexbox;
437
366
  display: inline-flex;
438
367
  font-family: var(--ffe-g-font);
439
368
  margin: 0 -4px;
440
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
441
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
442
369
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
443
370
  overflow: hidden;
444
371
  padding: 0 var(--ffe-spacing-2xs);
445
372
  text-decoration: none;
446
373
  font-size: var(--ffe-fontsize-body-text);
447
- -webkit-box-align: center;
448
- -ms-flex-align: center;
449
- align-items: center;
374
+ -ms-flex-align: center;
375
+ align-items: center;
450
376
  -webkit-user-select: none;
451
- -moz-user-select: none;
452
377
  -ms-user-select: none;
453
378
  user-select: none;
454
379
  /* Forhindrer tekstmarkering */
455
380
  }
456
381
  .ffe-inline-button:active {
457
- -webkit-transform: scale(0.97);
458
- transform: scale(0.97);
382
+ transform: scale(0.97);
459
383
  }
460
384
  .ffe-inline-button:focus {
461
- -webkit-box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
462
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
385
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
463
386
  outline: none;
464
387
  }
465
388
  .ffe-inline-button:focus:not(:focus-visible) {
466
- -webkit-box-shadow: none;
467
- box-shadow: none;
389
+ box-shadow: none;
468
390
  }
469
391
  .ffe-inline-button__icon {
470
392
  margin-bottom: -2px;
471
393
  will-change: transform, opacity;
472
394
  }
473
395
  .ffe-inline-button--expanded .ffe-inline-button__icon {
474
- -webkit-transform: rotateZ(180deg);
475
- transform: rotateZ(180deg);
396
+ transform: rotateZ(180deg);
476
397
  }
477
398
  .ffe-inline-button__icon--left {
478
399
  margin-right: var(--ffe-spacing-2xs);
@@ -510,17 +431,12 @@
510
431
  background-color: var(--background-color);
511
432
  padding: 0 12px;
512
433
  margin: 0;
513
- -webkit-box-align: center;
514
- -ms-flex-align: center;
515
- align-items: center;
434
+ -ms-flex-align: center;
435
+ align-items: center;
516
436
  }
517
437
  .ffe-inline-button--expand .ffe-inline-button__icon {
518
438
  color: var(--text-color);
519
- -webkit-transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
520
- transition: -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
521
- -o-transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
522
439
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
523
- transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back), -webkit-transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
524
440
  }
525
441
  @media (hover: hover) and (pointer: fine) {
526
442
  .ffe-inline-button--expand:hover {
@@ -576,22 +492,18 @@
576
492
  width: 100%;
577
493
  }
578
494
  .ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label {
579
- display: -webkit-box;
580
495
  display: -ms-flexbox;
581
496
  display: flex;
582
- -webkit-box-align: center;
583
- -ms-flex-align: center;
584
- align-items: center;
585
- -webkit-box-pack: center;
586
- -ms-flex-pack: center;
587
- justify-content: center;
497
+ -ms-flex-align: center;
498
+ align-items: center;
499
+ -ms-flex-pack: center;
500
+ justify-content: center;
588
501
  }
589
502
  .ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label::after {
590
503
  display: none;
591
504
  }
592
505
  .ffe-inline-button--tertiary:focus {
593
- -webkit-box-shadow: none;
594
- box-shadow: none;
506
+ box-shadow: none;
595
507
  border-color: var(--ffe-color-border-interactive-focus);
596
508
  color: var(--ffe-color-component-button-tertiary-foreground-default);
597
509
  }
@@ -600,8 +512,7 @@
600
512
  }
601
513
  .ffe-inline-button--tertiary:active,
602
514
  .ffe-inline-button--tertiary.ffe-button--pressed {
603
- -webkit-transform: scale(0.97);
604
- transform: scale(0.97);
515
+ transform: scale(0.97);
605
516
  background-color: var(--ffe-color-default-feedback-success-strongest);
606
517
  }
607
518
  @media (hover: hover) and (pointer: fine) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "100.6.0",
3
+ "version": "100.6.1",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -19,13 +19,13 @@
19
19
  "build": "lessc less/buttons.less css/buttons.css --autoprefix"
20
20
  },
21
21
  "dependencies": {
22
- "@sb1/ffe-core": "^100.6.0"
22
+ "@sb1/ffe-core": "^100.6.1"
23
23
  },
24
24
  "devDependencies": {
25
- "@sb1/ffe-buildtool": "^100.6.0"
25
+ "@sb1/ffe-buildtool": "^100.6.1"
26
26
  },
27
27
  "publishConfig": {
28
28
  "access": "public"
29
29
  },
30
- "gitHead": "2fb5ef0325f4cc6fb7e3e5ca177e34486828838d"
30
+ "gitHead": "f579e35bc4c3f99219ab53a3572e60311e2f5077"
31
31
  }