https://cirrus-ui.netlify.app/_next/static/chunks/pages/layout/min-width-e8838df6d8ac39f2008f.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[92],{"00n6":function(e,t,a){"use strict";var n;a.d(t,"a",(function(){return n})),function(e){e.ACTIVE="active",e.CHECKED="checked",e.DARK="dark",e.DISABLED="disabled",e.FIRST_OF_TYPE="first-of-type",e.FOCUS="focus",e.FOCUS_VISIBLE="focus-visible",e.FOCUS_WITHIN="focus-within",e.GROUP_FOCUS="group-focus",e.GROUP_HOVER="group-hover",e.HOVER="hover",e.LANDSCAPE="landscape",e.LAST_OF_TYPE="last-of-type",e.LIGHT="light",e.PORTRAIT="portrait",e.REDUCE_MOTION="reduce-motion",e.RESPONSIVE="responsive",e.VISITED="visited"}(n||(n={}))},AEIw:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));var n=a("q1tI"),s=a.n(n).a.createElement,i=function(e){return s("blockquote",{style:{borderColor:e.accentColor,background:"".concat(e.accentColor,"CC")}},e.children)}},N2zt:function(e,t,a){"use strict";a.d(t,"a",(function(){return i})),a.d(t,"b",(function(){return r}));var n=a("q1tI"),s=a.n(n).a.createElement,i=function(e){return s("span",{className:"tag-container group-tags"},s("div",{className:"tag "+e.leftProps.classes},e.leftProps.text),s("div",{className:"tag "+e.rightProps.classes},e.rightProps.text))},r=function(e){var t;return s(i,{leftProps:{classes:"tag--dark",text:null!==(t=e.text)&&void 0!==t?t:"New"},rightProps:{classes:"tag--info",text:e.version}})}},NgAj:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("q1tI"),s=a.n(n),i=a("00n6"),r=a("PX7u"),o=a("N2zt"),l=s.a.createElement,c=function(e){var t=[i.a.ACTIVE,i.a.CHECKED,i.a.DARK,i.a.DISABLED,i.a.FIRST_OF_TYPE,i.a.FOCUS,i.a.FOCUS_VISIBLE,i.a.FOCUS_WITHIN,i.a.GROUP_FOCUS,i.a.GROUP_HOVER,i.a.HOVER,i.a.LANDSCAPE,i.a.LAST_OF_TYPE,i.a.LIGHT,i.a.PORTRAIT,i.a.REDUCE_MOTION,i.a.RESPONSIVE,i.a.VISITED],a=new Set(e.defaultEnabledPseudos);return l(s.a.Fragment,null,l("h6",{className:"font-normal"},"Supported Pseudo-Variants"),l(o.b,{version:"0.8.0"}),l("div",{className:"u-flex u-gap-1 u-flex-wrap"},t.map((function(t){return l("div",{className:"tag text-md u-border-1 u-unselectable ".concat(e.defaultEnabledPseudos&&a.has(t)?"border-gray-800 text-gray-100 bg-gray-800 u-shadow-sm":"border-gray-300 text-gray-500 bg-transparent"),key:t},t)}))),l("div",{className:"space"}),l("p",null,"See more ",l(r.b,{url:"/fundamentals/pseudo-variants"},"pseudo-variants"),"."))}},PX7u:function(e,t,a){"use strict";a.d(t,"a",(function(){return l})),a.d(t,"b",(function(){return c}));var n=a("Ff2n"),s=a("YFqc"),i=a.n(s),r=a("q1tI"),o=a.n(r).a.createElement,l=function(e){var t,a=e.children,s=Object(n.a)(e,["children"]);return o("a",{className:"u u-LR ".concat(null!==(t=s.classes)&&void 0!==t?t:""),target:"_blank",href:s.url,rel:"noopener noreferrer",style:{cursor:"pointer"}},a)},c=function(e){var t=e.children,a=Object(n.a)(e,["children"]);return o(i.a,{href:a.url},o("a",{className:"u u-LR",href:a.url,style:{cursor:"pointer"}},t))}},VlCm:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Headline}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("q1tI"),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("P5Jw"),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__),__jsx=react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement,Headline=function Headline(props){var _props$size,HeaderTag="h".concat(null!==(_props$size=props.size)&&void 0!==_props$size?_props$size:"1"),_useState=Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),currentUrl=_useState[0],setCurrentUrl=_useState[1];function getUrlWithoutAnchor(){return currentUrl.replace(/#.*$/,"")}return Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setCurrentUrl(eval("window.location.href;"))}),[]),__jsx(HeaderTag,null,__jsx(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default.a,{text:getUrlWithoutAnchor()+props.link},__jsx("a",{className:"tooltip tooltip--left mr-1","data-tooltip":"Copy",style:{cursor:"pointer"}},"#")),props.title)}},cjCq:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));var n=a("q1tI"),s=a.n(n).a.createElement,i=function(e){return Object(n.useEffect)((function(){if(document.querySelector(".toc__nav")){!function(e){var t=new IntersectionObserver((function(e){e.forEach((function(e){var t=e.target.getAttribute("id");document.querySelector('.toc__nav li a[href="#'.concat(t,'"]'))&&(e.intersectionRatio>0?document.querySelector('.toc__nav li a[href="#'.concat(t,'"]')).parentElement.classList.add("active"):document.querySelector('.toc__nav li a[href="#'.concat(t,'"]')).parentElement.classList.remove("active"))}))}));document.querySelectorAll("section[id]").forEach((function(e){t.observe(e)}))}()}})),s("nav",{className:"toc__nav"},s("span",{className:"uppercase text-gray-600 font-bold text-xs"},"Contents"),function e(t){return s("ul",null,t.map((function(t){return s("li",{key:t.name},s("a",{href:t.anchor},t.name),t.children&&e(t.children))})))}(e.entries))}},dtTl:function(e,t,a){"use strict";a.d(t,"a",(function(){return d}));var n=a("q1tI"),s=a.n(n),i=a("P5Jw"),r=a.n(i),o=a("IP2g"),l=a("uUdh"),c=a("c2c2"),u=s.a.createElement,d=function(e){var t,a,s=Object(n.useState)(!1),i=s[0],d=s[1];return u("div",{className:"codeblock-wrapper u-relative mb-2"},u(l.a,{className:"codeblock pl-2 pr-3 py-1 u-shadow-lg h-100p ".concat(null!==(t=e.classes)&&void 0!==t?t:""," ").concat(e.breakAll?"break-all":""),language:"htmlbars"===e.language?"html":e.language,style:null!==(a=e.style)&&void 0!==a?a:c.duotoneDark},e.code),u(r.a,{text:e.code,onCopy:function(){d(!0),setTimeout((function(){return d(!1)}),3e3)}},u(o.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",i?"clipboard-check":"clipboard"],style:{cursor:"pointer",right:"1.5rem",top:"1.2rem"}})))}},dw6e:function(e,t,a){"use strict";a.d(t,"a",(function(){return i}));var n=a("q1tI"),s=a.n(n).a.createElement,i=function(e){return s("table",{className:"class-table table fixed-head u-text-left"},s("thead",null,s("tr",null,s("th",{style:{width:"200px"}},"Class"),s("th",null,"Styles"))),s("tbody",null,e.classTable.map((function(e,t){return s("tr",{key:t},s("td",{style:{width:"200px"}},s("code",{className:"text-blue-600 bg-blue-100"},e.class)),s("td",null,s("pre",null,s("code",{className:"text-purple-600 bg-transparent"},e.style))))}))))}},pDPF:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/layout/min-width",function(){return a("xeKA")}])},qnXf:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("q1tI"),s=a.n(n),i=a("YFqc"),r=a.n(i),o=a("ZIZD"),l=s.a.createElement,c=function(e){if(!(e.nextLink||e.prevLink)===!e.lookupProps)throw Error("Either provide prev/next link or sidebar config map");var t=e.lookupProps?o.a.get(e.lookupProps.sectionName).lowerEntry(e.lookupProps.pageName):null,a=e.lookupProps?o.a.get(e.lookupProps.sectionName).higherEntry(e.lookupProps.pageName):null;return l("section",{className:"padtop"},l("div",{className:"content"},l("div",{className:"divider"}),l("div",{className:"pagination no-bullets"},t&&l("div",{className:"pagination-item pagination-prev"},l(r.a,{href:t[1].url},l("a",{className:"u-block"},l("p",{className:"pagination-item-subtitle"},"Prev"),l("h5",{className:"font-alt font-light m-0"},t[1].text)))),a&&l("div",{className:"pagination-item pagination-next"},l(r.a,{href:a[1].url},l("a",{className:"u-block"},l("p",{className:"pagination-item-subtitle"},"Next"),l("h5",{className:"font-alt font-light m-0"},a[1].text)))),e.prevLink&&l("div",{className:"pagination-item pagination-prev"},l(r.a,{href:e.prevLink.link},l("a",{className:"u-block"},l("p",{className:"pagination-item-subtitle"},"Prev"),l("h5",{className:"font-alt font-light m-0"},e.prevLink.name)))),e.nextLink&&l("div",{className:"pagination-item pagination-next"},l(r.a,{href:e.nextLink.link},l("a",{className:"u-block"},l("p",{className:"pagination-item-subtitle"},"Next"),l("h5",{className:"font-alt font-light m-0"},e.nextLink.name)))))))}},xeKA:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return x}));var n=a("q1tI"),s=a.n(n),i=a("8Kt/"),r=a.n(i),o=a("YFqc"),l=a.n(o),c=a("BFRS"),u=a("cjCq"),d=a("VlCm"),p=a("qnXf"),m=a("dtTl"),_=a("dw6e"),f=a("AEIw"),h=a("nLA4"),v=[{name:"Min Wi

