https://cirrus-ui.com/_next/static/chunks/pages/utils/vertical-align-5402a705d4ea8275780d.js

1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[113],{"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={}))},"0LxC":function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/utils/vertical-align",function(){return a("435o")}])},"435o":function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return w}));var n=a("q1tI"),r=a.n(n),l=a("8Kt/"),i=a.n(l),s=a("YFqc"),o=a.n(s),c=a("BFRS"),u=a("cjCq"),d=a("VlCm"),p=a("qnXf"),_=a("dtTl"),m=a("dw6e"),f=a("N2zt"),g=a("nLA4"),v=[{name:"Vertical Align",anchor:"#vertical-align",children:[{name:"Examples",anchor:"#examples",children:null},{name:"Responsive",anchor:"#responsive",children:null},{name:"Variants",anchor:"#variants",children:null}]}],h=a("C/iq"),b=a("AEIw"),E=a("ZIZD"),N=a("NgAj"),P=a("00n6"),x=r.a.createElement,w=Object(c.b)(x(g.a,null))((function(e){var t=["baseline","top","middle","bottom","text-top","text-bottom","sub","super"],a=t.map((function(e){return{class:"u-align-".concat(e),style:"vertical-align: ".concat(e," !important")}}));return x("main",{className:"page-layout"},x(i.a,null,x("title",null,h.j," Vertical Align")),x("div",null,x("section",{className:"padtop",id:"vertical-align"},x("div",{className:"content"},x(d.a,{title:"Vertical Align",link:"#vertical-align"}),x("div",{className:"divider"}),x(f.b,{version:"0.7.2"}),x("p",null,"These are utility classes to control vertical alignment of elements inside inline or table-box containers."),x(m.a,{classTable:a}),x("div",{className:"space"}),x(N.a,{defaultEnabledPseudos:[P.a.RESPONSIVE]}))),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 supported vertical alignment utility classes."),t.map((function(e){return x(r.a.Fragment,null,x("h6",{className:"capitalize"},e),x("p",null,"Set the ",x("code",null,"u-align-",e)," class to align the element with"," ",x("code",null,e)," vertical alignment."),x("div",{className:"bg-green-100 p-2 u-round-sm"},x("div",{className:"bg-green-200 p-2 u-round-sm"},x("div",{className:"bg-green-500 u-round-xs mr-1 w-4 h-4 u-inline-block u-align-".concat(e)}),x("div",{className:"bg-green-500 u-round-xs mr-1 w-4 h-8 u-inline-block u-align-".concat(e)}),x("div",{className:"bg-green-500 u-round-xs mr-1 w-8 h-4 u-inline-block u-align-".concat(e)}),x("span",{className:"mr-1"},"Some text"))))})))),x("section",{className:"padtop",id:"responsive"},x("div",{className:"content"},x(d.a,{title:"Responsive",link:"#responsive",size:"4"}),x("div",{className:"divider"}),x(b.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.$VERTICAL-ALIGN: 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-align-inherit")," to be applied to some element for ",x("code",null,"lg")," and above, then I would use the ",x("code",null,"lg:u-align-inherit")," class."),x(_.a,{code:'<div class="lg:u-align-inherit">\n    \x3c!-- ... --\x3e\n</div>',language:"html"}),x("p",null,"For more information, visit the"," ",x(o.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 vertical alignment. 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        vertical-align: (\n            inherit\n        )\n    )\n) !default;",language:"scss"}),x("p",null,"This would generate the following class."),x(_.a,{code:".u-align-inherit {\n    vertical-align: inherit !important;\n}",language:"css"}),x("p",null,"Learn more about how to extend Cirrus to support your use cases in the"," ",x(o.a,{href:"/getting-started/configuration"},x("a",{className:"u u-LR"},"Configuration"))," ","documentation."))),x(p.a,{lookupProps:{sectionName:E.i,pageName:"Vertical Align"}})),x(u.a,{entries:v}))}))},AEIw:function(e,t,a){"use strict";a.d(t,"a",(function(){return l}));var n=a("q1tI"),r=a.n(n).a.createElement,l=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 l})),a.d(t,"b",(function(){return i}));var n=a("q1tI"),r=a.n(n).a.createElement,l=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))},i=function(e){var t;return r(l,{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),l=a("00n6"),i=a("PX7u"),s=a("N2zt"),o=r.a.createElement,c=function(e){var t=[l.a.ACTIVE,l.a.CHECKED,l.a.DARK,l.a.DISABLED,l.a.FIRST_OF_TYPE,l.a.FOCUS,l.a.FOCUS_VISIBLE,l.a.FOCUS_WITHIN,l.a.GROUP_FOCUS,l.a.GROUP_HOVER,l.a.HOVER,l.a.LA

1NDSCAPE,l.a.LAST_OF_TYPE,l.a.LIGHT,l.a.PORTRAIT,l.a.REDUCE_MOTION,l.a.RESPONSIVE,l.a.VISITED],a=new Set(e.defaultEnabledPseudos);return o(r.a.Fragment,null,o("h6",{className:"font-normal"},"Supported Pseudo-Variants"),o(s.b,{version:"0.8.0"}),o("div",{className:"u-flex u-gap-1 u-flex-wrap"},t.map((function(t){return o("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)}))),o("div",{className:"space"}),o("p",null,"See more ",o(i.b,{url:"/fundamentals/pseudo-variants"},"pseudo-variants"),"."))}},PX7u:function(e,t,a){"use strict";a.d(t,"a",(function(){return o})),a.d(t,"b",(function(){return c}));var n=a("Ff2n"),r=a("YFqc"),l=a.n(r),i=a("q1tI"),s=a.n(i).a.createElement,o=function(e){var t,a=e.children,r=Object(n.a)(e,["children"]);return s("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 s(l.a,{href:a.url},s("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 l}));var n=a("q1tI"),r=a.n(n).a.createElement,l=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),l=a("P5Jw"),i=a.n(l),s=a("IP2g"),o=a("uUdh"),c=a("c2c2"),u=r.a.createElement,d=function(e){var t,a,r=Object(n.useState)(!1),l=r[0],d=r[1];return u("div",{className:"codeblock-wrapper u-relative mb-2"},u(o.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(i.a,{text:e.code,onCopy:function(){d(!0),setTimeout((function(){return d(!1)}),3e3)}},u(s.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",l?"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 l}));var n=a("q1tI"),r=a.n(n).a.createElement,l=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),l=a("YFqc"),i=a.n(l),s=a("ZIZD"),o=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?s.a.get(e.lookupProps.sectionName).lowerEntry(e.lookupProps.pageName):null,a=e.lookupProps?s.a.get(e.lookupProps.sectionName).higherEntry(e.lookupProps.pageName):null;return o("section",{className:"padtop"},o("div",{className:"content"},o("div",{className:"divider"}),o("div",{className:"pagination no-bullets"},t&&o("div",{className:"pagination-item pagination-prev"},o(i.a,{href:t[1].url},o("a",{className:"u-block"},o("p",{className:"pagination-item-subtitle"},"Prev"),o("h5",{className:"font-alt font-light m-0"},t[1].text)))),a&&o("div",{className:"pagination-item pagination-next"},o(i.a,{href:a[1].url},o("a",{className:"u-block"},o("p",{className:"pagination-item-subtitle"},"Next"),o("h5",{className:"font-alt font-light m-0"},a[1].text)))),e.prevLink&&o("div",{className:"pagination-item pagination-prev"},o(i.a,{href:e.prevLink.link},o("a",{className:"u-block"},o("p",{className:"pagination-item-subtitle"},"Prev"),o("h5",{className:"font-alt font-light m-0"},e.prevLink.name)))),e.nextLink&&o("div",{className:"pagination-item pagination-next"},o(i.a,{href:e.nextLink.link},o("a",{className:"u-block"},o("p",{className:"pagination-item-subtitle"},"Next"),o("h5",{className:"font-alt font-light m-0"},e.nextLink.name)))))))}}},[["0LxC",0,2,1,3,4,5,6]]]);