@sb1/ffe-buttons 100.12.3 → 101.0.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 (4) hide show
  1. package/css/buttons.css +22 -49
  2. package/less/base-button.less +1 -0
  3. package/less/inline-base-button.less +1 -0
  4. package/package.json +4 -4
package/css/buttons.css CHANGED
@@ -1,23 +1,19 @@
1
1
  .ffe-button-group {
2
- display: -ms-flexbox;
3
2
  display: flex;
4
- -ms-flex-direction: column;
5
- flex-direction: column;
3
+ flex-direction: column;
6
4
  padding: var(--ffe-spacing-xl) 0;
7
5
  width: 100%;
8
6
  }
9
7
  .ffe-button-group .ffe-button,
10
8
  .ffe-button-group .ffe-inline-button {
11
- -ms-flex-pack: center;
12
- justify-content: center;
9
+ justify-content: center;
13
10
  margin: 0 0 var(--ffe-spacing-xs);
14
11
  }
15
12
  .ffe-button-group--thin {
16
13
  padding: 0;
17
14
  }
18
15
  .ffe-button-group--inline {
19
- -ms-flex-align: center;
20
- align-items: center;
16
+ align-items: center;
21
17
  }
22
18
  .ffe-button-group--inline .ffe-button,
23
19
  .ffe-button-group--inline .ffe-inline-button {
@@ -26,13 +22,10 @@
26
22
  }
27
23
  @media (min-width: 480px) {
28
24
  .ffe-button-group {
29
- display: -ms-inline-flexbox;
30
25
  display: inline-flex;
31
- -ms-flex-direction: row;
32
- flex-direction: row;
26
+ flex-direction: row;
33
27
  width: auto;
34
- -ms-flex-wrap: wrap;
35
- flex-wrap: wrap;
28
+ flex-wrap: wrap;
36
29
  gap: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
37
30
  }
38
31
  .ffe-button-group .ffe-button,
@@ -46,18 +39,16 @@
46
39
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
47
40
  --padding-lg: calc(12px - var(--border-width));
48
41
  --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
49
- -ms-flex-align: center;
50
- align-items: center;
42
+ align-items: center;
43
+ -webkit-appearance: none;
51
44
  appearance: none;
52
45
  border: var(--border-width) solid transparent;
53
46
  border-radius: 6em;
54
47
  color: var(--ffe-color-component-button-primary-foreground-default);
55
48
  cursor: pointer;
56
- display: -ms-flexbox;
57
49
  display: flex;
58
50
  font-family: var(--ffe-g-font-strong);
59
- -ms-flex-pack: center;
60
- justify-content: center;
51
+ justify-content: center;
61
52
  line-height: 1.5;
62
53
  overflow: hidden;
63
54
  position: relative;
@@ -65,9 +56,9 @@
65
56
  text-decoration: none;
66
57
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
67
58
  -webkit-user-select: none;
68
- -ms-user-select: none;
69
59
  user-select: none;
70
- hyphens: auto;
60
+ -webkit-hyphens: auto;
61
+ hyphens: auto;
71
62
  width: 100%;
72
63
  font-size: var(--ffe-fontsize-button);
73
64
  }
@@ -102,7 +93,6 @@
102
93
  }
103
94
  @media (min-width: 480px) {
104
95
  .ffe-button {
105
- display: -ms-inline-flexbox;
106
96
  display: inline-flex;
107
97
  width: auto;
108
98
  }
@@ -111,12 +101,9 @@
111
101
  display: block;
112
102
  }
113
103
  .ffe-button--icon-only {
114
- display: -ms-flexbox;
115
104
  display: flex;
116
- -ms-flex-align: center;
117
- align-items: center;
118
- -ms-flex-pack: center;
119
- justify-content: center;
105
+ align-items: center;
106
+ justify-content: center;
120
107
  }
121
108
  .ffe-button--icon-only .ffe-icons {
122
109
  background-color: var(--icon-only-color);
@@ -279,12 +266,9 @@
279
266
  border-radius: 50%;
280
267
  height: 48px;
281
268
  width: 48px;
282
- display: -ms-flexbox;
283
269
  display: flex;
284
- -ms-flex-align: center;
285
- align-items: center;
286
- -ms-flex-pack: center;
287
- justify-content: center;
270
+ align-items: center;
271
+ justify-content: center;
288
272
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
289
273
  }
