43 lines
650 B
JavaScript
43 lines
650 B
JavaScript
import { max, min } from '@/styles/mq';
|
|
import styled, { css } from 'styled-components';
|
|
import { Box } from 'ui/grid';
|
|
|
|
const order = css`
|
|
${max('laptop')} {
|
|
#settings {
|
|
order: 1;
|
|
}
|
|
|
|
#form {
|
|
order: 2;
|
|
}
|
|
|
|
#output {
|
|
order: 3;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const Grid = styled(Box)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
${order}
|
|
|
|
${min('laptop')} {
|
|
display: grid;
|
|
align-items: flex-start;
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
|
|
${min('desktop')} {
|
|
grid-template-columns: 2fr 1fr 1.5fr;
|
|
/* margin: 8px 5%; */
|
|
}
|
|
|
|
${min('desktop-xl')} {
|
|
margin: 8px 10% !important;
|
|
}
|
|
`;
|