84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
import styled, { css } from "styled-components";
|
|
import { tablet } from "../utils/device";
|
|
import Base from "../themes/base";
|
|
function getHorizontalCss(labelWidth) {
|
|
return css`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: start;
|
|
margin: ${(props) => props.theme.fieldContainer.horizontal.margin};
|
|
|
|
.field-label {
|
|
line-height: ${(props) =>
|
|
props.theme.fieldContainer.horizontal.label.lineHeight};
|
|
margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
|
|
position: relative;
|
|
}
|
|
.field-label-icon {
|
|
display: inline-flex;
|
|
min-width: ${labelWidth};
|
|
width: ${labelWidth};
|
|
}
|
|
.field-body {
|
|
flex-grow: ${(props) => props.theme.fieldContainer.horizontal.body.width};
|
|
}
|
|
.icon-button {
|
|
position: relative;
|
|
margin-top: ${(props) =>
|
|
props.theme.fieldContainer.horizontal.iconButton.marginTop};
|
|
margin-left: ${(props) =>
|
|
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
|
|
}
|
|
`;
|
|
}
|
|
|
|
function getVerticalCss() {
|
|
return css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
margin: ${(props) => props.theme.fieldContainer.vertical.margin};
|
|
|
|
.field-label {
|
|
line-height: ${(props) =>
|
|
props.theme.fieldContainer.vertical.label.lineHeight};
|
|
height: ${(props) => props.theme.fieldContainer.vertical.label.height};
|
|
display: inline-block;
|
|
}
|
|
.field-label-icon {
|
|
display: inline-flex;
|
|
width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
|
|
margin: ${(props) =>
|
|
props.theme.fieldContainer.vertical.labelIcon.margin};
|
|
}
|
|
.field-body {
|
|
width: ${(props) => props.theme.fieldContainer.vertical.body.width};
|
|
}
|
|
.icon-button {
|
|
position: relative;
|
|
margin: ${(props) =>
|
|
props.theme.fieldContainer.vertical.iconButton.margin};
|
|
padding: ${(props) =>
|
|
props.theme.fieldContainer.vertical.iconButton.padding};
|
|
width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
|
|
height: ${(props) =>
|
|
props.theme.fieldContainer.vertical.iconButton.height};
|
|
}
|
|
`;
|
|
}
|
|
|
|
const Container = styled.div`
|
|
.error-label {
|
|
max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
|
|
}
|
|
${(props) =>
|
|
props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
|
|
|
|
@media ${tablet} {
|
|
${getVerticalCss()}
|
|
}
|
|
`;
|
|
|
|
Container.defaultProps = { theme: Base };
|
|
export default Container;
|