88 lines
1.8 KiB
TypeScript
88 lines
1.8 KiB
TypeScript
|
import styled, { css } from "styled-components";
|
||
|
|
import { Intent, IntentColors } from "constants/DefaultTheme";
|
||
|
|
|
||
|
|
export const DropdownTrigger = styled.div`
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
& > div > div {
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
&&& button {
|
||
|
|
width: 100%;
|
||
|
|
color: inherit;
|
||
|
|
justify-content: space-between;
|
||
|
|
outline: 0;
|
||
|
|
span {
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
export const DropdownContent = styled.div`
|
||
|
|
&&& * {
|
||
|
|
font-size: ${props => props.theme.fontSizes[4]}px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const DropdownContentSection = styled.div<{ stick: boolean }>`
|
||
|
|
position: ${props => (props.stick ? "sticky" : "relative")};
|
||
|
|
background: white;
|
||
|
|
z-index: ${props => (props.stick ? 1 : 0)};
|
||
|
|
padding: 8px 0;
|
||
|
|
&&&&&& button {
|
||
|
|
padding: 0;
|
||
|
|
min-height: 0px;
|
||
|
|
}
|
||
|
|
&:first-of-type {
|
||
|
|
padding: 0 0 0px 0;
|
||
|
|
}
|
||
|
|
&:last-of-type {
|
||
|
|
padding: 0px 0 0 0;
|
||
|
|
}
|
||
|
|
&:not(:last-of-type):after {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
height: 1px;
|
||
|
|
background: #ccc;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const onHover = css<{ intent?: Intent }>`
|
||
|
|
cursor: pointer;
|
||
|
|
&&&&:hover {
|
||
|
|
& * {
|
||
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
& a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
background: ${props =>
|
||
|
|
props.intent ? IntentColors[props.intent] : IntentColors.primary};
|
||
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const Option = styled.div<{ intent?: Intent; active?: boolean }>`
|
||
|
|
padding: 8px 16px;
|
||
|
|
margin: 4px 0;
|
||
|
|
|
||
|
|
& a {
|
||
|
|
color: ${props => props.theme.colors.textDefault};
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
&:first-of-type,
|
||
|
|
&:last-of-type {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
${props => (props.active ? onHover : ``)};
|
||
|
|
`;
|