136 lines
2.8 KiB
JavaScript
136 lines
2.8 KiB
JavaScript
import styled from 'styled-components';
|
|
import { phoneLandscape, smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
|
import { borderRadius } from '/imports/ui/stylesheets/styled-components/general';
|
|
import {
|
|
colorSuccess,
|
|
colorDanger,
|
|
colorBackground,
|
|
} from '/imports/ui/stylesheets/styled-components/palette';
|
|
import { fontSizeBase, fontSizeSmall, fontSizeXS } from '/imports/ui/stylesheets/styled-components/typography';
|
|
|
|
const colorTimerRunning = `${colorSuccess}`;
|
|
const colorTimerStopped = `${colorDanger}`;
|
|
const timerMarginSM = `.5rem`;
|
|
const timerPaddingXSM = `.13rem`;
|
|
const timerPaddingSM = `.25rem`;
|
|
const timerPaddingLg = `.75rem`;
|
|
const timerPaddingXL = `1.62rem`;
|
|
const timerMaxWidth = `10rem`;
|
|
const timerFontWeight = `400`;
|
|
const timerBorderRadius = `2rem`;
|
|
|
|
const TimerWrapper = styled.div`
|
|
display: flex;
|
|
overflow: hidden;
|
|
margin-left: auto;
|
|
`;
|
|
|
|
const Timer = styled.div`
|
|
display: flex;
|
|
max-height: ${timerPaddingXL});
|
|
`;
|
|
|
|
const timerRunning = `
|
|
background-color: ${colorTimerRunning};
|
|
border: solid 2px ${colorTimerRunning};
|
|
`;
|
|
|
|
const timerStopped = `
|
|
background-color: ${colorTimerStopped};
|
|
border: solid 2px ${colorTimerStopped};
|
|
`;
|
|
|
|
const disabledStyle = `
|
|
cursor: default;
|
|
`;
|
|
|
|
const hiddenStyle = `
|
|
@media ${smallOnly} {
|
|
visibility: hidden;
|
|
}
|
|
`;
|
|
|
|
const TimerIndicator = styled.div`
|
|
@include highContrastOutline();
|
|
cursor: pointer;
|
|
color: white;
|
|
font-weight: ${timerFontWeight};
|
|
border-radius: ${timerBorderRadius} ${timerBorderRadius};
|
|
font-size: ${fontSizeBase};
|
|
margin-left: ${borderRadius};
|
|
margin-right: ${borderRadius};
|
|
|
|
@media ${phoneLandscape} {
|
|
height: 1rem;
|
|
}
|
|
|
|
span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: ${timerMaxWidth};
|
|
|
|
@media ${phoneLandscape} {
|
|
font-size: ${fontSizeXS};
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: ${fontSizeSmall};
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
|
|
@media ${phoneLandscape} {
|
|
height: ${timerMarginSM};
|
|
width: ${timerMarginSM};
|
|
font-size: ${fontSizeXS};
|
|
}
|
|
}
|
|
|
|
${({ running }) => (running ? timerRunning : timerStopped)};
|
|
${({ disabled }) => disabled && disabledStyle};
|
|
${({ hide }) => hide && hiddenStyle};
|
|
`;
|
|
|
|
const time = `
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-self: center;
|
|
padding: 0 ${timerPaddingSM} 0 0;
|
|
`;
|
|
|
|
const TimerContent = styled.div`
|
|
${time}
|
|
display: flex;
|
|
background-color: ${colorBackground}
|
|
|
|
[dir="ltr"] & {
|
|
span:first-child {
|
|
padding: 0 ${timerPaddingSM};
|
|
}
|
|
}
|
|
|
|
[dir="rtl"] & {
|
|
span:last-child {
|
|
padding: 0 ${timerPaddingSM};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const TimerIcon = styled.span`
|
|
${time}
|
|
`;
|
|
|
|
const TimerTime = styled.span`
|
|
${time}
|
|
`;
|
|
|
|
export default {
|
|
TimerWrapper,
|
|
Timer,
|
|
TimerIndicator,
|
|
TimerContent,
|
|
TimerIcon,
|
|
TimerTime,
|
|
}; |