Variables
Const Button
Button: string & StyledComponentBase<"div", any, object, never> = styled.div<{isSubmit: booleanonClick: () => voidbuttonType: 'primaryColor' | 'positiveColor'}>`height: 100%;font-size: ${props => props.theme.largeFontSize};display: flex;justify-content: center;align-items: center;line-height: ${props => props.theme.minimumButtonSize};padding: 0;margin: 0;opacity: ${props => props.theme.minimumOpacity};cursor: pointer;color: ${props => readableColor(props.theme[props.buttonType])};width: 5em;background-color: ${props => props.theme[props.buttonType]};:hover {opacity: 1;}`
Const ControlsGroup
ControlsGroup: string & StyledComponentBase<"div", any, __type, never> = styled.div`height: 100%;padding: 0;margin: 0;display: flex;flex-direction: row;align-items: right;flex: 0 0 auto;`
Const DrawingBackground
DrawingBackground: string & StyledComponentBase<"div", any, __type, never> = styled.div`display: flex;flex-direction: row;align-items: center;height: 100%;width: 100%;max-width: 100%;background-color: ${props => transparentize(0.2, props.theme.positiveColor)};`
Const InvisibleBackground
InvisibleBackground: string & StyledComponentBase<"div", any, __type, never> = styled.div`display: none;`
Const SelectableButton
SelectableButton: string & StyledComponentBase<"div", any, object, never> = styled.div<{ isSelected: boolean }>`display: flex;justify-content: center;align-items: center;font-size: calc(${({ theme }) => theme.largeFontSize} * 1.5);padding: ${({ theme }) => theme.mediumSpacing};opacity: ${props => (props.isSelected ? 1 : props.theme.minimumOpacity)};cursor: pointer;color: ${props => readableColor(props.theme.positiveColor)};border: 1px solid${props =>props.isSelected? readableColor(props.theme.positiveColor): 'transparent'};:hover {opacity: 1;border: 1px solid ${props => readableColor(props.theme.positiveColor)};}`
Const ShapeMenu
ShapeMenu: string & StyledComponentBase<"div", any, __type, never> = styled.div`height: 100%;display: flex;border-right: 1px solid ${props => props.theme.backgroundSlideout};border-left: 1px solid ${props => props.theme.backgroundSlideout};font-size: ${props => props.theme.minimumFontSize};`
Const Title
Title: string & StyledComponentBase<"div", any, __type, never> = styled.div`color: ${props => readableColor(props.theme.positiveColor)};font-weight: bold;align-self: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 0 1 auto;`
Const TitleContainer
TitleContainer: string & StyledComponentBase<"div", any, __type, never> = styled.div`display: flex;flex-direction: row;flex-grow: 1;flex-shrink: 1;height: 100%;font-size: ${props => props.theme.largeFontSize};`
Const TitleLabel
TitleLabel: string & StyledComponentBase<"div", any, __type, never> = styled.div`color: ${props => readableColor(props.theme.positiveColor)};align-self: center;padding-left: ${props => props.theme.largeSpacing};padding-right: ${props => props.theme.minimumSpacing};flex: 0 0 auto;`
Const ToolMenu
ToolMenu: string & StyledComponentBase<"div", any, __type, never> = styled.div`height: 100%;display: flex;font-size: ${props => props.theme.minimumFontSize};`