main-site/components/styles/themedropdown.tsx
2022-12-15 21:23:11 +01:00

54 lines
1.3 KiB
TypeScript

import styled from 'styled-components';
interface DisplayPropType {
show?: false | true;
}
interface ActivePropType {
active?: false | true;
}
export const ThemeDropDown = styled.div`
min-width: 180px;
color: ${({ theme }) => theme.colors.primary}
display: flex;
flex-direction: column;
`
export const ThemeDropDownButton = styled.button`
width: 100%;
border: 1px solid;
background-color: ${({ theme }) => theme.colors.background};
padding: 0.2rem 0.5rem;
cursor: pointer;
color: ${({ theme }) => theme.colors.primary};
&:hover {
color: ${({ theme }) => theme.colors.secondary};
}
&:focus {
color: ${({ theme }) => theme.colors.secondary};
}
`
export const ThemeDropDownOptions = styled.div<DisplayPropType>`
color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors.background};
display: ${ props => props.show ? "flex" : "none" };
flex-direction: column;
min-width: 160px;
z-index: 1;
`
export const ThemeDropDownOption = styled.button<ActivePropType>`
color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
background-color: ${({ theme }) => theme.colors.background};
border: 1px solid;
padding: 0.2rem 0.5rem;
text-decoration: none;
&:hover {
color: ${({ theme }) => theme.colors.secondary};
}
`