@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 2.27 kB
CSS
.cdx-image-wrapper{display:flex;align-items:center;position:relative}.cdx-image-wrapper--left{justify-content:flex-start}.cdx-image-wrapper--center{justify-content:center}.cdx-image-wrapper--right{justify-content:flex-end}.cdx-image-wrapper__error,.cdx-image-wrapper__loading,.cdx-image-wrapper__placeholder{display:flex;align-items:center;justify-content:center;width:100%}[dir] .cdx-image-wrapper__error{background-color:var(--background-color-error-subtle, #ffe9e5)}.cdx-image-wrapper__error .cdx-image__icon svg{fill:var(--color-error, #bf3c2c)}.cdx-image-wrapper__loading{position:absolute}[dir] .cdx-image-wrapper__loading{background-color:var(--background-color-progressive-subtle, #f1f4fd)}.cdx-image-wrapper__loading .cdx-image__icon svg{fill:var(--color-progressive, #36c)}[dir] .cdx-image-wrapper__placeholder{background-color:var(--background-color-interactive-subtle, #f8f9fa)}.cdx-image-wrapper__placeholder .cdx-image__icon svg{fill:var(--color-placeholder, #72777d)}.cdx-image__icon--size-smallest{width:.75rem;height:.75rem}.cdx-image__icon--size-small{width:1.25rem;height:1.25rem}.cdx-image__icon--size-medium{width:2rem;height:2rem}.cdx-image__icon--size-large{width:2.5rem;height:2.5rem}.cdx-image{display:inline-block;flex-grow:0;position:relative;min-width:24px;min-height:24px}[dir] .cdx-image{margin:0}.cdx-image--16-9{aspect-ratio:16 / 9}.cdx-image--3-2{aspect-ratio:3 / 2}.cdx-image--4-3{aspect-ratio:4 / 3}.cdx-image--1-1{aspect-ratio:1 / 1}.cdx-image--3-4{aspect-ratio:3 / 4}.cdx-image--2-3{aspect-ratio:2 / 3}.cdx-image--object-fit-fill{object-fit:fill}.cdx-image--object-fit-contain{object-fit:contain}.cdx-image--object-fit-cover{object-fit:cover}.cdx-image--object-fit-none{object-fit:none}.cdx-image--object-fit-scale-down{object-fit:scale-down}.cdx-image--object-position-top{object-position:top}.cdx-image--object-position-bottom{object-position:bottom}[dir=ltr] .cdx-image--object-position-left{object-position:left}[dir=rtl] .cdx-image--object-position-left,[dir=ltr] .cdx-image--object-position-right{object-position:right}[dir=rtl] .cdx-image--object-position-right{object-position:left}.cdx-image--object-position-center{object-position:center}[dir] .cdx-image--is-broken{border:1px solid var(--border-color-error, #f54739)}