1dth",anchor:"#min-width",children:[{name:"Examples",anchor:"#examples",children:null},{name:"Responsive",anchor:"#responsive",children:null},{name:"Variants",anchor:"#variants",children:null}]}],g=a("C/iq"),b=a("ZIZD"),E=a("NgAj"),N=a("00n6"),w=s.a.createElement,x=Object(c.b)(w(h.a,null))((function(e){var t=Object.entries({0:"0",xs:"640px",sm:"768px",md:"1024px",lg:"1280px",xl:"1536px","10p":"10%","20p":"20%","30p":"30%","40p":"40%","50p":"50%","60p":"60%","70p":"70%","80p":"80%","90p":"90%","100p":"100%",screen:"100vw"}).map((function(e){return{class:"min-w-".concat(e[0]),style:"min-width: ".concat(e[1],";")}}));return w("main",{className:"page-layout"},w(r.a,null,w("title",null,g.j," Min Width")),w("div",null,w("section",{className:"padtop",id:"min-width"},w("div",{className:"content"},w(d.a,{title:"Min Width",link:"#min-width"}),w("div",{className:"divider"}),w("p",null,"Classes to set the minimum width of an element."),w(_.a,{classTable:t}),w("div",{className:"space"}),w(E.a,{defaultEnabledPseudos:[N.a.RESPONSIVE]}))),w("section",{className:"padtop",id:"examples"},w("div",{className:"content"},w(d.a,{title:"Examples",link:"#examples",size:"4"}),w("div",{className:"divider"}),w("p",null,"Using these classes it quite simple to control the minimum width an element should have. You can either use a percentage based class or use a class to span the whole screen using the"," ",w("code",null,"min-w-[size]")," syntax."),w("div",{className:"p-4 bg-indigo-100 u-round-xs text-white font-bold u-text-center u-flex"},w("div",{className:"min-w-50p p-2 bg-indigo-500 u-round-xs"},"min-w-50p")),w("div",{className:"space"}),w(m.a,{code:'<div class="p-4 bg-indigo-100 u-round-xs text-white font-bold u-text-center u-flex" style="">\n    <div class="min-w-50p p-2 bg-indigo-500 u-round-xs">min-w-50p</div>\n</div>',language:"htmlbars"}))),w("section",{className:"padtop",id:"responsive"},w("div",{className:"content"},w(d.a,{title:"Responsive",link:"#responsive",size:"4"}),w("div",{className:"divider"}),w(f.a,{accentColor:"#fcd9bd"},w("p",null,"\u26a0 Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in ",w("code",null,"_configs.scss")," and create a custom build or enable it in the config in your Sass project."),w("div",{className:"space"}),w(m.a,{code:"//_configs.scss\n$config: (\n    viewports: (\n        flags.$MIN-WIDTH: true,\n    )\n) !default;",language:"scss"})),w("p",null,"To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want ",w("code",null,"min-w-0")," to be applied to some element for ",w("code",null,"lg")," and above, then I would use the ",w("code",null,"lg:min-w-0")," class."),w(m.a,{code:'<div class="lg:min-w-0">\n    \x3c!-- ... --\x3e\n</div>',language:"html"}),w("p",null,"For more information, visit the"," ",w(l.a,{href:"/fundamentals/viewports"},w("a",{className:"u u-LR"},"Viewports"))," ","documentation."))),w("section",{className:"padtop",id:"variants"},w("div",{className:"content"},w(d.a,{title:"Variants",link:"#variants",size:"4"}),w("div",{className:"divider"}),w("p",null,"The classes specified above are the default utility classes for setting minimum widths. You can add, change, or remove classes within the ",w("code",null,"_config.scss")," file of Cirrus."),w("div",{className:"space"}),w(m.a,{code:"// _config.scss\n$config: (\n    extend: (\n        min-widths: (\n            'min': 'min-content',\n            'max': 'max-content',\n        )\n    )\n) !default;",language:"scss"}),w("p",null,"This would generate the following additonal classes."),w(m.a,{code:".min-w-min {\n    min-width: min-content !important;\n}\n.min-w-max {\n    min-width: max-content !important;\n}",language:"css"}),w("p",null,"Learn more about how to extend Cirrus to support your use cases in the"," ",w(l.a,{href:"/getting-started/configuration"},w("a",{className:"u u-LR"},"Configuration"))," ","documentation."))),w(p.a,{lookupProps:{sectionName:b.h,pageName:"Min Width"}})),w(u.a,{entries:v}))}))}},[["pDPF",0,2,1,3,4,5,6]]]);