@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 12.1 kB
CSS
[dir] .cdx-docs-button-demo-table td{text-align:center}.cdx-docs-button-demo-table th{font-weight:400}.cdx-demo-css-icon--trash[data-v-2fb20f13]{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))){[dir] .cdx-demo-css-icon--trash[data-v-2fb20f13]{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-demo-css-icon--trash[data-v-2fb20f13]{-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-demo-css-icon--trash[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash[data-v-2fb20f13]{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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--trash[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash[data-v-2fb20f13]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash[data-v-2fb20f13]{-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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></svg>')}[dir] .cdx-demo-css-icon--trash[data-v-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--trash--small[data-v-2fb20f13]{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))){[dir] .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{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-demo-css-icon--trash--small[data-v-2fb20f13]{-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-demo-css-icon--trash--small[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--trash--small[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash--small[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash--small[data-v-2fb20f13]{-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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></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="m16 8-1.087 12H5.087L4 8h2l.913 10h6.174L14 8zM13 4h5v2H2V4h5V0h6zM9 4h2V2H9z"/></svg>')}[dir] .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-left[data-v-2fb20f13]{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))){[dir] .cdx-demo-css-icon--align-left[data-v-2fb20f13]{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-demo-css-icon--align-left[data-v-2fb20f13]{-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-demo-css-icon--align-left[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-left[data-v-2fb20f13]{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 17H1v-2h18zM7 13H1V7h6zm12 0H9v-2h10zm0-4H9V7h10zm0-4H1V3h18z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--align-left[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-left[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-left[data-v-2fb20f13]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-left[data-v-2fb20f13]{-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 17H1v-2h18zM7 13H1V7h6zm12 0H9v-2h10zm0-4H9V7h10zm0-4H1V3h18z"/></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 17H1v-2h18zM7 13H1V7h6zm12 0H9v-2h10zm0-4H9V7h10zm0-4H1V3h18z"/></svg>')}[dir] .cdx-demo-css-icon--align-left[data-v-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-right[data-v-2fb20f13]{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))){[dir] .cdx-demo-css-icon--align-right[data-v-2fb20f13]{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-demo-css-icon--align-right[data-v-2fb20f13]{-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-demo-css-icon--align-right[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-right[data-v-2fb20f13]{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 17H1v-2h18zm-8-4H1v-2h10zm8 0h-6V7h6zm-8-4H1V7h10zm8-4H1V3h18z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--align-right[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-right[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-right[data-v-2fb20f13]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-right[data-v-2fb20f13]{-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 17H1v-2h18zm-8-4H1v-2h10zm8 0h-6V7h6zm-8-4H1V7h10zm8-4H1V3h18z"/></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 17H1v-2h18zm-8-4H1v-2h10zm8 0h-6V7h6zm-8-4H1V7h10zm8-4H1V3h18z"/></svg>')}[dir] .cdx-demo-css-icon--align-right[data-v-2fb20f13]{transition-property:background-color;transition-duration:.1s}}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:last-child{margin-left:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:first-child{margin-left:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:first-child{margin-right:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:last-child{margin-right:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:last-child{margin-left:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:first-child{margin-left:-3px}[dir=rtl] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:first-child{margin-right:-3px}[dir=ltr] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:last-child{margin-right:-3px}[dir=rtl] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:last-child{margin-left:-3px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:last-child{margin-left:-12px}.cdx-demo-flush-layout__buttons[data-v-2fb20f13]{display:flex;justify-content:space-between}[dir] .cdx-demo-flush-layout__content[data-v-2fb20f13]{margin-top:16px;border:1px solid var(--border-color-base, #a2a9b1);padding:16px}.cdx-demo-buttons-flex[data-v-2fb20f13]{font-size:14px}[dir] .cdx-demo-buttons-flex[data-v-2fb20f13]{margin-bottom:16px}.cdx-demo-buttons-flex--desktop[data-v-2fb20f13]{max-width:50em}.cdx-demo-buttons-flex--desktop__flex-container[data-v-2fb20f13]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--desktop .cdx-text-input[data-v-2fb20f13]{min-width:auto}.cdx-demo-buttons-flex--mobile[data-v-2fb20f13]{max-width:341px}.cdx-demo-buttons-flex--mobile__flex-container[data-v-2fb20f13]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--mobile .cdx-text-input[data-v-2fb20f13]{min-width:auto}.cdx-demo-buttons-flex--icon-only[data-v-2fb20f13]{display:flex;gap:4px}