react-styled-flexboxgrid
Version:
Grid system based on styled-components and flexbox for React
2 lines (1 loc) • 6.24 kB
JavaScript
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("prop-types"),require("styled-components"),require("lodash.isinteger")):"function"==typeof define&&define.amd?define(["exports","prop-types","styled-components","lodash.isinteger"],e):e((n=n||self)["react-styled-flexboxgrid"]={},n.PropTypes,n.styled,n._.isInteger)}(this,function(n,r,u,t){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var e="default"in u?u.default:u;function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),r.push.apply(r,t)}return r}function f(i){for(var n=1;n<arguments.length;n++){var u=null!=arguments[n]?arguments[n]:{};n%2?o(Object(u),!0).forEach(function(n){var e,r,t;e=i,t=u[r=n],r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(u)):o(Object(u)).forEach(function(n){Object.defineProperty(i,n,Object.getOwnPropertyDescriptor(u,n))})}return i}function i(n,e){return e||(e=n.slice(0)),n.raw=e,n}function c(){var n=i(["\n @media "," {\n ","\n }\n "]);return c=function(){return n},n}t=t&&t.hasOwnProperty("default")?t.default:t;var a="flexboxgrid",d={gridSize:12,gutterWidth:1,outerMargin:2,mediaQuery:"only screen",container:{sm:46,md:61,lg:76},breakpoints:{xs:0,sm:48,md:64,lg:75}},s=[],l=function(n){var e=n.theme&&n.theme[a]||{},i=f({},d,{},e,{container:f({},d.container,{},e.container),breakpoints:f({},d.breakpoints,{},e.breakpoints)});return i.media=Object.keys(i.breakpoints).reduce(function(n,e){var r,t=i.breakpoints[e];return n[e]=(r=[i.mediaQuery,0!==e&&"(min-width: "+t+"em)"].filter(Boolean).join(" and "),function(){return u.css(c(),r,u.css.apply(void 0,arguments))}),n},{}),i},p=["xs","sm","md","lg"];function m(n){var e,r=(e=n,JSON.stringify(e.theme&&e.theme[a]||{}));if(s[0]===r)return s[1];var t=l(n);return s[0]=r,s[1]=t}function b(){var n=i(["\n width: ","rem;\n "]);return b=function(){return n},n}function g(){var n=i(["\n ","\n "]);return g=function(){return n},n}function y(){var n=i(["\n margin-right: auto;\n margin-left: auto;\n padding-right: ",";\n padding-left: ",";\n\n ","\n"]);return y=function(){return n},n}var v=e.div(y(),function(n){return m(n).outerMargin+"rem"},function(n){return m(n).outerMargin+"rem"},function(n){return!n.fluid&&u.css(g(),p.map(function(e){return m(n).container[e]&&m(n).media[e](b(),function(n){return m(n).container[e]})}))});function O(){var n=i(["\n order: 1;\n "]);return O=function(){return n},n}function x(){var n=i(["\n order: -1;\n "]);return x=function(){return n},n}function h(){var n=i(["\n justify-content: space-between;\n "]);return h=function(){return n},n}function w(){var n=i(["\n justify-content: space-around;\n "]);return w=function(){return n},n}function j(){var n=i(["\n align-items: flex-end;\n "]);return j=function(){return n},n}function P(){var n=i(["\n align-items: center;\n "]);return P=function(){return n},n}function k(){var n=i(["\n align-items: flex-start;\n "]);return k=function(){return n},n}function S(){var n=i(["\n justify-content: flex-end;\n "]);return S=function(){return n},n}function z(){var n=i(["\n justify-content: center;\n "]);return z=function(){return n},n}function N(){var n=i(["\n justify-content: flex-start;\n "]);return N=function(){return n},n}function T(){var n=i(["\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n margin-right: ","rem;\n margin-left: ","rem;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n"]);return T=function(){return n},n}v.displayName="Grid",v.propTypes={fluid:r.bool,children:r.node};var W=r.oneOf(p),D=e.div(T(),function(n){return m(n).gutterWidth/2*-1},function(n){return m(n).gutterWidth/2*-1},function(n){return n.reverse&&"\n flex-direction: row-reverse;\n "},function(n){return n.start&&m(n).media[n.start](N())},function(n){return n.center&&m(n).media[n.center](z())},function(n){return n.end&&m(n).media[n.end](S())},function(n){return n.top&&m(n).media[n.top](k())},function(n){return n.middle&&m(n).media[n.middle](P())},function(n){return n.bottom&&m(n).media[n.bottom](j())},function(n){return n.around&&m(n).media[n.around](w())},function(n){return n.between&&m(n).media[n.between](h())},function(n){return n.first&&m(n).media[n.first](x())},function(n){return n.last&&m(n).media[n.last](O())});function M(){var n=i(["\n margin-left: ","%;\n "]);return M=function(){return n},n}function _(){var n=i(["",""]);return _=function(){return n},n}function q(){var n=i(["\n box-sizing: border-box;\n flex: 0 0 auto;\n padding-right: ","rem;\n padding-left: ","rem;\n\n ","\n\n ","\n\n ","\n"]);return q=function(){return n},n}D.displayName="Row",D.propTypes={reverse:r.bool,start:W,center:W,end:W,top:W,middle:W,bottom:W,around:W,between:W,first:W,last:W,children:r.node};var C=r.oneOfType([r.number,r.bool]),E=p.map(function(n){return n+"Offset"}),B=p.reduce(function(n,e){return n[e]=C,n[e+"Offset"]=r.number,n},{}),G=e.div(q(),function(n){return m(n).gutterWidth/2},function(n){return m(n).gutterWidth/2},function(n){return n.reverse&&"\n flex-direction: column-reverse;\n "},function(e){return Object.keys(e).filter(function(n){return~p.indexOf(n)}).sort(function(n,e){return p.indexOf(n)-p.indexOf(e)}).map(function(n){return m(e).media[n](_(),t(e[n])?"\n flex-basis: "+100/m(e).gridSize*e[n]+"%;\n max-width: "+100/m(e).gridSize*e[n]+"%;\n display: block;\n ":e[n]?"\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n display: block;\n ":"display: none;")})},function(e){return Object.keys(e).filter(function(n){return~E.indexOf(n)}).map(function(n){return m(e).media[n.replace(/Offset$/,"")](M(),100/m(e).gridSize*e[n])})});G.displayName="Col",G.propTypes=f({},B,{reverse:r.bool,children:r.node}),n.BASE_CONF=d,n.Col=G,n.Grid=v,n.Row=D,n.config=m,Object.defineProperty(n,"__esModule",{value:!0})});