https://cirrus-ui.netlify.app/_next/static/chunks/pages/utils/border-width-258426057f3494171919.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[100],{"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={}))},"6Fpc":function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/utils/border-width",function(){return a("sLRu")}])},AEIw:function(e,t,a){"use strict";a.d(t,"a",(function(){return s}));var n=a("q1tI"),r=a.n(n).a.createElement,s=function(e){return r("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 s})),a.d(t,"b",(function(){return o}));var n=a("q1tI"),r=a.n(n).a.createElement,s=function(e){return r("span",{className:"tag-container group-tags"},r("div",{className:"tag "+e.leftProps.classes},e.leftProps.text),r("div",{className:"tag "+e.rightProps.classes},e.rightProps.text))},o=function(e){var t;return r(s,{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"),r=a.n(n),s=a("00n6"),o=a("PX7u"),i=a("N2zt"),l=r.a.createElement,c=function(e){var t=[s.a.ACTIVE,s.a.CHECKED,s.a.DARK,s.a.DISABLED,s.a.FIRST_OF_TYPE,s.a.FOCUS,s.a.FOCUS_VISIBLE,s.a.FOCUS_WITHIN,s.a.GROUP_FOCUS,s.a.GROUP_HOVER,s.a.HOVER,s.a.LANDSCAPE,s.a.LAST_OF_TYPE,s.a.LIGHT,s.a.PORTRAIT,s.a.REDUCE_MOTION,s.a.RESPONSIVE,s.a.VISITED],a=new Set(e.defaultEnabledPseudos);return l(r.a.Fragment,null,l("h6",{className:"font-normal"},"Supported Pseudo-Variants"),l(i.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(o.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"),r=a("YFqc"),s=a.n(r),o=a("q1tI"),i=a.n(o).a.createElement,l=function(e){var t,a=e.children,r=Object(n.a)(e,["children"]);return i("a",{className:"u u-LR ".concat(null!==(t=r.classes)&&void 0!==t?t:""),target:"_blank",href:r.url,rel:"noopener noreferrer",style:{cursor:"pointer"}},a)},c=function(e){var t=e.children,a=Object(n.a)(e,["children"]);return i(s.a,{href:a.url},i("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 s}));var n=a("q1tI"),r=a.n(n).a.createElement,s=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)}))}()}})),r("nav",{className:"toc__nav"},r("span",{className:"uppercase text-gray-600 font-bold text-xs"},"Contents"),function e(t){return r("ul",null,t.map((function(t){return r("li",{key:t.name},r("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"),r=a.n(n),s=a("P5Jw"),o=a.n(s),i=a("IP2g"),l=a("uUdh"),c=a("c2c2"),u=r.a.createElement,d=function(e){var t,a,r=Object(n.useState)(!1),s=r[0],d=r[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(o.a,{text:e.code,onCopy:function(){d(!0),setTimeout((function(){return d(!1)}),3e3)}},u(i.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",s?"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 s}));var n=a("q1tI"),r=a.n(n).a.createElement,s=function(e){return r("table",{className:"class-table table fixed-head u-text-left"},r("thead",null,r("tr",null,r("th",{style:{width:"200px"}},"Class"),r("th",null,"Styles"))),r("tbody",null,e.classTable.map((function(e,t){return r("tr",{key:t},r("td",{style:{width:"200px"}}

