Property Pane Controls
- Fixes #121, #122, #123, #124, #90, #46, #65, #100, #101, #68, #102
2019-10-24 05:24:45 +00:00
|
|
|
import styled from "styled-components";
|
|
|
|
|
import { Select } from "@blueprintjs/select";
|
|
|
|
|
import { Switch, InputGroup } from "@blueprintjs/core";
|
|
|
|
|
|
|
|
|
|
export const ControlWrapper = styled.div`
|
|
|
|
|
margin: ${props => props.theme.spaces[3]}px 0;
|
|
|
|
|
& > label {
|
|
|
|
|
color: ${props => props.theme.colors.paneText};
|
|
|
|
|
margin-bottom: ${props => props.theme.spaces[1]}px;
|
|
|
|
|
font-size: ${props => props.theme.fontSizes[3]}px;
|
|
|
|
|
}
|
2019-10-24 11:47:35 +00:00
|
|
|
&&& > label:first-of-type {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
&&& > label {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
Property Pane Controls
- Fixes #121, #122, #123, #124, #90, #46, #65, #100, #101, #68, #102
2019-10-24 05:24:45 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const DropDown = Select.ofType<{ label: string; value: string }>();
|
|
|
|
|
export const StyledDropDown = styled(DropDown)`
|
|
|
|
|
&&& button {
|
|
|
|
|
background: ${props => props.theme.colors.paneInputBG};
|
|
|
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export const StyledSwitch = styled(Switch)`
|
|
|
|
|
&&&&& input:checked ~ span {
|
|
|
|
|
background: ${props => props.theme.colors.primary};
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export const StyledInputGroup = styled(InputGroup)`
|
|
|
|
|
& > input {
|
2019-10-31 05:28:11 +00:00
|
|
|
placeholderText: ${props => props.placeholder}
|
Property Pane Controls
- Fixes #121, #122, #123, #124, #90, #46, #65, #100, #101, #68, #102
2019-10-24 05:24:45 +00:00
|
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
|
|
|
|
background: ${props => props.theme.colors.paneInputBG};
|
|
|
|
|
}
|
|
|
|
|
`;
|