main-site/components/styles/themedropdown.tsx

53 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-12-15 20:23:11 +00:00
import styled from 'styled-components';
interface DisplayPropType {
show?: false | true;
}
interface ActivePropType {
active?: false | true;
}
export const ThemeDropDown = styled.div`
margin-left: 1%;
2022-12-15 20:23:11 +00:00
min-width: 180px;
color: ${({ theme }) => theme.colors.primary}
display: flex;
flex-direction: column;
`
export const ThemeDropDownButton = styled.button`
width: 90%;
2022-12-15 20:23:11 +00:00
border: 1px solid;
background-color: ${({ theme }) => theme.colors.background};
padding: 0.2rem 0.5rem;
cursor: pointer;
color: ${({ theme }) => theme.colors.primary};
transition: color 0.15s ease;
2022-12-15 20:23:11 +00:00
&:focus,:hover {
2022-12-15 20:23:11 +00:00
color: ${({ theme }) => theme.colors.secondary};
}
`
export const ThemeDropDownOptions = styled.div<DisplayPropType>`
position: absolute;
2022-12-15 20:23:11 +00:00
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};
}
`