scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Subtle transitions

Browse source
This commit is contained in:
Ben Grant 2021-06-05 17:51:39 +10:00
parent 7f1236693e
commit 02adb1e380
3 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
View file

@ -96,6 +96,10 @@ export const Time = styled.div`
${props.theme.primaryDark} 8.6px ${props.theme.primaryDark} 8.6px
); );
`} `}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`; `;
export const Spacer = styled.div` export const Spacer = styled.div`

4
crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
View file

@ -72,6 +72,10 @@ export const Date = styled.button`
border: 0; border: 0;
margin: 0; margin: 0;
appearance: none; appearance: none;
transition: background-color .1s;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
background-color: ${props => props.theme.primaryBackground}; background-color: ${props => props.theme.primaryBackground};
border: 1px solid ${props => props.theme.primaryLight}; border: 1px solid ${props => props.theme.primaryLight};

8
crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
View file

@ -38,6 +38,10 @@ export const Handle = styled.div`
left: calc(${props => props.value * 4.1666666666666666}% - 11px); left: calc(${props => props.value * 4.1666666666666666}% - 11px);
cursor: ew-resize; cursor: ew-resize;
touch-action: none; touch-action: none;
transition: left .1s;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
&:after { &:after {
content: '|||'; content: '|||';
@ -73,4 +77,8 @@ export const Selected = styled.div`
top: 0; top: 0;
background-color: ${props => props.theme.primary}; background-color: ${props => props.theme.primary};
border-radius: 2px; border-radius: 2px;
transition: left .1s, right .1s;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`; `;