@sb1/ffe-buttons 18.0.5 → 18.0.7
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.
- package/less/base-button.less +32 -7
- package/less/button-group.less +5 -9
- package/less/inline-base-button.less +19 -5
- package/package.json +4 -4
package/less/base-button.less
CHANGED
|
@@ -71,6 +71,10 @@
|
|
|
71
71
|
background-color: var(--ffe-v-button-action-color);
|
|
72
72
|
color: var(--ffe-v-button-text-color);
|
|
73
73
|
|
|
74
|
+
.ffe-button__icon {
|
|
75
|
+
color: var(--ffe-v-button-text-color);
|
|
76
|
+
}
|
|
77
|
+
|
|
74
78
|
.native & {
|
|
75
79
|
@media (prefers-color-scheme: dark) {
|
|
76
80
|
border: 2px solid transparent;
|
|
@@ -89,6 +93,10 @@
|
|
|
89
93
|
background-color: var(--ffe-v-button-primary-color);
|
|
90
94
|
color: var(--ffe-v-button-text-color);
|
|
91
95
|
|
|
96
|
+
.ffe-button__icon {
|
|
97
|
+
color: var(--ffe-v-button-text-color);
|
|
98
|
+
}
|
|
99
|
+
|
|
92
100
|
&:focus {
|
|
93
101
|
background-color: var(--ffe-v-button-primary-color);
|
|
94
102
|
}
|
|
@@ -105,6 +113,10 @@
|
|
|
105
113
|
border: solid 2px var(--ffe-v-button-secondary-border-color);
|
|
106
114
|
color: var(--ffe-v-button-secondary-color);
|
|
107
115
|
|
|
116
|
+
.ffe-button__icon {
|
|
117
|
+
color: var(--ffe-v-button-secondary-color);
|
|
118
|
+
}
|
|
119
|
+
|
|
108
120
|
&:active,
|
|
109
121
|
&:focus,
|
|
110
122
|
&:visited {
|
|
@@ -120,6 +132,10 @@
|
|
|
120
132
|
background-color: var(--ffe-v-button-secondary-color);
|
|
121
133
|
border-color: var(--ffe-v-button-secondary-color);
|
|
122
134
|
color: var(--ffe-v-button-secondary-color-bg);
|
|
135
|
+
|
|
136
|
+
.ffe-button__icon {
|
|
137
|
+
color: var(--ffe-v-button-secondary-color-bg);
|
|
138
|
+
}
|
|
123
139
|
.native & {
|
|
124
140
|
@media (prefers-color-scheme: dark) {
|
|
125
141
|
background-color: var(--ffe-v-button-secondary-border-color);
|
|
@@ -152,9 +168,17 @@
|
|
|
152
168
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
153
169
|
width: auto;
|
|
154
170
|
|
|
171
|
+
.ffe-button__icon > .ffe-icons {
|
|
172
|
+
color: var(--ffe-v-button-task-primary-color);
|
|
173
|
+
}
|
|
174
|
+
|
|
155
175
|
&:hover {
|
|
156
176
|
color: var(--ffe-v-button-task-text-color-hover);
|
|
157
177
|
box-shadow: none;
|
|
178
|
+
|
|
179
|
+
.ffe-button__icon > .ffe-icons {
|
|
180
|
+
color: var(--ffe-v-button-primary-color-text);
|
|
181
|
+
}
|
|
158
182
|
}
|
|
159
183
|
|
|
160
184
|
&:focus {
|
|
@@ -216,13 +240,13 @@
|
|
|
216
240
|
}
|
|
217
241
|
|
|
218
242
|
.ffe-button--expand & {
|
|
219
|
-
|
|
243
|
+
color: var(--ffe-v-button-task-primary-color);
|
|
220
244
|
}
|
|
221
245
|
.ffe-button--expand:hover & {
|
|
222
|
-
|
|
246
|
+
color: @ffe-farge-hvit;
|
|
223
247
|
.native & {
|
|
224
248
|
@media (prefers-color-scheme: dark) {
|
|
225
|
-
|
|
249
|
+
color: @ffe-farge-svart;
|
|
226
250
|
}
|
|
227
251
|
}
|
|
228
252
|
}
|
|
@@ -240,10 +264,12 @@
|
|
|
240
264
|
opacity: 0;
|
|
241
265
|
position: absolute;
|
|
242
266
|
right: 0;
|
|
243
|
-
top:
|
|
267
|
+
top: 0;
|
|
244
268
|
transform: translateY(24px);
|
|
245
269
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
246
270
|
visibility: hidden;
|
|
271
|
+
display: grid;
|
|
272
|
+
place-items: center;
|
|
247
273
|
|
|
248
274
|
.ffe-button--loading & {
|
|
249
275
|
opacity: 1;
|
|
@@ -258,9 +284,8 @@
|
|
|
258
284
|
border-top-color: transparent;
|
|
259
285
|
content: '';
|
|
260
286
|
display: block;
|
|
261
|
-
height:
|
|
262
|
-
|
|
263
|
-
width: 22px;
|
|
287
|
+
height: 1.375rem;
|
|
288
|
+
aspect-ratio: 1;
|
|
264
289
|
|
|
265
290
|
@keyframes button-loading-spin {
|
|
266
291
|
from {
|
package/less/button-group.less
CHANGED
|
@@ -22,8 +22,7 @@
|
|
|
22
22
|
.ffe-button,
|
|
23
23
|
.ffe-inline-button {
|
|
24
24
|
justify-content: center;
|
|
25
|
-
margin: 0
|
|
26
|
-
align-self: center;
|
|
25
|
+
margin: 0 0 @ffe-spacing-xs;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
&--thin {
|
|
@@ -31,11 +30,11 @@
|
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
&--inline {
|
|
33
|
+
align-items: center;
|
|
34
34
|
.ffe-button,
|
|
35
35
|
.ffe-inline-button {
|
|
36
36
|
display: inline;
|
|
37
|
-
|
|
38
|
-
width: auto;
|
|
37
|
+
width: fit-content;
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
40
|
|
|
@@ -43,15 +42,12 @@
|
|
|
43
42
|
display: inline-flex;
|
|
44
43
|
flex-direction: row;
|
|
45
44
|
width: auto;
|
|
45
|
+
flex-wrap: wrap;
|
|
46
|
+
gap: @ffe-spacing-xs @ffe-spacing-sm;
|
|
46
47
|
|
|
47
48
|
.ffe-button,
|
|
48
49
|
.ffe-inline-button {
|
|
49
|
-
margin: 0 0 @ffe-spacing-xs @ffe-spacing-sm;
|
|
50
50
|
width: auto;
|
|
51
|
-
|
|
52
|
-
&:first-child {
|
|
53
|
-
margin: 0 0 @ffe-spacing-xs;
|
|
54
|
-
}
|
|
55
51
|
}
|
|
56
52
|
}
|
|
57
53
|
}
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
padding: 0 @ffe-spacing-2xs;
|
|
26
26
|
text-decoration: none;
|
|
27
27
|
font-size: var(--ffe-fontsize-body-text);
|
|
28
|
+
align-items: center;
|
|
28
29
|
|
|
29
30
|
&:active {
|
|
30
31
|
transform: scale(0.97);
|
|
@@ -57,7 +58,11 @@
|
|
|
57
58
|
border-bottom: 1px solid transparent;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
.ffe-inline-button__icon {
|
|
62
|
+
color: var(--ffe-v-button-primary-color);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:hover .ffe-inline-button__icon {
|
|
61
66
|
color: var(--ffe-v-button-primary-color-hover);
|
|
62
67
|
}
|
|
63
68
|
|
|
@@ -73,7 +78,12 @@
|
|
|
73
78
|
margin: 0;
|
|
74
79
|
align-items: center;
|
|
75
80
|
|
|
76
|
-
|
|
81
|
+
.ffe-inline-button__icon {
|
|
82
|
+
color: var(--ffe-v-button-primary-color);
|
|
83
|
+
transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
|
|
84
|
+
}
|
|
85
|
+
&:hover .ffe-inline-button__icon,
|
|
86
|
+
&:hover .ffe-inline-button__label {
|
|
77
87
|
color: var(--ffe-v-button-primary-color-hover);
|
|
78
88
|
}
|
|
79
89
|
}
|
|
@@ -85,6 +95,10 @@
|
|
|
85
95
|
padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
|
|
86
96
|
border: 2px solid transparent;
|
|
87
97
|
|
|
98
|
+
.ffe-inline-button__icon {
|
|
99
|
+
color: var(--ffe-v-button-tertiary-color);
|
|
100
|
+
}
|
|
101
|
+
|
|
88
102
|
.ffe-inline-button__label {
|
|
89
103
|
&::after {
|
|
90
104
|
border-bottom: solid 1px currentColor;
|
|
@@ -114,6 +128,9 @@
|
|
|
114
128
|
&:hover {
|
|
115
129
|
color: var(--ffe-v-button-tertiary-color-hover);
|
|
116
130
|
|
|
131
|
+
.ffe-inline-button__icon {
|
|
132
|
+
color: var(--ffe-v-button-tertiary-color-hover);
|
|
133
|
+
}
|
|
117
134
|
.native & {
|
|
118
135
|
@media (prefers-color-scheme: dark) {
|
|
119
136
|
color: @ffe-farge-hvit;
|
|
@@ -126,9 +143,6 @@
|
|
|
126
143
|
margin-bottom: -2px;
|
|
127
144
|
will-change: transform, opacity;
|
|
128
145
|
|
|
129
|
-
.ffe-inline-button--expand & {
|
|
130
|
-
transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
|
|
131
|
-
}
|
|
132
146
|
.ffe-inline-button--expanded & {
|
|
133
147
|
transform: rotateZ(180deg);
|
|
134
148
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons",
|
|
3
|
-
"version": "18.0.
|
|
3
|
+
"version": "18.0.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank1",
|
|
6
6
|
"files": [
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
"test": "npm run lint"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@sb1/ffe-core": "^27.3.
|
|
18
|
+
"@sb1/ffe-core": "^27.3.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@sb1/ffe-buildtool": "^0.5.
|
|
21
|
+
"@sb1/ffe-buildtool": "^0.5.1"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "497fc1228aa51badd6f0043299c6f49d6b442057"
|
|
27
27
|
}
|