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

Responsive design and embedded fonts

Browse source
This commit is contained in:
Ben Grant 2021-03-02 22:47:29 +11:00
parent 89fd659f5c
commit b6b0a48d75
5 changed files with 35 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,21 +33,35 @@ export const CalendarDays = styled.div`
grid-gap: 2px;
`;
export const Day = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 3px 0;
font-weight: bold;
user-select: none;
opacity: .7;
@media (max-width: 350px) {
font-size: 12px;
}
`;
export const CalendarBody = styled.div`
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 2px;
& div:first-child {
& div:first-of-type {
border-top-left-radius: 3px;
}
& div:nth-child(7) {
& div:nth-of-type(7) {
border-top-right-radius: 3px;
}
& div:nth-last-child(7) {
& div:nth-last-of-type(7) {
border-bottom-left-radius: 3px;
}
& div:last-child {
& div:last-of-type {
border-bottom-right-radius: 3px;
}
`;
@ -81,13 +95,3 @@ export const Date = styled.div`
color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')};
`}
`;
export const Day = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
font-weight: bold;
user-select: none;
opacity: .7;
`;