design-system-govbr-rnp
Version:
## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do
31 lines (30 loc) • 4.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RowGrid = exports.ComponentContainer = exports.ColComponent = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _medias = _interopRequireDefault(require("./medias.js"));
var _templateObject, _templateObject2, _templateObject3;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var appliesContainerSize = function appliesContainerSize(size) {
switch (size) {
case "lg":
return "\n @media (min-width: ".concat(_medias.default.breakpointXs, ") and (max-width: ").concat(_medias.default.breakpointSm, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointSm, ") and (max-width: ").concat(_medias.default.breakpointMd, "){ \n max-width: 100%; \n } \n @media (min-width: ").concat(_medias.default.breakpointMd, ") and (max-width: ").concat(_medias.default.breakpointLg, "){ \n max-width: 100%; \n } \n @media (min-width: ").concat(_medias.default.breakpointLg, ") and (max-width: ").concat(_medias.default.breakpointXl, "){ \n max-width: 1200px; \n }\n @media (min-width: ").concat(_medias.default.breakpointXl, ") { \n max-width: 1520px; \n }\n ");
case "xl":
return "\n @media (min-width: ".concat(_medias.default.breakpointXs, ") and (max-width: ").concat(_medias.default.breakpointSm, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointSm, ") and (max-width: ").concat(_medias.default.breakpointMd, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointMd, ") and (max-width: ").concat(_medias.default.breakpointLg, "){ \n max-width: 100%; \n } \n @media (min-width: ").concat(_medias.default.breakpointLg, ") and (max-width: ").concat(_medias.default.breakpointXl, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointXl, ") { \n max-width: 1520px; \n }\n ");
case "fluid":
return "\n @media (min-width: ".concat(_medias.default.breakpointXs, ") and (max-width: ").concat(_medias.default.breakpointSm, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointSm, ") and (max-width: ").concat(_medias.default.breakpointMd, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointMd, ") and (max-width: ").concat(_medias.default.breakpointLg, "){ \n max-width: 100%;\n } \n @media (min-width: ").concat(_medias.default.breakpointLg, ") and (max-width: ").concat(_medias.default.breakpointXl, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointXl, ") { \n max-width: 100%; \n } \n ");
default:
return "\n @media (min-width: ".concat(_medias.default.breakpointXs, ") and (max-width: ").concat(_medias.default.breakpointSm, "){ \n max-width: 100%; \n }\n @media (min-width: ").concat(_medias.default.breakpointSm, ") and (max-width: ").concat(_medias.default.breakpointMd, "){ \n max-width: 536px; \n }\n @media (min-width: ").concat(_medias.default.breakpointMd, ") and (max-width: ").concat(_medias.default.breakpointLg, "){ \n max-width: 912px; \n }\n @media (min-width: ").concat(_medias.default.breakpointLg, ") and (max-width: ").concat(_medias.default.breakpointXl, "){ \n max-width: 1200px; \n }\n @media (min-width: ").concat(_medias.default.breakpointXl, ") { \n max-width: 1520px; \n }");
}
};
var ComponentContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0 auto;\n ", ";\n"])), function (props) {
return props.container && appliesContainerSize(props.container);
});
exports.ComponentContainer = ComponentContainer;
var RowGrid = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
exports.RowGrid = RowGrid;
var ColComponent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
exports.ColComponent = ColComponent;