@navinc/base-react-components
Version:
Nav's Pattern Library
75 lines (70 loc) • 2.79 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 = exports.ThreeColumnLayout = 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-9ykpsm" }) ``;
exports.One = One;
const OneFewer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-OneFewer", componentId: "brc-sc-1b7ok02" }) `
@media (${threeColumnBreakpoint}) {
grid-column: span 2;
}
`;
exports.OneFewer = OneFewer;
const OneTwoOne = styled_components_1.default.div.withConfig({ displayName: "brc-sc-OneTwoOne", componentId: "brc-sc-rlvso1" }) `
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-1ee8bxj" }) `
@media (${twoColumnBreakpoint}) {
grid-column: span 2;
}
`;
exports.Two = Two;
const All = styled_components_1.default.div.withConfig({ displayName: "brc-sc-All", componentId: "brc-sc-10kx32h" }) `
@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-1ozx1zt" }) `
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);
}
`;
exports.ThreeColumnLayout = _ThreeColumnLayout;
exports.ThreeColumnLayout.One = One;
exports.ThreeColumnLayout.OneFewer = OneFewer;
exports.ThreeColumnLayout.OneTwoOne = OneTwoOne;
exports.ThreeColumnLayout.Two = Two;
exports.ThreeColumnLayout.All = All;
exports.ThreeColumnLayout.twoColumnBreakpoint = twoColumnBreakpoint;
exports.ThreeColumnLayout.threeColumnBreakpoint = threeColumnBreakpoint;
//# sourceMappingURL=three-col-layout.js.map