@simplybusiness/mobius 10.1.0 → 10.1.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 (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/components/Button/Button.css +44 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 10.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - ec0df64: Fix sticky hover state on mobile devices for Button component by scoping `:hover` styles behind `@media (hover: hover)` media query
8
+
3
9
  ## 10.1.0
4
10
 
5
11
  ### Minor Changes
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@simplybusiness/mobius",
3
3
  "license": "UNLICENSED",
4
- "version": "10.1.0",
4
+ "version": "10.1.1",
5
5
  "description": "Core library of Mobius react components",
6
6
  "repository": {
7
7
  "type": "git",
package/src/components/Button/Button.css CHANGED
@@ -50,11 +50,16 @@
50
50
  background: var(--button-primary-color);
51
51
  font-variation-settings: var(--button-primary-font-variation);
52
52
 
53
- &:where(:active),
54
- &:where(:hover) {
53
+ &:where(:active) {
55
54
  background: var(--button-primary-hover-color);
56
55
  }
57
56
 
57
+ @media (hover: hover) {
58
+ &:where(:hover) {
59
+ background: var(--button-primary-hover-color);
60
+ }
61
+ }
62
+
58
63
  &:where(:focus-visible) {
59
64
  box-shadow: var(--box-shadow-default);
60
65
  }
@@ -72,13 +77,20 @@
72
77
  background: transparent;
73
78
  border-color: var(--button-secondary-color);
74
79
 
75
- &:where(:active),
76
- &:where(:hover) {
80
+ &:where(:active) {
77
81
  --button-content-color: var(--color-text-inverted);
78
82
  background: var(--button-secondary-hover-color);
79
83
  border-color: var(--button-secondary-hover-color);
80
84
  }
81
85
 
86
+ @media (hover: hover) {
87
+ &:where(:hover) {
88
+ --button-content-color: var(--color-text-inverted);
89
+ background: var(--button-secondary-hover-color);
90
+ border-color: var(--button-secondary-hover-color);
91
+ }
92
+ }
93
+
82
94
  &:where(:focus-visible) {
83
95
  box-shadow: var(--box-shadow-default);
84
96
  }
@@ -99,15 +111,19 @@
99
111
  border-color: transparent;
100
112
 
101
113
  &:where(:active) {
102
- background: var(--color-secondary-hover);
103
- }
104
-
105
- &:where(:hover) {
106
114
  --button-content-color: var(--color-text-inverted);
107
115
  border-color: transparent;
108
116
  background: var(--color-secondary-hover);
109
117
  }
110
118
 
119
+ @media (hover: hover) {
120
+ &:where(:hover) {
121
+ --button-content-color: var(--color-text-inverted);
122
+ border-color: transparent;
123
+ background: var(--color-secondary-hover);
124
+ }
125
+ }
126
+
111
127
  &:where(:focus-visible) {
112
128
  box-shadow: var(--box-shadow-default);
113
129
  }
@@ -130,8 +146,10 @@
130
146
  background: var(--color-background-light);
131
147
  }
132
148
 
133
- &:where(:hover) {
134
- background: var(--color-background-light);
149
+ @media (hover: hover) {
150
+ &:where(:hover) {
151
+ background: var(--color-background-light);
152
+ }
135
153
  }
136
154
 
137
155
  &:where(:focus-visible) {
@@ -167,9 +185,11 @@
167
185
  fill: var(--button-content-color);
168
186
  }
169
187
 
170
- &:where(:hover) {
171
- background: var(--color-valid-hover);
172
- border-color: var(--color-valid-hover);
188
+ @media (hover: hover) {
189
+ &:where(:hover) {
190
+ background: var(--color-valid-hover);
191
+ border-color: var(--color-valid-hover);
192
+ }
173
193
  }
174
194
 
175
195
  &:where(:active) {
@@ -217,7 +237,6 @@
217
237
  text-decoration: underline;
218
238
  }
219
239
 
220
- &:hover,
221
240
  &:active {
222
241
  --button-content-color: var(
223
242
  --button-link-hover-color,
@@ -227,6 +246,17 @@
227
246
  cursor: pointer;
228
247
  }
229
248
 
249
+ @media (hover: hover) {
250
+ &:hover {
251
+ --button-content-color: var(
252
+ --button-link-hover-color,
253
+ var(--color-secondary-hover)
254
+ );
255
+ text-decoration: var(--button-link-hover-text-decoration, underline);
256
+ cursor: pointer;
257
+ }
258
+ }
259
+
230
260
  &:focus-visible {
231
261
  box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
232
262
  }