1,r("code",{className:"text-blue-600 bg-blue-100"},e.class)),r("td",null,r("pre",null,r("code",{className:"text-purple-600 bg-transparent"},e.style))))}))))}},qnXf:function(e,t,a){"use strict";a.d(t,"a",(function(){return c}));var n=a("q1tI"),r=a.n(n),s=a("YFqc"),o=a.n(s),i=a("ZIZD"),l=r.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?i.a.get(e.lookupProps.sectionName).lowerEntry(e.lookupProps.pageName):null,a=e.lookupProps?i.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(o.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(o.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(o.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(o.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)))))))}},sLRu:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return P}));var n=a("q1tI"),r=a.n(n),s=a("8Kt/"),o=a.n(s),i=a("YFqc"),l=a.n(i),c=a("BFRS"),u=a("cjCq"),d=a("VlCm"),p=a("qnXf"),_=a("dtTl"),f=a("dw6e"),m=a("N2zt"),v=a("nLA4"),h=[{name:"Border Width",anchor:"#border-width",children:[{name:"Examples",anchor:"#examples",children:null},{name:"Responsive",anchor:"#responsive",children:null},{name:"Variants",anchor:"#variants",children:null}]}],b=a("C/iq"),g=a("AEIw"),E=a("ZIZD"),N=a("NgAj"),w=a("00n6"),x=r.a.createElement,P=Object(c.b)(x(v.a,null))((function(e){var t={0:"0px",1:"1px",2:"2px",4:"4px",8:"8px"},a=Object.entries(t).map((function(e){return{class:"u-border-".concat(e[0]),style:"border-width: ".concat(e[1]," !important")}}));return x("main",{className:"page-layout"},x(o.a,null,x("title",null,b.j," Border Width")),x("div",null,x("section",{className:"padtop",id:"border-width"},x("div",{className:"content"},x(d.a,{title:"Border Width",link:"#border-width"}),x("div",{className:"divider"}),x(m.a,{leftProps:{classes:"tag--dark",text:"New"},rightProps:{classes:"tag--info",text:"0.7.1"}}),x("p",null,"These are utility classes that specify the border width of elements."),x(f.a,{classTable:a}),x("div",{className:"space"}),x(N.a,{defaultEnabledPseudos:[w.a.FOCUS,w.a.HOVER]}))),x("section",{className:"padtop",id:"examples"},x("div",{className:"content"},x(d.a,{title:"Examples",link:"#examples",size:"4"}),x("div",{className:"divider"}),x("p",null,"Below is a demo of all utility classes that set a border width. The syntax follows the form of ",x("code",null,"u-border-[",Object.keys(t).join("|"),"]"),"."),x("div",{className:"space"}),x("div",{className:"bg-indigo-100 p-2 md:p-4 u-round-sm u-flex u-flex-column md:u-flex-row u-items-center u-justify-space-around u-gap-1"},Object.entries(t).map((function(e){return x("div",null,x("div",{className:'"w-8 h-8 u-center u-round-sm bg-transparent font-bold border-indigo-600 u-shadow-sm u-border-'.concat(e[0])}),x("b",null,"u-border-",e[0]))}))),x("div",{className:"space space--lg"}),x(_.a,{code:'<div class="u-border-0 ..."></div>\n<div class="u-border-1 ..."></div>\n<div class="u-border-2 ..."></div>\n<div class="u-border-4 ..."></div>\n<div class="u-border-8 ..."></div>',language:"htmlbars"}))),x("section",{className:"padtop",id:"responsive"},x("div",{className:"content"},x(d.a,{title:"Responsive",link:"#responsive",size:"4"}),x("div",{className:"divider"}),x(g.a,{accentColor:"#fcd9bd"},x("p",null,"\u26a0 Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in ",x("code",null,"_configs.scss")," and create a custom build or enable it in the config in your Sass project."),x("div",{className:"space"}),x(_.a,{code:"//_configs.scss\n$config: (\n    viewports: (\n        flags.$BORDER-WIDTH: true,\n    )\n) !default;",language:"scss"})),x("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 ",x("code",null,"u-border-2")," to be applied to some element for ",x("code",null,"lg")," and above, then I would use the"," ",x("code",null,"lg:u-border-2")," class."),x(_.a,{code:'

1<div class="lg:u-border-2">\n    \x3c!-- ... --\x3e\n</div>',language:"html"}),x("p",null,"For more information, visit the"," ",x(l.a,{href:"/fundamentals/viewports"},x("a",{className:"u u-LR"},"Viewports"))," ","documentation."))),x("section",{className:"padtop",id:"variants"},x("div",{className:"content"},x(d.a,{title:"Variants",link:"#variants",size:"4"}),x("div",{className:"divider"}),x("p",null,"The classes specified above are the default utility classes for setting the border-width property. You can add, change, or remove classes within the ",x("code",null,"_config.scss")," file of Cirrus."),x("div",{className:"space"}),x(_.a,{code:"// _config.scss\n$config: (\n    extend: (\n        border: (\n            width: (\n                '12': 12px,\n                '16': 16px\n            )\n        )\n    )\n) !default;",language:"scss"}),x("p",null,"This would generate the following classes."),x(_.a,{code:".u-border-12 {\n    border-width: 12px !important;\n}\n.u-border-16 {\n    border-width: 16px !important;\n}",language:"css"}),x("p",null,"Learn more about how to extend Cirrus to support your use cases in the"," ",x(l.a,{href:"/getting-started/configuration"},x("a",{className:"u u-LR"},"Configuration"))," ","documentation."))),x(p.a,{lookupProps:{sectionName:E.i,pageName:"Border Width"}})),x(u.a,{entries:h}))}))}},[["6Fpc",0,2,1,3,4,5,6]]]);