@wikimedia/codex/dist/sandbox/assets/layout-Dv3ZU1xW.js

Codex Design System for Wikimedia

import{d as l,f as r,o as s,w as o,e as d,j as t,q as i,aP as m,aQ as a}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CZ7OyK4g.js";import{C as n}from"./Container-BqPxOuSx.js";/* empty css                                                  */const u={id:"layout",class:"cdx-demo-layout__container"},_={class:"cdx-demo-grid cdx-demo-grid--positioned"},x=l({__name:"LayoutDemoPage",setup(g){return(c,e)=>(s(),r(m,{class:"cdx-demo-layout"},{header:o(()=>e[0]||(e[0]=[i(" Codex Layout ")])),content:o(()=>[d("section",u,[e[9]||(e[9]=d("h2",null,"Layouts",-1)),e[10]||(e[10]=d("h3",{id:"container-ordered"},"Container",-1)),e[11]||(e[11]=d("p",null," This demo uses the Container layout component to list containers from medium to full size top to bottom. ",-1)),t(n,{class:"cdx-demo-layout__container--ordered",size:"medium"},{default:o(()=>e[1]||(e[1]=[d("div",{class:"cdx-demo-layout__container__content"},[i(" Medium ("),d("code",null,"medium"),i(") container. ")],-1)])),_:1,__:[1]}),t(n,{class:"cdx-demo-layout__container--ordered",size:"large"},{default:o(()=>e[2]||(e[2]=[d("div",{class:"cdx-demo-layout__container__content"},[i(" Large ("),d("code",null,"large"),i(") container. ")],-1)])),_:1,__:[2]}),t(n,{class:"cdx-demo-layout__container--ordered",size:"x-large"},{default:o(()=>e[3]||(e[3]=[d("div",{class:"cdx-demo-layout__container__content"},[i(" Extra large ("),d("code",null,"x-large"),i(") container. ")],-1)])),_:1,__:[3]}),t(n,{class:"cdx-demo-layout__container--ordered",size:"full"},{default:o(()=>e[4]||(e[4]=[d("div",{class:"cdx-demo-layout__container__content"},[i(" Full ("),d("code",null,"full"),i(") no "),d("code",null,"max-width"),i(" container. ")],-1)])),_:1,__:[4]}),e[12]||(e[12]=d("h3",{id:"grid"},"CSS Grid Layout",-1)),e[13]||(e[13]=d("p",null,[i(" Examples of the CSS Grid layout system using the "),d("code",null,"cdx-mixin-grid-container"),i(", "),d("code",null,"cdx-mixin-grid-item"),i(", and "),d("code",null,"cdx-mixin-grid-position"),i(" mixins. ")],-1)),e[14]||(e[14]=d("h4",null,"Basic Grid",-1)),e[15]||(e[15]=d("p",null," A basic responsive grid layout with equal-width columns that adjusts based on screen size. Resize your browser to see the responsive behavior. ",-1)),e[16]||(e[16]=d("div",{class:"cdx-demo-grid cdx-demo-grid--basic"},[d("div",{class:"cdx-demo-grid__item"},"1"),d("div",{class:"cdx-demo-grid__item"},"2"),d("div",{class:"cdx-demo-grid__item"},"3"),d("div",{class:"cdx-demo-grid__item"},"4"),d("div",{class:"cdx-demo-grid__item"},"5"),d("div",{class:"cdx-demo-grid__item"},"6"),d("div",{class:"cdx-demo-grid__item"},"7"),d("div",{class:"cdx-demo-grid__item"},"8")],-1)),e[17]||(e[17]=d("h4",null,"Column Spanning",-1)),e[18]||(e[18]=d("p",null,[i(" Items that span different number of columns across breakpoints using "),d("code",null,"cdx-mixin-grid-item"),i(". ")],-1)),e[19]||(e[19]=d("div",{class:"cdx-demo-grid cdx-demo-grid--spanning"},[d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--half"}," Spans half on desktop, full on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--half"}," Spans half on desktop, full on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--third"}," Third on desktop, half on tablet, full on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--third"}," Third on desktop, half on tablet, full on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--third"}," Third on desktop, full on tablet and mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--quarter"}," Quarter on desktop, quarter on tablet, half on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--quarter"}," Quarter on desktop, quarter on tablet, half on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--quarter"}," Quarter on desktop, quarter on tablet, half on mobile "),d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--quarter"}," Quarter on desktop, quarter on tablet, half on mobile ")],-1)),e[20]||(e[20]=d("h4",null,"Precise Positioning",-1)),e[21]||(e[21]=d("p",null,[i(" Items positioned at specific Grid coordinates using "),d("code",null,"cdx-mixin-grid-position"),i(". ")],-1)),d("div",_,[t(n,{class:"cdx-demo-grid__item cdx-demo-grid__item--header",size:"x-large"},{default:o(()=>e[5]||(e[5]=[i(" Header (full width) in Container component. ")])),_:1,__:[5]}),e[6]||(e[6]=d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--sidebar"}," Sidebar (left on desktop, top on mobile) ",-1)),e[7]||(e[7]=d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--main"}," Main Content (right on desktop, bottom on mobile) ",-1)),e[8]||(e[8]=d("div",{class:"cdx-demo-grid__item cdx-demo-grid__item--footer"}," Footer (full width) ",-1))])])]),_:1}))}});a(x).mount("#app");