@sb1/ffe-buttons 18.0.12 → 18.0.14

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 -32
  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,27 +133,30 @@
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
  }
149
157
 
150
158
  .ffe-button--expand {
151
159
  border-radius: 34px;
152
- height: 45px;
153
160
  }
154
161
 
155
162
  .ffe-button--expanded {
@@ -173,12 +180,14 @@
173
180
  color: var(--ffe-v-button-task-primary-color);
174
181
  }
175
182
 
176
- &:hover {
177
- color: var(--ffe-v-button-task-text-color-hover);
178
- 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;
179
187
 
180
- .ffe-button__icon > .ffe-icons {
181
- color: var(--ffe-v-button-primary-color-text);
188
+ .ffe-button__icon > .ffe-icons {
189
+ color: var(--ffe-v-button-primary-color-text);
190
+ }
182
191
  }
183
192
  }
184
193
 
@@ -216,11 +225,16 @@
216
225
  will-change: transform;
217
226
  }
218
227
 
219
- .ffe-button--shortcut:focus &,
220
- .ffe-button--shortcut:hover & {
228
+ .ffe-button--shortcut:focus & {
221
229
  transform: translateX(12px);
222
230
  }
223
231
 
232
+ @media (hover: hover) and (pointer: fine) {
233
+ .ffe-button--shortcut:hover & {
234
+ transform: translateX(12px);
235
+ }
236
+ }
237
+
224
238
  .ffe-button--task & {
225
239
  border: 2px solid var(--ffe-v-button-primary-color);
226
240
  border-radius: 50%;
@@ -243,19 +257,24 @@
243
257
  .ffe-button--expand & {
244
258
  color: var(--ffe-v-button-task-primary-color);
245
259
  }
246
- .ffe-button--expand:hover & {
247
- color: @ffe-farge-hvit;
248
- .native & {
249
- @media (prefers-color-scheme: dark) {
250
- 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
+ }
251
268
  }
252
269
  }
253
270
  }
254
271
 
255
- .ffe-button--task:hover & {
256
- border-color: var(--ffe-v-button-primary-color);
257
- background-color: var(--ffe-v-button-primary-color);
258
- 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
+ }
259
278
  }
260
279
  }
261
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.12",
3
+ "version": "18.0.14",
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.5"
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": "530c07f3d613834eb4d5309f53ec715a9ef83936"
26
+ "gitHead": "8bfc6dca847a163f4057ce4d75e2e2dc43b293dc"
27
27
  }