@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 14 kB
CSS
.cdx-info-chip{background-color:var(--background-color-notice-subtle, #eaecf0);display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;max-width:100%;border:1px solid var(--border-color-notice, #72777d);border-radius:9999px;padding:0 6px;line-height:var(--line-height-small, 1.375rem)}.cdx-info-chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-base, #202122);font-size:var(--font-size-small, .875rem)}.cdx-info-chip .cdx-info-chip__icon{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip .cdx-info-chip__icon{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip .cdx-info-chip__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip .cdx-info-chip__icon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip .cdx-info-chip__icon{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');background-color:var(--color-icon-notice, #72777d)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip .cdx-info-chip__icon:lang(ar){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip .cdx-info-chip__icon:lang(ar){-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');background-color:var(--color-icon-notice, #72777d)}}.cdx-info-chip .cdx-info-chip__icon--vue{color:var(--color-icon-notice, #72777d)}.cdx-info-chip--subtle{background-color:var(--background-color-transparent, transparent);border-color:var(--border-color-base, #a2a9b1)}.cdx-info-chip--progressive{background-color:var(--background-color-progressive-subtle, #e8eeff);border-color:var(--border-color-progressive, #36c)}.cdx-info-chip--progressive .cdx-info-chip__icon{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--progressive .cdx-info-chip__icon{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--progressive .cdx-info-chip__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--progressive .cdx-info-chip__icon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--progressive .cdx-info-chip__icon{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8 9v2h1v2H8v2h4v-2h-1V9zm1-4v2h2V5z"/></svg>');background-color:var(--color-icon-progressive, #36c)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--progressive .cdx-info-chip__icon:lang(ar){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--progressive .cdx-info-chip__icon:lang(ar){-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13 20H7v-2h6zM10 0c1.938 0 3.58.556 4.745 1.644C15.918 2.738 16.5 4.27 16.5 6c0 2.22-1.15 3.732-2.04 4.727-.644.72-.96 1.633-.96 2.662V16h-7v-2.611c0-1.029-.317-1.942-.96-2.662C4.65 9.732 3.5 8.22 3.5 6c0-1.627.593-3.145 1.743-4.255C6.395.634 8.032 0 10 0"/></svg>');background-color:var(--color-icon-progressive, #36c)}}.cdx-info-chip--progressive .cdx-info-chip__icon--vue{color:var(--color-icon-progressive, #36c)}.cdx-info-chip--error{background-color:var(--background-color-error-subtle, #ffe9e5);border-color:var(--border-color-error, #f54739)}.cdx-info-chip--error .cdx-info-chip__icon{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--error .cdx-info-chip__icon{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--error .cdx-info-chip__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--error .cdx-info-chip__icon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19 6.4v7.199L13.6 19H6.4L1 13.599v-7.2L6.4 1h7.2zM9 14v2h2v-2zm0-9v7h2V5z"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--error .cdx-info-chip__icon{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19 6.4v7.199L13.6 19H6.4L1 13.599v-7.2L6.4 1h7.2zM9 14v2h2v-2zm0-9v7h2V5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19 6.4v7.199L13.6 19H6.4L1 13.599v-7.2L6.4 1h7.2zM9 14v2h2v-2zm0-9v7h2V5z"/></svg>');background-color:var(--color-icon-error, #f54739)}}.cdx-info-chip--error .cdx-info-chip__icon--vue{color:var(--color-icon-error, #f54739)}.cdx-info-chip--warning{background-color:var(--background-color-warning-subtle, #fdf2d5);border-color:var(--border-color-warning, #ab7f2a)}.cdx-info-chip--warning .cdx-info-chip__icon{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--warning .cdx-info-chip__icon{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--warning .cdx-info-chip__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--warning .cdx-info-chip__icon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19.765 16.059 18 19H2L.235 16.059l8-15h3.53zM9 14v2h2v-2zm0-8v6h2V6z"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--warning .cdx-info-chip__icon{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19.765 16.059 18 19H2L.235 16.059l8-15h3.53zM9 14v2h2v-2zm0-8v6h2V6z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M19.765 16.059 18 19H2L.235 16.059l8-15h3.53zM9 14v2h2v-2zm0-8v6h2V6z"/></svg>');background-color:var(--color-icon-warning, #ab7f2a)}}.cdx-info-chip--warning .cdx-info-chip__icon--vue{color:var(--color-icon-warning, #ab7f2a)}.cdx-info-chip--success{background-color:var(--background-color-success-subtle, #dff2eb);border-color:var(--border-color-success, #099979)}.cdx-info-chip--success .cdx-info-chip__icon{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--success .cdx-info-chip__icon{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--success .cdx-info-chip__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-info-chip--success .cdx-info-chip__icon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8.823 11.118 6.8 9.6l-1.2 1.6 2.8 2.1 1.381-.175 4.624-5.781-1.561-1.25z"/></svg>');filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-info-chip--success .cdx-info-chip__icon{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8.823 11.118 6.8 9.6l-1.2 1.6 2.8 2.1 1.381-.175 4.624-5.781-1.561-1.25z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 1a9 9 0 110 18 9 9 0 010-18M8.823 11.118 6.8 9.6l-1.2 1.6 2.8 2.1 1.381-.175 4.624-5.781-1.561-1.25z"/></svg>');background-color:var(--color-icon-success, #099979)}}.cdx-info-chip--success .cdx-info-chip__icon--vue{color:var(--color-icon-success, #099979)}.cdx-info-chip .cdx-icon{min-width:14px;min-height:14px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem)}