290
274
  .ffe-button--task :where(.ffe-button__icon) :where(.ffe-icons) {
@@ -320,9 +304,7 @@
320
304
  visibility: visible;
321
305
  }
322
306
  .ffe-button__label {
323
- -ms-flex-align: center;
324
- align-items: center;
325
- display: -ms-flexbox;
307
+ align-items: center;
326
308
  display: flex;
327
309
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
328
310
  gap: var(--ffe-spacing-xs);
@@ -334,7 +316,6 @@
334
316
  transform: translateY(24px);
335
317
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
336
318
  visibility: hidden;
337
- display: -ms-grid;
338
319
  display: grid;
339
320
  place-items: center;
340
321
  }
@@ -357,12 +338,12 @@
357
338
  }
358
339
  }
359
340
  .ffe-inline-button {
341
+ -webkit-appearance: none;
360
342
  appearance: none;
361
343
  background-color: transparent;
362
344
  border: none;
363
345
  border-radius: 1.375rem;
364
346
  cursor: pointer;
365
- display: -ms-inline-flexbox;
366
347
  display: inline-flex;
367
348
  font-family: var(--ffe-g-font);
368
349
  margin: 0 -4px;
@@ -371,10 +352,8 @@
371
352
  padding: 0 var(--ffe-spacing-2xs);
372
353
  text-decoration: none;
373
354
  font-size: var(--ffe-fontsize-body-text);
374
- -ms-flex-align: center;
375
- align-items: center;
355
+ align-items: center;
376
356
  -webkit-user-select: none;
377
- -ms-user-select: none;
378
357
  user-select: none;
379
358
  /* Forhindrer tekstmarkering */
380
359
  }
@@ -431,8 +410,7 @@
431
410
  background-color: var(--background-color);
432
411
  padding: 0 12px;
433
412
  margin: 0;
434
- -ms-flex-align: center;
435
- align-items: center;
413
+ align-items: center;
436
414
  }
437
415
  .ffe-inline-button--expand .ffe-inline-button__icon {
438
416
  color: var(--text-color);
@@ -454,11 +432,9 @@
454
432
  --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
455
433
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
456
434
  --padding-lg: calc(12px - var(--border-width));
457
- -ms-flex-line-pack: center;
458
- align-content: center;
435
+ align-content: center;
459
436
  color: var(--ffe-color-component-button-tertiary-foreground-default);
460
- -ms-flex-wrap: wrap;
461
- flex-wrap: wrap;
437
+ flex-wrap: wrap;
462
438
  padding: calc(var(--ffe-spacing-xs) - var(--border-width)) var(--ffe-spacing-sm);
463
439
  border: 2px solid transparent;
464
440
  line-height: calc(var(--icon-size-md) - var(--border-width));
@@ -492,12 +468,9 @@
492
468
  width: 100%;
493
469
  }
494
470
  .ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label {
495
- display: -ms-flexbox;
496
471
  display: flex;
497
- -ms-flex-align: center;
498
- align-items: center;
499
- -ms-flex-pack: center;
500
- justify-content: center;
472
+ align-items: center;
473
+ justify-content: center;
501
474
  }
502
475
  .ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label::after {
503
476
  display: none;
package/less/base-button.less CHANGED
@@ -10,6 +10,7 @@
10
10
  );
11
11
 
12
12
  align-items: center;
13
+ -webkit-appearance: none;
13
14
  appearance: none;
14
15
  border: var(--border-width) solid transparent;
15
16
  border-radius: 6em;
package/less/inline-base-button.less CHANGED
@@ -1,4 +1,5 @@
1
1
  .ffe-inline-button {
2
+ -webkit-appearance: none;
2
3
  appearance: none;
3
4
  background-color: transparent;
4
5
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "100.12.3",
3
+ "version": "101.0.0",
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.12.3"
22
+ "@sb1/ffe-core": "^101.0.0"
23
23
  },
24
24
  "devDependencies": {
25
- "@sb1/ffe-buildtool": "^100.12.3"
25
+ "@sb1/ffe-buildtool": "^101.0.0"
26
26
  },
27
27
  "publishConfig": {
28
28
  "access": "public"
29
29
  },
30
- "gitHead": "c250edc3d20e5ed115c5c5951495d700e96a3be3"
30
+ "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
31
31
  }