@navinc/base-react-components
Version:
Nav's Pattern Library
63 lines (58 loc) • 2.03 kB
JavaScript
import styled from 'styled-components';
const twoColumnBreakpoint = 'min-width: 744px';
const threeColumnBreakpoint = 'min-width: 1104px';
const One = styled.div.withConfig({ displayName: "brc-sc-One", componentId: "brc-sc-uqzlze" }) ``;
const OneFewer = styled.div.withConfig({ displayName: "brc-sc-OneFewer", componentId: "brc-sc-1r2xufy" }) `
@media (${threeColumnBreakpoint}) {
grid-column: span 2;
}
`;
const OneTwoOne = styled.div.withConfig({ displayName: "brc-sc-OneTwoOne", componentId: "brc-sc-1lukx0g" }) `
grid-column: span 1;
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
@media (${threeColumnBreakpoint}) {
grid-column: span 1;
}
`;
const Two = styled.div.withConfig({ displayName: "brc-sc-Two", componentId: "brc-sc-55nl5o" }) `
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
`;
const All = styled.div.withConfig({ displayName: "brc-sc-All", componentId: "brc-sc-2lud2w" }) `
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
@media (${threeColumnBreakpoint}) {
grid-column: span 3;
}
`;
const ThreeColumnLayout = styled.div.withConfig({ displayName: "brc-sc-ThreeColumnLayout", componentId: "brc-sc-1a0d12m" }) `
align-items: start;
max-width: 1056px;
margin: 0 auto;
display: grid;
padding: 16px;
grid-gap: 16px;
grid-template-columns: 1fr;
@media (${twoColumnBreakpoint}) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
padding: 24px;
}
@media (${threeColumnBreakpoint}) {
grid-template-columns: repeat(3, 1fr);
}
`;
ThreeColumnLayout.One = One;
ThreeColumnLayout.OneFewer = OneFewer;
ThreeColumnLayout.OneTwoOne = OneTwoOne;
ThreeColumnLayout.Two = Two;
ThreeColumnLayout.All = All;
ThreeColumnLayout.twoColumnBreakpoint = twoColumnBreakpoint;
ThreeColumnLayout.threeColumnBreakpoint = threeColumnBreakpoint;
export { One, OneFewer, OneTwoOne, Two, All, twoColumnBreakpoint, threeColumnBreakpoint };
export default ThreeColumnLayout;
//# sourceMappingURL=three-col-layout.js.map