@sb1/ffe-buttons 18.0.13 → 18.0.15

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 (3) hide show
  1. package/less/base-button.less +51 -31
  2. package/less/inline-base-button.less +23 -17
  3. package/package.json +3 -3
package/less/base-button.less CHANGED
@@ -85,8 +85,10 @@
85
85
  background-color: var(--ffe-v-button-action-color);
86
86
  }
87
87
 
88
- &:hover {
89
- background-color: var(--ffe-v-button-action-color-hover);
88
+ @media (hover: hover) and (pointer: fine) {
89
+ &:hover {
90
+ background-color: var(--ffe-v-button-action-color-hover);
91
+ }
90
92
  }
91
93
  }
92
94
 
@@ -102,8 +104,10 @@
102
104
  background-color: var(--ffe-v-button-primary-color);
103
105
  }
104
106
 
105
- &:hover {
106
- background-color: var(--ffe-v-button-primary-color-hover);
107
+ @media (hover: hover) and (pointer: fine) {
108
+ &:hover {
109
+ background-color: var(--ffe-v-button-primary-color-hover);
110
+ }
107
111
  }
108
112
  }
109
113
 
@@ -129,20 +133,24 @@
129
133
  }
130
134
  }
131
135
 
132
- &:hover {
133
- background-color: var(--ffe-v-button-secondary-color);
134
- border-color: var(--ffe-v-button-secondary-color);
135
- color: var(--ffe-v-button-secondary-color-bg);
136
-
137
- .ffe-button__icon {
136
+ @media (hover: hover) and (pointer: fine) {
137
+ &:hover {
138
+ background-color: var(--ffe-v-button-secondary-color);
139
+ border-color: var(--ffe-v-button-secondary-color);
138
140
  color: var(--ffe-v-button-secondary-color-bg);
139
- }
140
- .native & {
141
- @media (prefers-color-scheme: dark) {
142
- background-color: var(--ffe-v-button-secondary-border-color);
143
- border-color: var(--ffe-v-button-secondary-border-color);
141
+
142
+ .ffe-button__icon {
144
143
  color: var(--ffe-v-button-secondary-color-bg);
145
144
  }
145
+ .native & {
146
+ @media (prefers-color-scheme: dark) {
147
+ background-color: var(
148
+ --ffe-v-button-secondary-border-color
149
+ );
150
+ border-color: var(--ffe-v-button-secondary-border-color);
151
+ color: var(--ffe-v-button-secondary-color-bg);
152
+ }
153
+ }
146
154
  }
147
155
  }
148
156
  }
@@ -172,12 +180,14 @@
172
180
  color: var(--ffe-v-button-task-primary-color);
173
181
  }
174
182
 
175
- &:hover {
176
- color: var(--ffe-v-button-task-text-color-hover);
177
- box-shadow: none;
183
+ @media (hover: hover) and (pointer: fine) {
184
+ &:hover {
185
+ color: var(--ffe-v-button-task-text-color-hover);
186
+ box-shadow: none;
178
187
 
179
- .ffe-button__icon > .ffe-icons {
180
- color: var(--ffe-v-button-primary-color-text);
188
+ .ffe-button__icon > .ffe-icons {
189
+ color: var(--ffe-v-button-primary-color-text);
190
+ }
181
191
  }
182
192
  }
183
193
 
@@ -215,11 +225,16 @@
215
225
  will-change: transform;
216
226
  }
217
227
 
218
- .ffe-button--shortcut:focus &,
219
- .ffe-button--shortcut:hover & {
228
+ .ffe-button--shortcut:focus & {
220
229
  transform: translateX(12px);
221
230
  }
222
231
 
232
+ @media (hover: hover) and (pointer: fine) {
233
+ .ffe-button--shortcut:hover & {
234
+ transform: translateX(12px);
235
+ }
236
+ }
237
+
223
238
  .ffe-button--task & {
224
239
  border: 2px solid var(--ffe-v-button-primary-color);
225
240
  border-radius: 50%;
@@ -242,19 +257,24 @@
242
257
  .ffe-button--expand & {
243
258
  color: var(--ffe-v-button-task-primary-color);
244
259
  }
245
- .ffe-button--expand:hover & {
246
- color: @ffe-farge-hvit;
247
- .native & {
248
- @media (prefers-color-scheme: dark) {
249
- color: @ffe-farge-svart;
260
+ @media (hover: hover) and (pointer: fine) {
261
+ .ffe-button--expand:hover & {
262
+ color: @ffe-farge-hvit;
263
+
264
+ .native & {
265
+ @media (prefers-color-scheme: dark) {
266
+ color: @ffe-farge-svart;
267
+ }
250
268
  }
251
269
  }
252
270
  }
253
271
 
254
- .ffe-button--task:hover & {
255
- border-color: var(--ffe-v-button-primary-color);
256
- background-color: var(--ffe-v-button-primary-color);
257
- color: var(--ffe-v-button-primary-color-text);
272
+ @media (hover: hover) and (pointer: fine) {
273
+ .ffe-button--task:hover & {
274
+ border-color: var(--ffe-v-button-primary-color);
275
+ background-color: var(--ffe-v-button-primary-color);
276
+ color: var(--ffe-v-button-primary-color-text);
277
+ }
258
278
  }
259
279
  }
260
280
 
package/less/inline-base-button.less CHANGED
@@ -63,13 +63,15 @@
63
63
  color: var(--ffe-v-button-primary-color);
64
64
  }
65
65
 
66
- &:hover .ffe-inline-button__icon {
67
- color: var(--ffe-v-button-primary-color-hover);
68
- }
66
+ @media (hover: hover) and (pointer: fine) {
67
+ &:hover .ffe-inline-button__icon {
68
+ color: var(--ffe-v-button-primary-color-hover);
69
+ }
69
70
 
70
- &:hover .ffe-inline-button__label {
71
- color: var(--ffe-v-button-secondary-color-hover);
72
- border-bottom-color: var(--ffe-v-button-secondary-color-hover);
71
+ &:hover .ffe-inline-button__label {
72
+ color: var(--ffe-v-button-secondary-color-hover);
73
+ border-bottom-color: var(--ffe-v-button-secondary-color-hover);
74
+ }
73
75
  }
74
76
  }
75
77
 
@@ -83,9 +85,11 @@
83
85
  color: var(--ffe-v-button-primary-color);
84
86
  transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
85
87
  }
86
- &:hover .ffe-inline-button__icon,
87
- &:hover .ffe-inline-button__label {
88
- color: var(--ffe-v-button-primary-color-hover);
88
+ @media (hover: hover) and (pointer: fine) {
89
+ &:hover .ffe-inline-button__icon,
90
+ &:hover .ffe-inline-button__label {
91
+ color: var(--ffe-v-button-primary-color-hover);
92
+ }
89
93
  }
90
94
  }
91
95
 
@@ -126,15 +130,17 @@
126
130
  border-color: transparent;
127
131
  }
128
132
 
129
- &:hover {
130
- color: var(--ffe-v-button-tertiary-color-hover);
131
-
132
- .ffe-inline-button__icon {
133
+ @media (hover: hover) and (pointer: fine) {
134
+ &:hover {
133
135
  color: var(--ffe-v-button-tertiary-color-hover);
134
- }
135
- .native & {
136
- @media (prefers-color-scheme: dark) {
137
- color: @ffe-farge-hvit;
136
+
137
+ .ffe-inline-button__icon {
138
+ color: var(--ffe-v-button-tertiary-color-hover);
139
+ }
140
+ .native & {
141
+ @media (prefers-color-scheme: dark) {
142
+ color: @ffe-farge-hvit;
143
+ }
138
144
  }
139
145
  }
140
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "18.0.13",
3
+ "version": "18.0.15",
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.3.4"
18
+ "@sb1/ffe-core": "^27.3.6"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@sb1/ffe-buildtool": "^0.5.1"
@@ -23,5 +23,5 @@
23
23
  "publishConfig": {
24
24
  "access": "public"
25
25
  },
26
- "gitHead": "baeba51ec4d974278041bf5e5a4a334426c5816c"
26
+ "gitHead": "d9726eae887f19598f051c2f205506a0710b89e8"
27
27
  }