@navinc/base-react-components
Version:
Nav's Pattern Library
75 lines (70 loc) • 2.69 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.threeColumnBreakpoint = exports.twoColumnBreakpoint = exports.All = exports.Two = exports.OneTwoOne = exports.OneFewer = exports.One = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const twoColumnBreakpoint = 'min-width: 744px';
exports.twoColumnBreakpoint = twoColumnBreakpoint;
const threeColumnBreakpoint = 'min-width: 1104px';
exports.threeColumnBreakpoint = threeColumnBreakpoint;
const One = styled_components_1.default.div.withConfig({ displayName: "brc-sc-One", componentId: "brc-sc-uqzlze" }) ``;
exports.One = One;
const OneFewer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-OneFewer", componentId: "brc-sc-1r2xufy" }) `
@media (${threeColumnBreakpoint}) {
grid-column: span 2;
}
`;
exports.OneFewer = OneFewer;
const OneTwoOne = styled_components_1.default.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;
}
`;
exports.OneTwoOne = OneTwoOne;
const Two = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Two", componentId: "brc-sc-55nl5o" }) `
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
`;
exports.Two = Two;
const All = styled_components_1.default.div.withConfig({ displayName: "brc-sc-All", componentId: "brc-sc-2lud2w" }) `
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
@media (${threeColumnBreakpoint}) {
grid-column: span 3;
}
`;
exports.All = All;
const ThreeColumnLayout = styled_components_1.default.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;
exports.default = ThreeColumnLayout;
//# sourceMappingURL=three-col-layout.js.map