@sb1/ffe-buttons 21.0.5 → 21.2.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 +56 -12
  2. package/less/base-button.less +281 -204
  3. package/less/inline-base-button.less +5 -5
  4. package/package.json +3 -3
package/css/buttons.css CHANGED
@@ -51,13 +51,18 @@
51
51
  }
52
52
  }
53
53
  .ffe-button {
54
+ --border-width: 2px;
55
+ --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
56
+ --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
57
+ --padding-lg: calc(12px - var(--border-width));
58
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
54
59
  -webkit-box-align: center;
55
60
  -ms-flex-align: center;
56
61
  align-items: center;
57
62
  -webkit-appearance: none;
58
63
  -moz-appearance: none;
59
64
  appearance: none;
60
- border: 2px solid transparent;
65
+ border: var(--border-width) solid transparent;
61
66
  border-radius: 6em;
62
67
  color: var(--ffe-color-component-button-primary-foreground-default);
63
68
  cursor: pointer;
@@ -70,7 +75,6 @@
70
75
  justify-content: center;
71
76
  line-height: 1.5;
72
77
  overflow: hidden;
73
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
74
78
  position: relative;
75
79
  text-align: center;
76
80
  text-decoration: none;
@@ -129,10 +133,43 @@
129
133
  .ffe-button .ffe-icons {
130
134
  display: block;
131
135
  }
136
+ .ffe-button--icon-only {
137
+ display: -webkit-box;
138
+ display: -ms-flexbox;
139
+ 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;
146
+ }
147
+ .ffe-button--icon-only .ffe-icons {
148
+ background-color: var(--icon-only-color);
149
+ }
150
+ .ffe-button--sm {
151
+ padding: var(--padding-sm) 12px;
152
+ font-size: var(--ffe-fontsize-button-sm);
153
+ }
154
+ .ffe-button--sm.ffe-button--icon-only {
155
+ padding: var(--padding-sm);
156
+ }
157
+ .ffe-button--md {
158
+ padding: var(--padding-md) var(--ffe-spacing-sm);
159
+ }
160
+ .ffe-button--md.ffe-button--icon-only {
161
+ padding: var(--padding-md);
162
+ }
163
+ .ffe-button--lg {
164
+ padding: var(--padding-lg) var(--ffe-spacing-md);
165
+ }
166
+ .ffe-button--lg.ffe-button--icon-only {
167
+ padding: var(--padding-md);
168
+ }
132
169
  .ffe-button--action {
170
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
133
171
  background-color: var(--ffe-color-component-button-action-fill-default);
134
172
  color: var(--ffe-color-component-button-action-foreground-default);
135
- border: none;
136
173
  }
137
174
  .ffe-button--action :where(.ffe-button__icon) {
138
175
  color: var(--ffe-color-component-button-action-foreground-default);
@@ -150,6 +187,7 @@
150
187
  .ffe-button--primary {
151
188
  --background-color: var(--ffe-color-component-button-primary-fill-default);
152
189
  --text-color: var(--ffe-color-component-button-primary-foreground-default);
190
+ --icon-only-color: var(--ffe-color-component-button-primary-foreground-default);
153
191
  background-color: var(--background-color);
154
192
  color: var(--text-color);
155
193
  }
@@ -171,6 +209,7 @@
171
209
  --background-color: var(--ffe-color-component-button-secondary-fill-default);
172
210
  --border-color: var(--ffe-color-component-button-secondary-border-default);
173
211
  --text-color: var(--ffe-color-component-button-secondary-foreground-default);
212
+ --icon-only-color: var(--ffe-color-component-button-secondary-foreground-default);
174
213
  background-color: var(--background-color);
175
214
  border: solid 2px var(--border-color);
176
215
  color: var(--text-color);
@@ -204,7 +243,7 @@
204
243
  }
205
244
  .ffe-button--shortcut {
206
245
  background-color: var(--ffe-color-component-button-secondary-fill-default);
207
- border: solid 2px var(--ffe-color-component-button-secondary-border-default);
246
+ border: solid var(--border-width) var(--ffe-color-component-button-secondary-border-default);
208
247
  color: var(--ffe-color-component-button-secondary-foreground-default);
209
248
  }
210
249
  .ffe-button--shortcut .ffe-button__icon {
@@ -243,9 +282,14 @@
243
282
  -webkit-transform: translateX(4px);
244
283
  transform: translateX(4px);
245
284
  }
246
- .ffe-button--expanded {
247
- padding: var(--ffe-spacing-xs);
248
- width: 45px;
285
+ .ffe-button--expanded.ffe-button--sm {
286
+ padding: var(--padding-sm);
287
+ }
288
+ .ffe-button--expanded.ffe-button--md {
289
+ padding: var(--padding-md);
290
+ }
291
+ .ffe-button--expanded.ffe-button--lg {
292
+ padding: var(--padding-lg);
249
293
  }
250
294
  .ffe-button--task {
251
295
  --text-color: var(--ffe-color-foreground-emphasis);
@@ -425,10 +469,10 @@
425
469
  transform: rotateZ(180deg);
426
470
  }
427
471
  .ffe-inline-button__icon--left {
428
- margin-right: 6px;
472
+ margin-right: var(--ffe-spacing-2xs);
429
473
  }
430
474
  .ffe-inline-button__icon--right {
431
- margin-left: 6px;
475
+ margin-left: var(--ffe-spacing-2xs);
432
476
  }
433
477
  .ffe-inline-button--back {
434
478
  background-color: var(--background-color);
@@ -458,7 +502,7 @@
458
502
  --background-color: var(--ffe-color-component-button-secondary-fill-default);
459
503
  color: var(--text-color);
460
504
  background-color: var(--background-color);
461
- padding: 0 var(--ffe-spacing-xs);
505
+ padding: 0 12px;
462
506
  margin: 0;
463
507
  -webkit-box-align: center;
464
508
  -ms-flex-align: center;
@@ -484,13 +528,13 @@
484
528
  }
485
529
  .ffe-inline-button--tertiary {
486
530
  --icon-size-md: 1.5rem;
487
- --border-width: 1px;
531
+ --border-width: 2px;
488
532
  -ms-flex-line-pack: center;
489
533
  align-content: center;
490
534
  color: var(--ffe-color-component-button-tertiary-foreground-default);
491
535
  -ms-flex-wrap: wrap;
492
536
  flex-wrap: wrap;
493
- padding: var(--ffe-spacing-xs) calc(var(--ffe-spacing-sm));
537
+ padding: calc(var(--ffe-spacing-xs) - var(--border-width)) var(--ffe-spacing-sm);
494
538
  border: 2px solid transparent;
495
539
  line-height: calc(var(--icon-size-md) - var(--border-width));
496
540
  }
package/less/base-button.less CHANGED
@@ -1,9 +1,15 @@
1
1
  @import (reference) '@sb1/ffe-core/less/breakpoints';
2
2
 
3
3
  .ffe-button {
4
+ --border-width: 2px;
5
+ --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
6
+ --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
7
+ --padding-lg: calc(12px - var(--border-width));
8
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
9
+
4
10
  align-items: center;
5
11
  appearance: none;
6
- border: 2px solid transparent;
12
+ border: var(--border-width) solid transparent;
7
13
  border-radius: 6em;
8
14
  color: var(--ffe-color-component-button-primary-foreground-default);
9
15
  cursor: pointer;
@@ -12,7 +18,6 @@
12
18
  justify-content: center;
13
19
  line-height: 1.5; // 16 * 1.5 = 24(height of ffe-icons size md)
14
20
  overflow: hidden;
15
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
16
21
  position: relative;
17
22
  text-align: center;
18
23
  text-decoration: none;
@@ -67,125 +72,200 @@
67
72
  .ffe-icons {
68
73
  display: block;
69
74
  }
70
- }
71
75
 
72
- .ffe-button--action {
73
- background-color: var(--ffe-color-component-button-action-fill-default);
74
- color: var(--ffe-color-component-button-action-foreground-default);
75
- border: none;
76
+ &--icon-only {
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
76
80
 
77
- :where(.ffe-button__icon) {
78
- color: var(--ffe-color-component-button-action-foreground-default);
81
+ .ffe-icons {
82
+ background-color: var(--icon-only-color);
83
+ }
79
84
  }
80
85
 
81
- &:active {
82
- transform: scale(0.97);
83
- background-color: var(--ffe-color-component-button-action-fill-pressed);
84
- }
86
+ &--sm {
87
+ padding: var(--padding-sm) 12px;
88
+ font-size: var(--ffe-fontsize-button-sm);
85
89
 
86
- @media (hover: hover) and (pointer: fine) {
87
- &:hover:not(:active):not(.ffe-button--pressed) {
88
- background-color: var(
89
- --ffe-color-component-button-action-fill-hover
90
- );
90
+ &.ffe-button--icon-only {
91
+ padding: var(--padding-sm);
91
92
  }
92
93
  }
93
- }
94
94
 
95
- .ffe-button--primary {
96
- --background-color: var(--ffe-color-component-button-primary-fill-default);
97
- --text-color: var(--ffe-color-component-button-primary-foreground-default);
95
+ &--md {
96
+ padding: var(--padding-md) var(--ffe-spacing-sm);
97
+
98
+ &.ffe-button--icon-only {
99
+ padding: var(--padding-md);
100
+ }
101
+ }
98
102
 
99
- background-color: var(--background-color);
100
- color: var(--text-color);
103
+ &--lg {
104
+ padding: var(--padding-lg) var(--ffe-spacing-md);
101
105
 
102
- :where(.ffe-button__icon) {
103
- color: var(--text-color);
106
+ &.ffe-button--icon-only {
107
+ padding: var(--padding-md); //Md for å kompansere for hvor stort lg-ikonet er i forhold til lg-knappen
108
+ }
104
109
  }
105
110
 
106
- &:active {
107
- transform: scale(0.97);
111
+ &--action {
112
+ --icon-only-color: var(
113
+ --ffe-color-component-button-action-foreground-default
114
+ );
115
+
116
+ background-color: var(--ffe-color-component-button-action-fill-default);
117
+ color: var(--ffe-color-component-button-action-foreground-default);
108
118
 
119
+ :where(.ffe-button__icon) {
120
+ color: var(--ffe-color-component-button-action-foreground-default);
121
+ }
122
+
123
+ &:active {
124
+ transform: scale(0.97);
125
+ background-color: var(
126
+ --ffe-color-component-button-action-fill-pressed
127
+ );
128
+ }
129
+
130
+ @media (hover: hover) and (pointer: fine) {
131
+ &:hover:not(:active):not(.ffe-button--pressed) {
132
+ background-color: var(
133
+ --ffe-color-component-button-action-fill-hover
134
+ );
135
+ }
136
+ }
137
+ }
138
+
139
+ &--primary {
109
140
  --background-color: var(
110
- --ffe-color-component-button-primary-fill-pressed
141
+ --ffe-color-component-button-primary-fill-default
111
142
  );
112
- }
143
+ --text-color: var(
144
+ --ffe-color-component-button-primary-foreground-default
145
+ );
146
+ --icon-only-color: var(
147
+ --ffe-color-component-button-primary-foreground-default
148
+ );
149
+
150
+ background-color: var(--background-color);
151
+ color: var(--text-color);
152
+
153
+ :where(.ffe-button__icon) {
154
+ color: var(--text-color);
155
+ }
156
+
157
+ &:active {
158
+ transform: scale(0.97);
113
159
 
114
- @media (hover: hover) and (pointer: fine) {
115
- &:hover {
116
160
  --background-color: var(
117
- --ffe-color-component-button-primary-fill-hover
161
+ --ffe-color-component-button-primary-fill-pressed
118
162
  );
119
163
  }
164
+
165
+ @media (hover: hover) and (pointer: fine) {
166
+ &:hover {
167
+ --background-color: var(
168
+ --ffe-color-component-button-primary-fill-hover
169
+ );
170
+ }
171
+ }
120
172
  }
121
- }
122
173
 
123
- .ffe-button--secondary,
124
- .ffe-button--expand {
125
- --background-color: var(
126
- --ffe-color-component-button-secondary-fill-default
127
- );
128
- --border-color: var(--ffe-color-component-button-secondary-border-default);
129
- --text-color: var(
130
- --ffe-color-component-button-secondary-foreground-default
131
- );
132
-
133
- background-color: var(--background-color);
134
- border: solid 2px var(--border-color);
135
- color: var(--text-color);
136
-
137
- :where(.ffe-button__label, .ffe-button__icon) {
174
+ &--secondary,
175
+ &--expand {
176
+ --background-color: var(
177
+ --ffe-color-component-button-secondary-fill-default
178
+ );
179
+ --border-color: var(
180
+ --ffe-color-component-button-secondary-border-default
181
+ );
182
+ --text-color: var(
183
+ --ffe-color-component-button-secondary-foreground-default
184
+ );
185
+ --icon-only-color: var(
186
+ --ffe-color-component-button-secondary-foreground-default
187
+ );
188
+
189
+ background-color: var(--background-color);
190
+ border: solid 2px var(--border-color);
138
191
  color: var(--text-color);
139
- }
140
192
 
141
- @media (hover: hover) and (pointer: fine) {
142
- &:hover {
143
- --background-color: var(
193
+ :where(.ffe-button__label, .ffe-button__icon) {
194
+ color: var(--text-color);
195
+ }
196
+
197
+ @media (hover: hover) and (pointer: fine) {
198
+ &:hover {
199
+ --background-color: var(
200
+ --ffe-color-component-button-secondary-fill-hover
201
+ );
202
+ --border-color: var(
203
+ --ffe-color-component-button-secondary-border-hover
204
+ );
205
+ --text-color: var(
206
+ --ffe-color-component-button-secondary-foreground-hover
207
+ );
208
+ }
209
+ }
210
+
211
+ &:focus,
212
+ &:visited {
213
+ color: var(
214
+ --ffe-color-component-button-secondary-foreground-default
215
+ );
216
+ background-color: var(
144
217
  --ffe-color-component-button-secondary-fill-hover
145
218
  );
146
- --border-color: var(
147
- --ffe-color-component-button-secondary-border-hover
219
+ }
220
+
221
+ &:active {
222
+ transform: scale(0.97);
223
+ background-color: var(
224
+ --ffe-color-component-button-secondary-fill-pressed
148
225
  );
149
- --text-color: var(
150
- --ffe-color-component-button-secondary-foreground-hover
226
+ border-color: var(
227
+ --ffe-color-component-button-secondary-border-pressed
151
228
  );
229
+ color: var(--ffe-color-component-button-secondary-foreground-hover);
152
230
  }
153
231
  }
154
232
 
155
- &:focus,
156
- &:visited {
157
- color: var(--ffe-color-component-button-secondary-foreground-default);
233
+ &--shortcut {
158
234
  background-color: var(
159
- --ffe-color-component-button-secondary-fill-hover
235
+ --ffe-color-component-button-secondary-fill-default
160
236
  );
161
- }
237
+ border: solid var(--border-width)
238
+ var(--ffe-color-component-button-secondary-border-default);
239
+ color: var(--ffe-color-component-button-secondary-foreground-default);
162
240
 
163
- &:active {
164
- transform: scale(0.97);
165
- background-color: var(
166
- --ffe-color-component-button-secondary-fill-pressed
167
- );
168
- border-color: var(
169
- --ffe-color-component-button-secondary-border-pressed
170
- );
171
- color: var(--ffe-color-component-button-secondary-foreground-hover);
172
- }
173
- }
241
+ .ffe-button__icon {
242
+ color: var(
243
+ --ffe-color-component-button-secondary-foreground-default
244
+ );
245
+ transition: transform var(--ffe-transition-duration) var(--ffe-ease);
246
+ }
174
247
 
175
- .ffe-button--shortcut {
176
- background-color: var(--ffe-color-component-button-secondary-fill-default);
177
- border: solid 2px var(--ffe-color-component-button-secondary-border-default);
178
- color: var(--ffe-color-component-button-secondary-foreground-default);
248
+ @media (hover: hover) and (pointer: fine) {
249
+ &:hover {
250
+ background-color: var(
251
+ --ffe-color-component-button-secondary-fill-hover
252
+ );
253
+ color: var(
254
+ --ffe-color-component-button-secondary-foreground-hover
255
+ );
179
256
 
180
- .ffe-button__icon {
181
- color: var(--ffe-color-component-button-secondary-foreground-default);
182
- transition: transform var(--ffe-transition-duration) var(--ffe-ease);
183
- }
257
+ .ffe-button__icon {
258
+ color: var(
259
+ --ffe-color-component-button-secondary-foreground-hover
260
+ );
261
+ }
262
+ }
263
+ }
184
264
 
185
- @media (hover: hover) and (pointer: fine) {
186
- &:hover {
265
+ &:active {
266
+ transform: scale(0.97);
187
267
  background-color: var(
188
- --ffe-color-component-button-secondary-fill-hover
268
+ --ffe-color-component-button-secondary-fill-pressed
189
269
  );
190
270
  color: var(--ffe-color-component-button-secondary-foreground-hover);
191
271
 
@@ -195,154 +275,151 @@
195
275
  );
196
276
  }
197
277
  }
198
- }
199
278
 
200
- &:active {
201
- transform: scale(0.97);
202
- background-color: var(
203
- --ffe-color-component-button-secondary-fill-pressed
204
- );
205
- color: var(--ffe-color-component-button-secondary-foreground-hover);
206
-
207
- .ffe-button__icon {
208
- color: var(--ffe-color-component-button-secondary-foreground-hover);
279
+ &:focus,
280
+ &:visited {
281
+ color: var(
282
+ --ffe-color-component-button-secondary-foreground-default
283
+ );
284
+ background-color: var(
285
+ --ffe-color-component-button-secondary-fill-hover
286
+ );
209
287
  }
210
- }
211
288
 
212
- &:focus,
213
- &:visited {
214
- color: var(--ffe-color-component-button-secondary-foreground-default);
215
- background-color: var(
216
- --ffe-color-component-button-secondary-fill-hover
217
- );
289
+ &:hover,
290
+ &:focus {
291
+ .ffe-button__icon {
292
+ transform: translateX(4px);
293
+ }
294
+ }
218
295
  }
219
296
 
220
- &:hover,
221
- &:focus {
222
- .ffe-button__icon {
223
- transform: translateX(4px);
297
+ &--expanded {
298
+ &.ffe-button--sm {
299
+ padding: var(--padding-sm);
300
+ }
301
+ &.ffe-button--md {
302
+ padding: var(--padding-md);
303
+ }
304
+ &.ffe-button--lg {
305
+ padding: var(--padding-lg);
224
306
  }
225
307
  }
226
- }
227
308
 
228
- .ffe-button--expanded {
229
- padding: var(--ffe-spacing-xs);
230
- width: 45px;
231
- }
232
-
233
- .ffe-button--task {
234
- --text-color: var(--ffe-color-foreground-emphasis);
235
- background: transparent;
236
- border-radius: 1.75rem;
237
- border: none;
238
- box-shadow: none;
239
- color: var(--text-color);
240
- display: inline-block;
241
- padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm) var(--ffe-spacing-2xs)
242
- var(--ffe-spacing-2xs);
243
- text-align: left;
244
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
245
- width: auto;
246
-
247
- :where(.ffe-button__icon) {
248
- --icon-border-color: var(--ffe-color-foreground-emphasis);
249
- --icon-background-color: transparent;
250
- --icon-color: var(--ffe-color-foreground-emphasis);
251
-
252
- border: 2px solid var(--icon-border-color);
253
- background-color: var(--icon-background-color);
254
- border-radius: 50%;
255
- height: 45px;
256
- width: 45px;
257
- display: flex;
258
- align-items: center;
259
- justify-content: center;
309
+ &--task {
310
+ --text-color: var(--ffe-color-foreground-emphasis);
311
+ background: transparent;
312
+ border-radius: 1.75rem;
313
+ border: none;
314
+ box-shadow: none;
315
+ color: var(--text-color);
316
+ display: inline-block;
317
+ padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm)
318
+ var(--ffe-spacing-2xs) var(--ffe-spacing-2xs);
319
+ text-align: left;
260
320
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
321
+ width: auto;
261
322
 
262
- :where(.ffe-icons) {
263
- color: var(--icon-color);
323
+ :where(.ffe-button__icon) {
324
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
325
+ --icon-background-color: transparent;
326
+ --icon-color: var(--ffe-color-foreground-emphasis);
327
+
328
+ border: 2px solid var(--icon-border-color);
329
+ background-color: var(--icon-background-color);
330
+ border-radius: 50%;
331
+ height: 45px;
332
+ width: 45px;
333
+ display: flex;
334
+ align-items: center;
335
+ justify-content: center;
336
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
337
+
338
+ :where(.ffe-icons) {
339
+ color: var(--icon-color);
340
+ }
264
341
  }
265
- }
266
342
 
267
- &:focus {
268
- &::after {
269
- box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
343
+ &:focus {
344
+ &::after {
345
+ box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
346
+ }
270
347
  }
271
- }
272
-
273
- &:active {
274
- transform: scale(0.97);
275
- background-color: transparent;
276
348
 
277
- .ffe-button__icon {
278
- background-color: var(
279
- --ffe-color-component-button-secondary-fill-pressed
280
- );
349
+ &:active {
350
+ transform: scale(0.97);
351
+ background-color: transparent;
281
352
 
282
- --icon-border-color: var(--ffe-color-foreground-emphasis);
283
- }
284
- }
285
-
286
- @media (hover: hover) and (pointer: fine) {
287
- &:hover {
288
353
  .ffe-button__icon {
289
- --icon-background-color: var(
290
- --ffe-color-component-button-secondary-fill-hover
354
+ background-color: var(
355
+ --ffe-color-component-button-secondary-fill-pressed
291
356
  );
357
+
292
358
  --icon-border-color: var(--ffe-color-foreground-emphasis);
293
359
  }
294
360
  }
361
+
362
+ @media (hover: hover) and (pointer: fine) {
363
+ &:hover {
364
+ .ffe-button__icon {
365
+ --icon-background-color: var(
366
+ --ffe-color-component-button-secondary-fill-hover
367
+ );
368
+ --icon-border-color: var(--ffe-color-foreground-emphasis);
369
+ }
370
+ }
371
+ }
295
372
  }
296
- }
297
373
 
298
- .ffe-button--loading {
299
- pointer-events: none;
374
+ &--loading {
375
+ pointer-events: none;
300
376
 
301
- .ffe-button__label {
302
- transform: translateY(-32px);
303
- opacity: 0;
304
- }
377
+ .ffe-button__label {
378
+ transform: translateY(-32px);
379
+ opacity: 0;
380
+ }
305
381
 
306
- .ffe-button__spinner {
307
- opacity: 1;
308
- transform: none;
309
- visibility: visible;
382
+ .ffe-button__spinner {
383
+ opacity: 1;
384
+ transform: none;
385
+ visibility: visible;
386
+ }
310
387
  }
311
- }
312
388
 
313
- .ffe-button__label {
314
- align-items: center;
315
- display: flex;
316
- transition: transform var(--ffe-transition-duration) var(--ffe-ease);
317
- gap: var(--ffe-spacing-xs);
318
- }
319
-
320
- .ffe-button__spinner {
321
- inset: 0;
322
- opacity: 0;
323
- position: absolute;
324
- transform: translateY(24px);
325
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
326
- visibility: hidden;
327
- display: grid;
328
- place-items: center;
389
+ &__label {
390
+ align-items: center;
391
+ display: flex;
392
+ transition: transform var(--ffe-transition-duration) var(--ffe-ease);
393
+ gap: var(--ffe-spacing-xs);
394
+ }
329
395
 
330
- &::after {
331
- animation: 1s linear infinite button-loading-spin;
332
- border: 3px solid currentcolor;
333
- border-radius: 50%;
334
- border-top-color: transparent;
335
- content: '';
336
- display: block;
337
- height: 1.375rem;
338
- aspect-ratio: 1;
396
+ &__spinner {
397
+ inset: 0;
398
+ opacity: 0;
399
+ position: absolute;
400
+ transform: translateY(24px);
401
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
402
+ visibility: hidden;
403
+ display: grid;
404
+ place-items: center;
339
405
 
340
- @keyframes button-loading-spin {
341
- from {
342
- transform: none;
343
- }
344
- to {
345
- transform: rotate(360deg);
406
+ &::after {
407
+ animation: 1s linear infinite button-loading-spin;
408
+ border: 3px solid currentcolor;
409
+ border-radius: 50%;
410
+ border-top-color: transparent;
411
+ content: '';
412
+ display: block;
413
+ height: 1.375rem;
414
+ aspect-ratio: 1;
415
+
416
+ @keyframes button-loading-spin {
417
+ from {
418
+ transform: none;
419
+ }
420
+ to {
421
+ transform: rotate(360deg);
422
+ }
346
423
  }
347
424
  }
348
425
  }
package/less/inline-base-button.less CHANGED
@@ -36,11 +36,11 @@
36
36
  }
37
37
 
38
38
  &--left {
39
- margin-right: 6px;
39
+ margin-right: var(--ffe-spacing-2xs);
40
40
  }
41
41
 
42
42
  &--right {
43
- margin-left: 6px;
43
+ margin-left: var(--ffe-spacing-2xs);
44
44
  }
45
45
  }
46
46
  }
@@ -90,7 +90,7 @@
90
90
 
91
91
  color: var(--text-color);
92
92
  background-color: var(--background-color);
93
- padding: 0 var(--ffe-spacing-xs);
93
+ padding: 0 12px;
94
94
  margin: 0;
95
95
  align-items: center;
96
96
 
@@ -123,12 +123,12 @@
123
123
 
124
124
  .ffe-inline-button--tertiary {
125
125
  --icon-size-md: 1.5rem; // 24px
126
- --border-width: 1px;
126
+ --border-width: 2px;
127
127
 
128
128
  align-content: center;
129
129
  color: var(--ffe-color-component-button-tertiary-foreground-default);
130
130
  flex-wrap: wrap;
131
- padding: var(--ffe-spacing-xs) calc(var(--ffe-spacing-sm));
131
+ padding: calc(var(--ffe-spacing-xs) - var(--border-width)) var(--ffe-spacing-sm);
132
132
  border: 2px solid transparent;
133
133
  line-height: calc(var(--icon-size-md) - var(--border-width));
134
134
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "21.0.5",
3
+ "version": "21.2.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -17,7 +17,7 @@
17
17
  "build": "lessc less/buttons.less css/buttons.css --autoprefix"
18
18
  },
19
19
  "dependencies": {
20
- "@sb1/ffe-core": "^30.1.2"
20
+ "@sb1/ffe-core": "^31.0.0"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@sb1/ffe-buildtool": "^0.10.0"
@@ -25,5 +25,5 @@
25
25
  "publishConfig": {
26
26
  "access": "public"
27
27
  },
28
- "gitHead": "d6c86c57a6cc85b0fd722ebcc999cf52ac3108d4"
28
+ "gitHead": "e50b473f29109281adeb2f188a0f5391f4db1e9a"
29
29
  }