From 02adb1e380e66d1359f069eedf515526f15e5464 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 17:51:39 +1000 Subject: [PATCH] Subtle transitions --- .../AvailabilityViewer/availabilityViewerStyle.ts | 4 ++++ .../src/components/CalendarField/calendarFieldStyle.ts | 4 ++++ .../src/components/TimeRangeField/timeRangeFieldStyle.ts | 8 ++++++++ 3 files changed, 16 insertions(+) diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts index 0d0ccf3..c499db6 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts +++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts @@ -96,6 +96,10 @@ export const Time = styled.div` ${props.theme.primaryDark} 8.6px ); `} + + @media (prefers-reduced-motion: reduce) { + transition: none; + } `; export const Spacer = styled.div` diff --git a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts index 7aeafaa..055e0a8 100644 --- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts +++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts @@ -72,6 +72,10 @@ export const Date = styled.button` border: 0; margin: 0; appearance: none; + transition: background-color .1s; + @media (prefers-reduced-motion: reduce) { + transition: none; + } background-color: ${props => props.theme.primaryBackground}; border: 1px solid ${props => props.theme.primaryLight}; diff --git a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts index a524410..6706c23 100644 --- a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts +++ b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts @@ -38,6 +38,10 @@ export const Handle = styled.div` left: calc(${props => props.value * 4.1666666666666666}% - 11px); cursor: ew-resize; touch-action: none; + transition: left .1s; + @media (prefers-reduced-motion: reduce) { + transition: none; + } &:after { content: '|||'; @@ -73,4 +77,8 @@ export const Selected = styled.div` top: 0; background-color: ${props => props.theme.primary}; border-radius: 2px; + transition: left .1s, right .1s; + @media (prefers-reduced-motion: reduce) { + transition: none; + } `;