p5.js-web-editor/client/modules/User/components/ResponsiveForm.jsx
2020-08-21 16:28:04 -03:00

64 lines
1.3 KiB
JavaScript

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { remSize } from '../../../theme';
const ResponsiveFormWrapper = styled.div`
.form-container__content {
width: unset !important;
padding-top: ${remSize(16)};
padding-bottom: ${remSize(64)};
}
.form__input {
min-width: unset;
padding: 0px ${remSize(12)};
height: ${remSize(28)};
}
.form-container__title { margin-bottom: ${remSize(14)}}
p.form__field { margin-top: 0px !important; }
label.form__label { margin-top: ${remSize(8)} !important; }
.form-error { width: 100% }
.nav__items-right:last-child { display: none }
.form-container {
height: 100%
}
.nav__dropdown {
right: 0 !important;
left: unset !important;
}
.form-container__stack {
svg {
width: ${remSize(12)};
height: ${remSize(12)}
}
a { padding: 0px }
}
`;
const ResponsiveForm = props =>
(props.mobile === true
? (
<ResponsiveFormWrapper>
{props.children}
</ResponsiveFormWrapper>
)
: props.children);
ResponsiveForm.propTypes = {
mobile: PropTypes.bool,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
};
ResponsiveForm.defaultProps = {
mobile: false,
children: []
};
export default ResponsiveForm;