@sb1/ffe-buttons 17.1.1 → 18.0.1

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/less/base-button.less +6 -10
  2. package/less/inline-base-button.less +17 -34
  3. package/less/theme.less +2 -2
  4. package/package.json +3 -3
package/less/base-button.less CHANGED
@@ -186,29 +186,25 @@
186
186
  }
187
187
 
188
188
  .ffe-button__icon {
189
- display: inline-block;
190
- fill: currentColor;
191
- height: 16px;
192
- width: 16px;
193
-
194
189
  .ffe-button--shortcut & {
195
- transform: rotate(-90deg);
196
190
  transition: all @ffe-transition-duration @ffe-ease;
197
191
  will-change: transform;
198
192
  }
199
193
 
200
194
  .ffe-button--shortcut:focus &,
201
195
  .ffe-button--shortcut:hover & {
202
- transform: rotate(-90deg) translateY(12px);
196
+ transform: translateX(12px);
203
197
  }
204
198
 
205
199
  .ffe-button--task & {
206
200
  border: 2px solid var(--ffe-v-button-primary-color);
207
201
  border-radius: 50%;
208
202
  background-color: @ffe-farge-hvit;
209
- fill: var(--ffe-v-button-task-primary-color);
203
+ color: var(--ffe-v-button-task-primary-color);
210
204
  height: 45px;
211
- padding: 13px;
205
+ display: flex;
206
+ align-items: center;
207
+ justify-content: center;
212
208
  margin: 0 @ffe-spacing-xs 0 0;
213
209
  width: 45px;
214
210
  transition: all @ffe-transition-duration @ffe-ease;
@@ -234,7 +230,7 @@
234
230
  .ffe-button--task:hover & {
235
231
  border-color: var(--ffe-v-button-primary-color);
236
232
  background-color: var(--ffe-v-button-primary-color);
237
- fill: var(--ffe-v-button-primary-color-text);
233
+ color: var(--ffe-v-button-primary-color-text);
238
234
  }
239
235
  }
240
236
 
package/less/inline-base-button.less CHANGED
@@ -33,6 +33,7 @@
33
33
  &:focus {
34
34
  box-shadow: 0 0 0 2px @ffe-farge-vann;
35
35
  outline: none;
36
+
36
37
  .native & {
37
38
  @media (prefers-color-scheme: dark) {
38
39
  box-shadow: 0 0 0 2px @ffe-farge-hvit;
@@ -46,18 +47,10 @@
46
47
  }
47
48
 
48
49
  .ffe-inline-button--back {
49
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23005aa4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
50
- background-repeat: no-repeat;
51
- background-position: 1.375rem center;
52
- color: var(--ffe-v-button-secondary-color);
50
+ color: var(--ffe-v-button-primary-color);
53
51
  line-height: 24px;
54
52
  padding: @ffe-spacing-xs @ffe-spacing-md @ffe-spacing-xs @ffe-spacing-2xl;
55
53
  outline: none;
56
- .native & {
57
- @media (prefers-color-scheme: dark) {
58
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%234d8cbf' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
59
- }
60
- }
61
54
 
62
55
  .ffe-inline-button__label {
63
56
  transition: all @ffe-transition-duration @ffe-ease;
@@ -65,13 +58,7 @@
65
58
  }
66
59
 
67
60
  &:hover {
68
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23002776' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
69
-
70
- .native & {
71
- @media (prefers-color-scheme: dark) {
72
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.85em' height='1.6em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23b3cee4' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
73
- }
74
- }
61
+ color: var(--ffe-v-button-primary-color-hover);
75
62
  }
76
63
 
77
64
  &:hover .ffe-inline-button__label {
@@ -81,12 +68,13 @@
81
68
  }
82
69
 
83
70
  .ffe-inline-button--expand {
84
- color: var(--ffe-v-button-secondary-color);
71
+ color: var(--ffe-v-button-primary-color);
85
72
  padding: 0 @ffe-spacing-xs;
86
73
  margin: 0;
74
+ align-items: center;
87
75
 
88
76
  &:hover {
89
- color: var(--ffe-v-button-secondary-color-hover);
77
+ color: var(--ffe-v-button-primary-color-hover);
90
78
  }
91
79
  }
92
80
 
@@ -97,11 +85,13 @@
97
85
  padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
98
86
  border: 2px solid transparent;
99
87
 
100
- &::after {
101
- border-bottom: solid 1px currentColor;
102
- content: ' ';
103
- display: block;
104
- width: 100%;
88
+ .ffe-inline-button__label {
89
+ &::after {
90
+ border-bottom: solid 1px currentColor;
91
+ content: ' ';
92
+ display: block;
93
+ width: 100%;
94
+ }
105
95
  }
106
96
 
107
97
  &:focus {
@@ -123,6 +113,7 @@
123
113
 
124
114
  &:hover {
125
115
  color: var(--ffe-v-button-tertiary-color-hover);
116
+
126
117
  .native & {
127
118
  @media (prefers-color-scheme: dark) {
128
119
  color: @ffe-farge-hvit;
@@ -132,23 +123,15 @@
132
123
  }
133
124
 
134
125
  .ffe-inline-button__icon {
135
- align-self: center;
136
- fill: currentColor;
137
- height: 16px;
138
126
  margin-bottom: -2px;
139
- max-width: 16px;
140
- min-width: 16px;
141
- transition: all @ffe-transition-duration @ffe-ease-in-out-back;
142
- width: 16px;
143
127
  will-change: transform, opacity;
144
128
 
145
- .ffe-inline-button--back & {
146
- transform: rotate(90deg);
147
- }
148
-
149
129
  .ffe-inline-button--expand & {
150
130
  transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
151
131
  }
132
+ .ffe-inline-button--expanded & {
133
+ transform: rotateZ(180deg);
134
+ }
152
135
  }
153
136
 
154
137
  .ffe-inline-button__icon--left {
package/less/theme.less CHANGED
@@ -47,8 +47,8 @@
47
47
  --ffe-v-button-secondary-border-color: var(--ffe-farge-vann-70);
48
48
  --ffe-v-button-secondary-color-hover: var(--ffe-farge-vann-30);
49
49
  --ffe-v-button-secondary-color-bg: var(--ffe-farge-svart);
50
- --ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
51
- --ffe-v-button-tertiary-color-hover: var(--ffe-farge-vann-30);
50
+ --ffe-v-button-tertiary-color: var(--ffe-farge-vann-30);
51
+ --ffe-v-button-tertiary-color-hover: var(--ffe-farge-hvit);
52
52
  --ffe-v-button-tertiary-color-text: var(--ffe-farge-svart);
53
53
  --ffe-v-button-task-text-color-hover: var(--ffe-farge-hvit);
54
54
  --ffe-v-button-task-border-focus: var(--ffe-farge-hvit);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "17.1.1",
3
+ "version": "18.0.1",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank1",
6
6
  "files": [
@@ -15,7 +15,7 @@
15
15
  "test": "npm run lint"
16
16
  },
17
17
  "dependencies": {
18
- "@sb1/ffe-core": "^27.1.1"
18
+ "@sb1/ffe-core": "^27.1.2"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@sb1/ffe-buildtool": "^0.5.0"
@@ -23,5 +23,5 @@
23
23
  "publishConfig": {
24
24
  "access": "public"
25
25
  },
26
- "gitHead": "22b8ad48a07c5afca3100dfef456bb667a0dfb0e"
26
+ "gitHead": "cc263235739eb3dc241a230b0b446ea89659ea77"
27
27
  }