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