updated style of multiple dropdown as v2 (#8433)
This commit is contained in:
parent
4bc370c3d8
commit
8f32a6dba3
|
|
@ -119,11 +119,29 @@ const MultiOptionWrapper = styled(OptionWrapper)`
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
.${Classes.MULTI_SELECT_BOX} {
|
.${Classes.MULTI_SELECT_BOX} {
|
||||||
background-color: ${(props) =>
|
background-color: ${(props) =>
|
||||||
props.selected ? Colors.DANUBE : "transparent"};
|
props.selected ? props.theme.colors.info.main : "transparent"};
|
||||||
border-color: ${(props) =>
|
border: 1.8px solid
|
||||||
|
${(props) =>
|
||||||
props.selected
|
props.selected
|
||||||
? Colors.DANUBE
|
? props.theme.colors.info.main
|
||||||
: props.theme.colors.propertyPane.jsIconBg};
|
: props.theme.colors.checkbox.unchecked};
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: ${(props) => (props.selected ? "block" : "none")};
|
||||||
|
top: -1px;
|
||||||
|
left: 2.5px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid
|
||||||
|
${(props) =>
|
||||||
|
props.selected
|
||||||
|
? props.theme.colors.checkbox.normalCheck
|
||||||
|
: "transparent"};
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
@ -131,8 +149,8 @@ const SquareBox = styled.div`
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
border: 1px solid;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export type DropdownOption = {
|
export type DropdownOption = {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user