UNPKG

@cavilha/layout

Version:

A set of components used to design grid layouts

2 lines (1 loc) 4.19 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=require("@cavilha/theme");function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=l(t),d=r.styled("div",{display:"flex",flexWrap:"wrap",mr:"calc($gridGutter / -2)",ml:"calc($gridGutter / -2)",boxSizing:"border-box",variants:{debug:{true:{border:"1px solid green"}},align:{normal:{alignItems:"normal"},start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"},stretch:{alignItems:"stretch"}}}}),e=r.styled("div",{position:"relative",ml:"auto",mr:"auto",pr:"calc($gridGutter / 2)",pl:"calc($gridGutter / 2)",maxWidth:"100%",boxSizing:"border-box","@sm":{width:"100%"},"@md":{width:"100%"},"@lg":{width:"1224px"},variants:{fluid:{true:{"@sm":{width:"100%"},"@md":{width:"100%"},"@lg":{width:"100%"}}},debug:{true:{border:"1px solid red"}}}}),c=i.default.forwardRef((function(t,r){var l=t.fluid,d=void 0!==l&&l,c=t.children,n=t.debug;return i.default.createElement(e,{ref:r,fluid:d,debug:n},c)})),n=function(){return n=Object.assign||function(t){for(var r,l=1,i=arguments.length;l<i;l++)for(var d in r=arguments[l])Object.prototype.hasOwnProperty.call(r,d)&&(t[d]=r[d]);return t},n.apply(this,arguments)};var a=r.styled("div",{position:"relative",width:"100%",minHeight:1,pr:"calc($gridMobileGutter / 2)",pl:"calc($gridMobileGutter / 2)",boxSizing:"border-box","@lg":{pr:"calc($gridGutter / 2)",pl:"calc($gridGutter / 2)"},variants:{sm:{12:{"@sm":{width:"calc(100% / 1)"}},11:{"@sm":{width:"calc(100% / ($gridColumns / 11))"}},10:{"@sm":{width:"calc(100% / ($gridColumns / 10))"}},9:{"@sm":{width:"calc(100% / ($gridColumns / 9))"}},8:{"@sm":{width:"calc(100% / ($gridColumns / 8))"}},7:{"@sm":{width:"calc(100% / ($gridColumns / 7))"}},6:{"@sm":{width:"calc(100% / ($gridColumns / 6))"}},5:{"@sm":{width:"calc(100% / ($gridColumns / 5))"}},4:{"@sm":{width:"calc(100% / ($gridColumns / 4))"}},3:{"@sm":{width:"calc(100% / ($gridColumns / 3))"}},2:{"@sm":{width:"calc(100% / ($gridColumns / 2))"}},1:{"@sm":{width:"calc(100% / $gridColumns)"}}},md:{12:{"@md":{width:"calc(100% / 1)"}},11:{"@md":{width:"calc(100% / ($gridColumns / 11))"}},10:{"@md":{width:"calc(100% / ($gridColumns / 10))"}},9:{"@md":{width:"calc(100% / ($gridColumns / 9))"}},8:{"@md":{width:"calc(100% / ($gridColumns / 8))"}},7:{"@md":{width:"calc(100% / ($gridColumns / 7))"}},6:{"@md":{width:"calc(100% / ($gridColumns / 6))"}},5:{"@md":{width:"calc(100% / ($gridColumns / 5))"}},4:{"@md":{width:"calc(100% / ($gridColumns / 4))"}},3:{"@md":{width:"calc(100% / ($gridColumns / 3))"}},2:{"@md":{width:"calc(100% / ($gridColumns / 2))"}},1:{"@md":{width:"calc(100% / $gridColumns)"}}},lg:{12:{"@lg":{width:"calc(100% / 1) !important"}},11:{"@lg":{width:"calc(100% / ($gridColumns / 11)) !important"}},10:{"@lg":{width:"calc(100% / ($gridColumns / 10)) !important"}},9:{"@lg":{width:"calc(100% / ($gridColumns / 9)) !important"}},8:{"@lg":{width:"calc(100% / ($gridColumns / 8)) !important"}},7:{"@lg":{width:"calc(100% / ($gridColumns / 7)) !important"}},6:{"@lg":{width:"calc(100% / ($gridColumns / 6)) !important"}},5:{"@lg":{width:"calc(100% / ($gridColumns / 5)) !important"}},4:{"@lg":{width:"calc(100% / ($gridColumns / 4)) !important"}},3:{"@lg":{width:"calc(100% / ($gridColumns / 3)) !important"}},2:{"@lg":{width:"calc(100% / ($gridColumns / 2)) !important"}},1:{"@lg":{width:"calc(100% / $gridColumns) !important"}}},noGutters:{true:{pr:"0",pl:"0"}},debug:{true:{bc:"#ffff001f",border:"1px solid yellow"}}}});exports.Col=function(t){var r=t.sm,l=t.md,d=t.lg,e=t.children,c=t.debug,o=function(t,r){var l={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&r.indexOf(i)<0&&(l[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var d=0;for(i=Object.getOwnPropertySymbols(t);d<i.length;d++)r.indexOf(i[d])<0&&Object.prototype.propertyIsEnumerable.call(t,i[d])&&(l[i[d]]=t[i[d]])}return l}(t,["sm","md","lg","children","debug"]);return i.default.createElement(a,n({sm:r,md:l,lg:d,debug:c},o),e)},exports.Container=c,exports.Row=function(t){var r=t.children,l=t.css,e=t.align,c=t.debug;return i.default.createElement(d,{debug:c,align:e,css:l},r)};