@wikimedia/codex/dist/sandbox/assets/layout-7rfGeosB.css

Codex Design System for Wikimedia

.cdx-container.cdx-demo-layout__container--ordered{min-height:4rem}[dir] .cdx-container.cdx-demo-layout__container--ordered{background-color:var(--background-color-neutral, #eaecf0);margin-bottom:16px;border:1px solid var(--border-color-base, #a2a9b1);border-radius:2px;padding:16px}.cdx-demo-layout__container__content{display:flex;align-items:flex-end;box-sizing:border-box;min-width:100%;min-height:inherit;font-size:var(--font-size-small, .875rem)}[dir] .cdx-demo-layout__container__content{background-color:var(--background-color-neutral-subtle, #f8f9fa);border:1px dashed var(--border-color-base, #a2a9b1);padding:4px 8px}.cdx-demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 16px;box-sizing:border-box;width:100%}[dir] .cdx-demo-grid{padding-right:16px;padding-left:16px;margin-bottom:32px}@media (min-width: 640px){.cdx-demo-grid{grid-template-columns:repeat(8,1fr);gap:24px 24px}[dir] .cdx-demo-grid{padding-right:24px;padding-left:24px}}@media (min-width: 1120px){.cdx-demo-grid{grid-template-columns:repeat(24,1fr);gap:24px 24px;max-width:99.75rem}[dir] .cdx-demo-grid{margin:0 auto;padding-right:32px;padding-left:32px}}@media (min-width: 1680px){[dir] .cdx-demo-grid{padding-right:calc((100% - 99.75rem)/2);padding-left:calc((100% - 99.75rem)/2)}}[dir] .cdx-demo-grid__item{background-color:var(--background-color-progressive-subtle, #e8eeff);border:1px solid var(--border-color-progressive, #6485d1);border-radius:2px;padding:16px;text-align:center}.cdx-demo-grid--basic .cdx-demo-grid__item{grid-column:span 4}@media (min-width: 640px){.cdx-demo-grid--basic .cdx-demo-grid__item{grid-column:span 4}}@media (min-width: 1120px){.cdx-demo-grid--basic .cdx-demo-grid__item{grid-column:span 6}}.cdx-demo-grid--spanning .cdx-demo-grid__item--half{grid-column:span 4}@media (min-width: 640px){.cdx-demo-grid--spanning .cdx-demo-grid__item--half{grid-column:span 8}}@media (min-width: 1120px){.cdx-demo-grid--spanning .cdx-demo-grid__item--half{grid-column:span 12}}.cdx-demo-grid--spanning .cdx-demo-grid__item--third{grid-column:span 4}@media (min-width: 640px){.cdx-demo-grid--spanning .cdx-demo-grid__item--third{grid-column:span 4}}@media (min-width: 1120px){.cdx-demo-grid--spanning .cdx-demo-grid__item--third{grid-column:span 8}}.cdx-demo-grid--spanning .cdx-demo-grid__item--quarter{grid-column:span 2}@media (min-width: 640px){.cdx-demo-grid--spanning .cdx-demo-grid__item--quarter{grid-column:span 2}}@media (min-width: 1120px){.cdx-demo-grid--spanning .cdx-demo-grid__item--quarter{grid-column:span 6}}.cdx-demo-grid--positioned{min-height:16rem}.cdx-demo-grid--positioned .cdx-demo-grid__item--header{color:var(--color-inverted, #fff);grid-column:1 / 5}[dir] .cdx-demo-grid--positioned .cdx-demo-grid__item--header{background-color:var(--background-color-progressive, #36c)}@media (min-width: 640px){.cdx-demo-grid--positioned .cdx-demo-grid__item--header{grid-column:1 / 9}}@media (min-width: 1120px){.cdx-demo-grid--positioned .cdx-demo-grid__item--header{grid-column:1 / 25}}.cdx-demo-grid--positioned .cdx-demo-grid__item--sidebar{align-self:stretch;grid-column:1 / 5}[dir] .cdx-demo-grid--positioned .cdx-demo-grid__item--sidebar{background-color:var(--background-color-neutral, #eaecf0)}@media (min-width: 640px){.cdx-demo-grid--positioned .cdx-demo-grid__item--sidebar{grid-column:1 / 3}}@media (min-width: 1120px){.cdx-demo-grid--positioned .cdx-demo-grid__item--sidebar{grid-column:1 / 7}}.cdx-demo-grid--positioned .cdx-demo-grid__item--main{align-self:stretch;grid-column:1 / 5}[dir] .cdx-demo-grid--positioned .cdx-demo-grid__item--main{background-color:var(--background-color-neutral-subtle, #f8f9fa)}@media (min-width: 640px){.cdx-demo-grid--positioned .cdx-demo-grid__item--main{grid-column:3 / 9}}@media (min-width: 1120px){.cdx-demo-grid--positioned .cdx-demo-grid__item--main{grid-column:7 / 25}}.cdx-demo-grid--positioned .cdx-demo-grid__item--footer{color:var(--color-base, #202122);grid-column:1 / 5}[dir] .cdx-demo-grid--positioned .cdx-demo-grid__item--footer{background-color:var(--background-color-destructive-subtle, #ffe9e5)}@media (min-width: 640px){.cdx-demo-grid--positioned .cdx-demo-grid__item--footer{grid-column:1 / 9}}@media (min-width: 1120px){.cdx-demo-grid--positioned .cdx-demo-grid__item--footer{grid-column:1 / 25}}