@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 15.7 kB
CSS
.cdx-message{background-color:var(--background-color-notice-subtle, #eaecf0);color:var(--color-base, #202122);display:flex;align-items:flex-start;position:relative;border:1px solid var(--border-color-notice, #72777d);border-radius:2px;padding:12px}.cdx-message__icon,.cdx-message__icon--vue{flex-shrink:0}.cdx-message .cdx-message__icon{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message .cdx-message__icon{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-message .cdx-message__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message .cdx-message__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-message .cdx-message__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-message .cdx-message__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-message .cdx-message__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-message .cdx-message__icon--vue{color:var(--color-icon-notice, #72777d)}.cdx-message--subtle{background-color:var(--background-color-transparent, transparent);border-color:var(--border-color-base, #a2a9b1)}.cdx-message--progressive{background-color:var(--background-color-progressive-subtle, #e8eeff);border-color:var(--border-color-progressive, #36c)}.cdx-message--progressive .cdx-message__icon{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--progressive .cdx-message__icon{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-message--progressive .cdx-message__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--progressive .cdx-message__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-message--progressive .cdx-message__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-message--progressive .cdx-message__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-message--progressive .cdx-message__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-message--progressive .cdx-message__icon--vue{color:var(--color-icon-progressive, #36c)}.cdx-message--warning{background-color:var(--background-color-warning-subtle, #fdf2d5);border-color:var(--border-color-warning, #ab7f2a)}.cdx-message--warning .cdx-message__icon{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--warning .cdx-message__icon{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-message--warning .cdx-message__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--warning .cdx-message__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-message--warning .cdx-message__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-message--warning .cdx-message__icon--vue{color:var(--color-icon-warning, #ab7f2a)}.cdx-message--error{background-color:var(--background-color-error-subtle, #ffe9e5);border-color:var(--border-color-error, #f54739)}.cdx-message--error .cdx-message__icon{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--error .cdx-message__icon{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-message--error .cdx-message__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--error .cdx-message__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-message--error .cdx-message__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-message--error .cdx-message__icon--vue{color:var(--color-icon-error, #f54739)}.cdx-message--success{background-color:var(--background-color-success-subtle, #dff2eb);border-color:var(--border-color-success, #099979)}.cdx-message--success .cdx-message__icon{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--success .cdx-message__icon{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-message--success .cdx-message__icon{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-message--success .cdx-message__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-message--success .cdx-message__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-message--success .cdx-message__icon--vue{color:var(--color-icon-success, #099979)}.cdx-message--user-dismissable{padding-left:48px}@media screen and (min-width: 640px){.cdx-message--user-dismissable{padding-left:56px}}.cdx-message--inline{background-color:var(--background-color-transparent, transparent);border:0;padding:0}.cdx-message--inline.cdx-message--error{color:var(--color-error, #bf3c2c)}.cdx-message .cdx-message__icon,.cdx-message .cdx-message__icon--vue{height:var(--line-height-medium, 1.625rem)}.cdx-message__content{word-wrap:break-word;align-self:center;flex-grow:1;margin-right:8px;font-size:var(--font-size-medium, 1rem);line-height:var(--line-height-medium, 1.625rem)}@supports (word-break: break-word){.cdx-message__content{word-wrap:unset;word-break:break-word}}@supports (overflow-wrap: anywhere){.cdx-message__content{word-break:normal;overflow-wrap:anywhere}}.cdx-message__content:lang(de),.cdx-message__content:lang(de-AT),.cdx-message__content:lang(de-CH),.cdx-message__content:lang(de-DE),.cdx-message__content:lang(de-LI),.cdx-message__content:lang(de-LU),.cdx-message__content:lang(de-x-formal){-webkit-hyphens:auto;hyphens:auto}.cdx-message__content>*{font-size:var(--font-size-medium, 1rem);line-height:var(--line-height-medium, 1.625rem)}.cdx-message__content>*:first-child{margin-top:0;padding-top:0}.cdx-message__content>*:last-child{margin-bottom:0;padding-bottom:0}.cdx-message__action-button.cdx-button{flex-shrink:0;position:relative;margin-bottom:-8px;line-height:0}.cdx-message__dismiss-button.cdx-button{position:absolute;top:8px;left:8px;padding:5px;line-height:0}.cdx-message+.cdx-message{margin-top:8px}.cdx-message-enter-active,.cdx-message-leave-active-system{transition-property:opacity;transition-duration:.25s;transition-timing-function:ease}.cdx-message-leave-active-user{transition-property:opacity;transition-duration:.25s;transition-timing-function:ease-out}.cdx-message-enter-from,.cdx-message-leave-to{opacity:0}