@sb1/ffe-buttons 16.0.0 → 16.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.
- package/less/base-button.less +10 -40
- package/less/theme.less +8 -0
- package/package.json +5 -5
package/less/base-button.less
CHANGED
|
@@ -185,37 +185,20 @@
|
|
|
185
185
|
border-radius: 1.75rem;
|
|
186
186
|
border: 2px solid transparent;
|
|
187
187
|
box-shadow: none;
|
|
188
|
-
color:
|
|
188
|
+
color: var(--ffe-v-button-task-primary-color);
|
|
189
189
|
display: inline-block;
|
|
190
190
|
padding: @ffe-spacing-2xs @ffe-spacing-sm @ffe-spacing-2xs @ffe-spacing-2xs;
|
|
191
191
|
text-align: left;
|
|
192
192
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
193
193
|
width: auto;
|
|
194
|
-
.native & {
|
|
195
|
-
@media (prefers-color-scheme: dark) {
|
|
196
|
-
color: @ffe-farge-vann-30;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
194
|
|
|
200
195
|
&:hover {
|
|
201
|
-
color:
|
|
196
|
+
color: var(--ffe-v-button-task-text-color-hover);
|
|
202
197
|
box-shadow: none;
|
|
203
|
-
|
|
204
|
-
.native & {
|
|
205
|
-
@media (prefers-color-scheme: dark) {
|
|
206
|
-
color: @ffe-farge-hvit;
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
198
|
}
|
|
210
199
|
|
|
211
200
|
&:focus {
|
|
212
|
-
border-color:
|
|
213
|
-
|
|
214
|
-
.native & {
|
|
215
|
-
@media (prefers-color-scheme: dark) {
|
|
216
|
-
border-color: @ffe-farge-hvit;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
201
|
+
border-color: var(--ffe-v-button-task-border-focus);
|
|
219
202
|
|
|
220
203
|
&::after {
|
|
221
204
|
display: none;
|
|
@@ -260,10 +243,10 @@
|
|
|
260
243
|
}
|
|
261
244
|
|
|
262
245
|
.ffe-button--task & {
|
|
263
|
-
border: 2px solid
|
|
246
|
+
border: 2px solid var(--ffe-v-button-primary-color);
|
|
264
247
|
border-radius: 50%;
|
|
265
248
|
background-color: @ffe-farge-hvit;
|
|
266
|
-
fill:
|
|
249
|
+
fill: var(--ffe-v-button-task-primary-color);
|
|
267
250
|
height: 45px;
|
|
268
251
|
padding: 13px;
|
|
269
252
|
margin: 0 @ffe-spacing-xs 0 0;
|
|
@@ -271,22 +254,16 @@
|
|
|
271
254
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
272
255
|
.native & {
|
|
273
256
|
@media (prefers-color-scheme: dark) {
|
|
274
|
-
border-color: @ffe-farge-vann-70;
|
|
275
257
|
background-color: transparent;
|
|
276
|
-
fill: @ffe-farge-vann-30;
|
|
277
258
|
}
|
|
278
259
|
}
|
|
279
260
|
}
|
|
280
261
|
|
|
281
262
|
.ffe-button--expand & {
|
|
282
|
-
|
|
283
|
-
@media (prefers-color-scheme: dark) {
|
|
284
|
-
fill: @ffe-farge-vann-30;
|
|
285
|
-
}
|
|
286
|
-
}
|
|
263
|
+
fill: var(--ffe-v-button-task-primary-color);
|
|
287
264
|
}
|
|
288
|
-
|
|
289
265
|
.ffe-button--expand:hover & {
|
|
266
|
+
fill: @ffe-farge-hvit;
|
|
290
267
|
.native & {
|
|
291
268
|
@media (prefers-color-scheme: dark) {
|
|
292
269
|
fill: @ffe-farge-svart;
|
|
@@ -295,16 +272,9 @@
|
|
|
295
272
|
}
|
|
296
273
|
|
|
297
274
|
.ffe-button--task:hover & {
|
|
298
|
-
border-color:
|
|
299
|
-
background-color:
|
|
300
|
-
fill:
|
|
301
|
-
.native & {
|
|
302
|
-
@media (prefers-color-scheme: dark) {
|
|
303
|
-
border-color: @ffe-farge-vann-70;
|
|
304
|
-
background-color: @ffe-farge-vann-70;
|
|
305
|
-
fill: @ffe-farge-svart;
|
|
306
|
-
}
|
|
307
|
-
}
|
|
275
|
+
border-color: var(--ffe-v-button-primary-color);
|
|
276
|
+
background-color: var(--ffe-v-button-primary-color);
|
|
277
|
+
fill: var(--ffe-v-button-primary-color-text);
|
|
308
278
|
}
|
|
309
279
|
}
|
|
310
280
|
|
package/less/theme.less
CHANGED
|
@@ -27,6 +27,11 @@
|
|
|
27
27
|
--ffe-v-button-tertiary-color-hover: var(--ffe-farge-fjell);
|
|
28
28
|
--ffe-v-button-tertiary-color-text: var(--ffe-farge-hvit);
|
|
29
29
|
|
|
30
|
+
/** Task button */
|
|
31
|
+
--ffe-v-button-task-primary-color: var(--ffe-farge-vann);
|
|
32
|
+
--ffe-v-button-task-text-color-hover: var(--ffe-farge-fjell);
|
|
33
|
+
--ffe-v-button-task-border-focus: var(--ffe-farge-vann);
|
|
34
|
+
|
|
30
35
|
@media (prefers-color-scheme: dark) {
|
|
31
36
|
.native {
|
|
32
37
|
--ffe-v-button-text-color: var(--ffe-farge-svart);
|
|
@@ -42,6 +47,9 @@
|
|
|
42
47
|
--ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
|
|
43
48
|
--ffe-v-button-tertiary-color-hover: var(--ffe-farge-vann-30);
|
|
44
49
|
--ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
|
|
50
|
+
--ffe-v-button-task-text-color-hover: var(--ffe-farge-hvit);
|
|
51
|
+
--ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
|
|
52
|
+
--ffe-v-button-task-primary-color: var(--ffe-farge-vann-30);
|
|
45
53
|
}
|
|
46
54
|
}
|
|
47
55
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank1",
|
|
6
6
|
"files": [
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
12
12
|
},
|
|
13
13
|
"scripts": {
|
|
14
|
-
"lint": "stylelint less/*.less",
|
|
14
|
+
"lint": "ffe-buildtool stylelint less/*.less",
|
|
15
15
|
"test": "npm run lint"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@sb1/ffe-
|
|
19
|
-
"
|
|
18
|
+
"@sb1/ffe-buildtool": "^0.5.0",
|
|
19
|
+
"@sb1/ffe-core": "^26.1.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@sb1/ffe-core": "*"
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"publishConfig": {
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "816e0f967f7b2d8fd6cca41bb9d363a4c7933116"
|
|
28
28
|
}
|