Skip to content

Commit ba2e79f

Browse files
author
Melissa Thompson
committed
fix: no down state for reduced motion
1 parent 42629dc commit ba2e79f

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

components/button/index.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,19 +150,23 @@ governing permissions and limitations under the License.
150150
&:active {
151151
/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
152152
transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
153+
154+
@media (prefers-reduced-motion: reduce) {
155+
transform: none;
156+
}
153157
}
154158

155159
.spectrum-Icon {
156160
/* Any block-size difference between the intended workflow icon size and actual icon used.
157161
Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
158162
--_icon-size-difference: max(0px,
159-
var(--spectrum-button-intended-icon-size) -
163+
var(--spectrum-button-intended-icon-size) -
160164
var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
161165
);
162166

163167
margin-block-start: var(--mod-button-icon-margin-block-start,
164168
max(0px,
165-
var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
169+
var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
166170
var(--mod-button-border-width, var(--spectrum-button-border-width)) +
167171
(var(--_icon-size-difference, 0px) / 2)
168172
)

components/checkbox/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ governing permissions and limitations under the License.
139139
&:active {
140140
.spectrum-Checkbox-box {
141141
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
142+
143+
@media (prefers-reduced-motion: reduce) {
144+
transform: none;
145+
}
142146
}
143147

144148
.spectrum-Checkbox-box::before {

0 commit comments

Comments
 (0)