/home/henzagold/admin_report/js/ Current File: /home/henzagold/admin_report/js/chunk-201e640e.65ecf780.js
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-201e640e"],{"2c4c":function(s,t,l){"use strict";l.r(t);var a=function(){var s=this,t=s._self._c;return t("div",{attrs:{id:"tailwind-grid-demo"}},[t("grid-basic-grid"),t("grid-responsive-grids"),t("grid-mixed-column-sizes"),t("grid-wrapping-columns"),t("grid-column-spacing"),t("grid-auto-column-width"),t("grid-simple-offset")],1)},i=[],e=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Basic Grids","code-toggler":""}},[t("p",[s._v("Use the existing "),t("a",{attrs:{href:"https://tailwindcss.com/docs/flexbox-display",rel:"nofollow"}},[s._v("Flexbox")]),s._v(" and "),t("a",{attrs:{href:"https://tailwindcss.com/docs/width",rel:"nofollow"}},[s._v("percentage width")]),s._v(" utilities to construct basic grids")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-full bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-full")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-1/2 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/2")])]),t("div",{staticClass:"w-1/2 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/2")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-1/3 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/3")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-1/4 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/4")])]),t("div",{staticClass:"w-1/4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/4")])]),t("div",{staticClass:"w-1/4 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/4")])]),t("div",{staticClass:"w-1/4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/4")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-1/5 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/5")])]),t("div",{staticClass:"w-1/5 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/5")])]),t("div",{staticClass:"w-1/5 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/5")])]),t("div",{staticClass:"w-1/5 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/5")])]),t("div",{staticClass:"w-1/5 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/5")])])]),t("div",{staticClass:"flex"},[t("div",{staticClass:"w-1/6 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])]),t("div",{staticClass:"w-1/6 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])]),t("div",{staticClass:"w-1/6 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])]),t("div",{staticClass:"w-1/6 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])]),t("div",{staticClass:"w-1/6 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])]),t("div",{staticClass:"w-1/6 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("w-1/6")])])])]),t("template",{slot:"codeContainer"})],2)},o=[],c=l("2877"),d={},r=Object(c["a"])(d,e,o,!1,null,null,null),n=r.exports,f=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Responsive Grids","code-toggler":""}},[t("p",[s._v("Use the responsive variants of the width utilities to build responsive grid layouts")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex flex-wrap mb-base"},[t("vs-button",{staticClass:"mr-4 mb-4",attrs:{type:"border"},on:{click:function(t){s.colClass="w-full"}}},[s._v("All (w-full)")]),t("vs-button",{staticClass:"mr-4 mb-4",attrs:{type:"border"},on:{click:function(t){s.colClass="w-1/2"}}},[s._v("sm:w-1/2")]),t("vs-button",{staticClass:"mr-4 mb-4",attrs:{type:"border"},on:{click:function(t){s.colClass="w-1/3"}}},[s._v("md:w-1/3")]),t("vs-button",{staticClass:"mr-4 mb-4",attrs:{type:"border"},on:{click:function(t){s.colClass="w-1/4"}}},[s._v("lg:w-1/4")]),t("vs-button",{staticClass:"mr-4 mb-4",attrs:{type:"border"},on:{click:function(t){s.colClass="w-1/6"}}},[s._v("xl:w-1/6")])],1),t("div",{staticClass:"flex flex-wrap"},[t("div",{staticClass:"mb-4 h-12 bg-grid-color",class:s.colClass}),t("div",{staticClass:"mb-4 h-12 bg-grid-color-secondary",class:s.colClass}),t("div",{staticClass:"mb-4 h-12 bg-grid-color",class:s.colClass}),t("div",{staticClass:"mb-4 h-12 bg-grid-color-secondary",class:s.colClass}),t("div",{staticClass:"mb-4 h-12 bg-grid-color",class:s.colClass}),t("div",{staticClass:"mb-4 h-12 bg-grid-color-secondary",class:s.colClass})])]),t("template",{slot:"codeContainer"})],2)},v=[],x={data:function(){return{colClass:"w-full"}}},m=x,C=Object(c["a"])(m,f,v,!1,null,null,null),g=C.exports,u=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Mixed Column Sizes","code-toggler":""}},[t("p",[s._v("Mix different percentage width utilities to build mixed size grids")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"w-3/4 bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-3/4")])]),t("div",{staticClass:"w-1/4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/4")])])]),t("div",{staticClass:"flex"},[t("div",{staticClass:"w-1/5 bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/5")])]),t("div",{staticClass:"w-3/5 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-3/5")])]),t("div",{staticClass:"w-1/5 bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/5")])])])]),t("template",{slot:"codeContainer"})],2)},h=[],p={},b=Object(c["a"])(p,u,h,!1,null,null,null),w=b.exports,_=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Wrapping Columns","code-toggler":""}},[t("p",[s._v("Add "),t("code",[s._v("flex-wrap")]),s._v(" to your column container to allow columns to wrap when they run out of room")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex flex-wrap -mb-4"},[t("div",{staticClass:"w-1/3 mb-4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 mb-4 bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 mb-4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 mb-4 bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])]),t("div",{staticClass:"w-1/3 mb-4 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])])])]),t("template",{slot:"codeContainer"})],2)},y=[],O={},k=Object(c["a"])(O,_,y,!1,null,null,null),G=k.exports,j=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Column Spacing","code-toggler":""}},[t("p",[s._v("Add a negative horizontal margin like "),t("code",[s._v("-mx-2")]),s._v(" to your column container and an equal horizontal padding like "),t("code",[s._v("px-2")]),s._v(" to each column to add gutters")]),t("p",[s._v("To prevent horizontal scrolling in full width layouts, add "),t("code",[s._v("overflow-hidden")]),s._v(" to another parent container, or compensate for the negative margin with matching horizontal padding")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"px-2"},[t("div",{staticClass:"flex -mx-2"},[t("div",{staticClass:"w-1/3 px-2"},[t("div",{staticClass:"bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])])]),t("div",{staticClass:"w-1/3 px-2"},[t("div",{staticClass:"bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])])]),t("div",{staticClass:"w-1/3 px-2"},[t("div",{staticClass:"bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[s._v("w-1/3")])])])])])]),t("template",{slot:"codeContainer"})],2)},z=[],S={},U=Object(c["a"])(S,j,z,!1,null,null,null),A=U.exports,W=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Automatic Column Widths","code-toggler":""}},[t("p",[s._v("Use "),t("code",[s._v("flex-1")]),s._v(" instead of an explicit width on your columns to have them size automatically to fill the row")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])])]),t("div",{staticClass:"flex mb-4"},[t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])]),t("div",{staticClass:"flex-1 bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"sm:flex hidden m-auto"},[s._v("flex-1")])])])]),t("template",{slot:"codeContainer"})],2)},M=[],B={},J=Object(c["a"])(B,W,M,!1,null,null,null),R=J.exports,q=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Column Order","code-toggler":""}},[t("p",[s._v("Use "),t("code",[s._v("flex-row-reverse")]),s._v(" to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex md:flex-row-reverse flex-wrap"},[t("div",{staticClass:"w-full md:w-3/4 bg-grey p-4 text-center text-grey-lighter"},[s._v("1")]),t("div",{staticClass:"w-full md:w-1/4 bg-grey-light p-4 text-center text-grey-darker"},[s._v("2")])])]),t("template",{slot:"codeContainer"})],2)},F=[],T={},D=Object(c["a"])(T,q,F,!1,null,null,null),E=D.exports,H=function(){var s=this,t=s._self._c;return t("vx-card",{attrs:{title:"Simple Offsets","code-toggler":""}},[t("p",[s._v("Use auto margin utilities like "),t("code",[s._v("ml-auto")]),s._v(" and "),t("code",[s._v("mr-auto")]),s._v(" to offset columns in a row")]),t("div",{staticClass:"mt-5"},[t("div",{staticClass:"flex flex-wrap"},[t("div",{staticClass:"w-1/3 ml-auto bg-grid-color h-12 flex"},[t("span",{staticClass:"flex m-auto"},[t("span",{staticClass:"sm:inline hidden mr-2"},[s._v("w-1/3")]),t("span",[s._v("ml-auto")])])]),t("div",{staticClass:"w-1/3 mr-auto bg-grid-color-secondary h-12 flex"},[t("span",{staticClass:"flex m-auto"},[t("span",{staticClass:"sm:inline hidden mr-2"},[s._v("w-1/3")]),t("span",[s._v("mr-auto")])])])])]),t("template",{slot:"codeContainer"})],2)},I=[],K={},L=Object(c["a"])(K,H,I,!1,null,null,null),N=L.exports,P={components:{GridBasicGrid:n,GridResponsiveGrids:g,GridMixedColumnSizes:w,GridWrappingColumns:G,GridColumnSpacing:A,GridAutoColumnWidth:R,GridSimpleOffset:N,GridColumnOrder:E}},Q=P,V=(l("b68c"),Object(c["a"])(Q,a,i,!1,null,null,null));t["default"]=V.exports},3997:function(s,t,l){},b68c:function(s,t,l){"use strict";l("3997")}}]);
//# sourceMappingURL=chunk-201e640e.65ecf780.js.map