@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 22.1 kB
CSS
.cdx-icon{color:var(--color-base, #202122);display:inline-flex;align-items:center;justify-content:center;vertical-align:text-bottom}.cdx-icon svg{fill:currentcolor;width:100%;height:100%}.cdx-icon--x-small{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) - 4px);height:calc(var(--font-size-medium, 1rem) - 4px)}.cdx-icon--small{min-width:14px;min-height:14px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 1rem)}.cdx-icon--medium{min-width:18px;min-height:18px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px)}[dir] .cdx-icon--flipped svg{transform:scaleX(-1)}.cdx-label{display:flex;flex-direction:column;font-size:var(--font-size-medium, 1rem);line-height:var(--line-height-small, 1.375rem)}.cdx-label__label__icon.cdx-icon{color:var(--color-subtle, #54595d)}[dir=ltr] .cdx-label__label__icon.cdx-icon{margin-right:4px}[dir=rtl] .cdx-label__label__icon.cdx-icon{margin-left:4px}.cdx-label__label__text{font-weight:700}[dir] legend.cdx-label{padding:0}fieldset label.cdx-label__label .cdx-label__label__text{font-weight:400}.cdx-label:not(.cdx-label--disabled) .cdx-label__label__optional-flag,.cdx-label:not(.cdx-label--disabled) .cdx-label__description{color:var(--color-subtle, #54595d)}.cdx-label--disabled,.cdx-label--disabled .cdx-label__label__icon{color:var(--color-disabled, #a2a9b1)}.cdx-label--visually-hidden{display:block;clip:rect(1px,1px,1px,1px);position:absolute;width:1px;height:1px;overflow:hidden}[dir] .cdx-label--visually-hidden{margin:-1px;border:0;padding:0}[dir] .cdx-label:not(.cdx-label--visually-hidden){padding-bottom:8px}@media screen and (min-width: 640px){[dir] .cdx-label:not(.cdx-label--visually-hidden){padding-bottom:4px}}.cdx-toggle-switch{display:inline-flex;align-items:center;justify-content:flex-start;position:relative;z-index:0}[dir] .cdx-toggle-switch{margin-bottom:6px}.cdx-toggle-switch--align-switch{display:flex;justify-content:space-between}[dir] .cdx-toggle-switch:last-child{margin-bottom:0}.cdx-toggle-switch__label,.cdx-toggle-switch__label.cdx-label{order:-1}[dir=ltr] .cdx-toggle-switch__label:not(:empty),[dir=ltr] .cdx-toggle-switch__label.cdx-label:not(:empty){padding-right:8px}[dir=rtl] .cdx-toggle-switch__label:not(:empty),[dir=rtl] .cdx-toggle-switch__label.cdx-label:not(:empty){padding-left:8px}[dir] .cdx-toggle-switch .cdx-toggle-switch__label.cdx-label{padding-bottom:0}.cdx-toggle-switch .cdx-toggle-switch__label.cdx-label .cdx-label__label__text{font-weight:400}.cdx-toggle-switch__switch{display:inline-block;flex-shrink:0;position:relative;box-sizing:border-box;min-width:42px;min-height:28px;width:calc(var(--font-size-medium, 1rem) * 3);height:calc(var(--font-size-medium, 1rem) * 2);overflow:hidden}[dir] .cdx-toggle-switch__switch{transform:translateZ(0);background-color:var(--background-color-base, #fff);border-width:1px;border-style:solid;border-color:var(--border-color-interactive, #72777d);border-radius:9999px;transition-property:background-color,color,border-color,box-shadow;transition-duration:.25s}.cdx-toggle-switch__switch:before{content:"";display:block;position:absolute;top:1px;bottom:1px;z-index:1}[dir] .cdx-toggle-switch__switch:before{right:1px;left:1px;border:1px solid var(--border-color-transparent, transparent);border-radius:9999px;transition-property:background-color,color,border-color,box-shadow;transition-duration:.25s}.cdx-toggle-switch__switch__grip{position:absolute;top:50%;box-sizing:border-box;min-width:18px;min-height:18px;width:calc(var(--font-size-medium, 1rem) * 1.25);height:calc(var(--font-size-medium, 1rem) * 1.25)}[dir] .cdx-toggle-switch__switch__grip{border:1px solid var(--border-color-interactive, #72777d);border-radius:50%;transition-property:background-color,border-color,transform;transition-duration:.25s,.1s,.1s}[dir=ltr] .cdx-toggle-switch__switch__grip{transform:translate(calc(var(--font-size-medium, 1rem) * .375),-50%)}[dir=rtl] .cdx-toggle-switch__switch__grip{transform:translate(calc(-1*(var(--font-size-medium, 1rem) * .375)),-50%)}.cdx-toggle-switch__input{opacity:0;position:absolute;z-index:2;min-width:42px;min-height:32px;width:3rem;height:2rem;font-size:var(--font-size-medium, 1rem)}[dir] .cdx-toggle-switch__input{margin:0}[dir=ltr] .cdx-toggle-switch__input{right:0}[dir=rtl] .cdx-toggle-switch__input{left:0}[dir] .cdx-toggle-switch__input:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base, #fff);border-color:var(--border-color-inverted, #fff)}[dir=ltr] .cdx-toggle-switch__input:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{transform:translate(calc(var(--font-size-medium, 1rem) * 1.25),-50%)}[dir=rtl] .cdx-toggle-switch__input:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{transform:translate(calc(-1*(var(--font-size-medium, 1rem) * 1.25)),-50%)}[dir] .cdx-toggle-switch__input:enabled:hover,[dir] .cdx-toggle-switch__input:enabled~.cdx-label .cdx-label__label:hover,[dir] .cdx-toggle-switch__input:enabled~.cdx-toggle-switch__label:not(.cdx-label):hover{cursor:pointer}[dir] .cdx-toggle-switch__input:enabled~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base, #fff)}[dir] .cdx-toggle-switch__input:enabled:hover~.cdx-toggle-switch__switch{background-color:var(--background-color-interactive-subtle--hover, #eaecf0);border-color:var(--border-color-interactive--hover, #27292d)}[dir] .cdx-toggle-switch__input:enabled:hover~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base, #fff);border-color:var(--border-color-interactive--hover, #27292d)}[dir] .cdx-toggle-switch__input:enabled:active~.cdx-toggle-switch__switch{background-color:var(--background-color-interactive-subtle--active, #dadde3);border-color:var(--border-color-interactive--active, #202122)}[dir] .cdx-toggle-switch__input:enabled:active~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base, #fff);border-color:var(--border-color-interactive--active, #202122)}.cdx-toggle-switch__input:enabled:focus:not(:active)~.cdx-toggle-switch__switch{outline:1px solid transparent}[dir] .cdx-toggle-switch__input:enabled:focus:not(:active)~.cdx-toggle-switch__switch{box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c)}[dir] .cdx-toggle-switch__input:enabled:checked~.cdx-toggle-switch__switch{background-color:var(--background-color-progressive, #36c);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:enabled:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base-fixed, #fff);border-color:var(--background-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:enabled:checked:hover~.cdx-toggle-switch__switch{background-color:var(--background-color-progressive--hover, #3056a9);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:enabled:checked:focus:not(:active)~.cdx-toggle-switch__switch{border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:enabled:checked:focus:not(:active)~.cdx-toggle-switch__switch:before,[dir] .cdx-toggle-switch__input:enabled:checked:focus:not(:active)~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{border-color:var(--border-color-inverted, #fff)}[dir] .cdx-toggle-switch__input:enabled:checked:active~.cdx-toggle-switch__switch{background-color:var(--background-color-progressive--active, #233566);border-color:var(--border-color-transparent, transparent);box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--active, #233566)}[dir] .cdx-toggle-switch__input:enabled:checked:active~.cdx-toggle-switch__switch:before{border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:enabled:checked:active~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--background-color-base-fixed, #fff);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:disabled{cursor:default}[dir] .cdx-toggle-switch__input:disabled~.cdx-toggle-switch__switch{background-color:var(--background-color-disabled-subtle, #eaecf0);border-color:var(--border-color-disabled, #c8ccd1)}[dir] .cdx-toggle-switch__input:disabled~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{border-color:var(--border-color-disabled, #c8ccd1)}[dir] .cdx-toggle-switch__input:disabled:checked~.cdx-toggle-switch__switch{background-color:var(--background-color-disabled, #dadde3);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-switch__input:disabled:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip{background-color:var(--color-disabled-emphasized, #a2a9b1);border-color:var(--border-color-transparent, transparent)}.cdx-toggle-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:32px;max-width:28rem;font-family:inherit;font-size:var(--font-size-medium, 1rem);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}[dir] .cdx-toggle-button{margin:0;border-width:1px;border-style:solid;border-radius:2px;padding-right:11px;padding-left:11px;transition-property:background-color,color,border-color,box-shadow;transition-duration:.1s}.cdx-toggle-button--size-small{gap:4px;min-height:1.5rem}[dir] .cdx-toggle-button--size-small{padding-right:5px;padding-left:5px}.cdx-toggle-button--size-large{min-height:44px}[dir] .cdx-toggle-button--size-large{padding-right:15px;padding-left:15px}.cdx-toggle-button--icon-only{min-width:32px}[dir] .cdx-toggle-button--icon-only{padding-right:0;padding-left:0}.cdx-toggle-button--icon-only.cdx-toggle-button--size-small{min-width:1.5rem}.cdx-toggle-button--icon-only.cdx-toggle-button--size-large{min-width:44px}[dir] .cdx-toggle-button::-moz-focus-inner{border:0;padding:0}.cdx-toggle-button:enabled{color:var(--color-base, #202122)}[dir] .cdx-toggle-button:enabled:hover{background-color:var(--background-color-interactive-subtle--hover, #eaecf0);cursor:pointer}.cdx-toggle-button:enabled:focus{outline:1px solid transparent}[dir] .cdx-toggle-button:enabled:focus{border-color:var(--border-color-progressive--focus, #36c);box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c)}[dir] .cdx-toggle-button:enabled:active,[dir] .cdx-toggle-button:enabled.cdx-toggle-button--is-active{background-color:var(--background-color-interactive-subtle--active, #dadde3);border-color:var(--border-color-transparent, transparent);box-shadow:none}.cdx-toggle-button .cdx-icon{color:inherit;vertical-align:middle}.cdx-toggle-button--framed:enabled{color:var(--color-base, #202122)}[dir] .cdx-toggle-button--framed:enabled{background-color:var(--background-color-interactive-subtle, #f8f9fa);border-color:var(--border-color-interactive, #72777d)}[dir] .cdx-toggle-button--framed:enabled:hover{background-color:var(--background-color-interactive-subtle--hover, #eaecf0);border-color:var(--border-color-interactive--hover, #27292d);cursor:pointer}[dir] .cdx-toggle-button--framed:enabled:active,[dir] .cdx-toggle-button--framed:enabled.cdx-toggle-button--is-active{background-color:var(--background-color-interactive-subtle--active, #dadde3);border-color:var(--border-color-interactive--active, #202122);box-shadow:none}.cdx-toggle-button--framed:disabled{color:var(--color-disabled-emphasized, #a2a9b1)}[dir] .cdx-toggle-button--framed:disabled{background-color:var(--background-color-disabled, #dadde3);border-color:var(--border-color-transparent, transparent)}.cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled{color:var(--color-inverted-fixed, #fff)}[dir] .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled{background-color:var(--background-color-progressive, #36c);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:hover{background-color:var(--background-color-progressive--hover, #3056a9);border-color:var(--border-color-transparent, transparent)}[dir] .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:focus{border-color:var(--border-color-progressive--focus, #36c);box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c),inset 0 0 0 2px var(--box-shadow-color-inverted, #fff)}[dir] .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:active,[dir] .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled.cdx-toggle-button--is-active{background-color:var(--background-color-progressive--active, #233566);border-color:var(--border-color-transparent, transparent);box-shadow:none}[dir] .cdx-toggle-button--quiet{background-color:var(--background-color-transparent, transparent);border-color:var(--border-color-transparent, transparent)}.cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on{color:var(--color-progressive, #36c)}[dir] .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on{background-color:var(--background-color-progressive-subtle, #f1f4fd)}.cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on:hover{color:var(--color-progressive--hover, #3056a9)}[dir] .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on:hover{background-color:var(--background-color-progressive-subtle--hover, #dce3f9)}[dir] .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on:focus{background-color:var(--background-color-progressive-subtle, #f1f4fd)}.cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on:active,.cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on.cdx-toggle-button--is-active{color:var(--color-progressive--active, #233566)}[dir] .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on:active,[dir] .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on.cdx-toggle-button--is-active{background-color:var(--background-color-progressive-subtle--active, #cbd6f6)}.cdx-toggle-button--quiet:disabled{color:var(--color-disabled, #a2a9b1)}.cdx-toggle-button-group{position:relative;z-index:0;width:-webkit-fit-content;width:fit-content;overflow:hidden}[dir] .cdx-toggle-button-group{border-radius:2px;padding-top:1px}[dir=ltr] .cdx-toggle-button-group{padding-left:1px}[dir=rtl] .cdx-toggle-button-group{padding-right:1px}.cdx-toggle-button-group .cdx-toggle-button{position:relative;z-index:1}[dir] .cdx-toggle-button-group .cdx-toggle-button{margin-top:-1px;border-radius:0}[dir=ltr] .cdx-toggle-button-group .cdx-toggle-button{margin-left:-1px}[dir=rtl] .cdx-toggle-button-group .cdx-toggle-button{margin-right:-1px}.cdx-toggle-button-group .cdx-toggle-button:enabled:active,.cdx-toggle-button-group .cdx-toggle-button:enabled:focus{z-index:3}.cdx-toggle-button-group .cdx-toggle-button:disabled{z-index:0}[dir=ltr] .cdx-toggle-button-group .cdx-toggle-button:disabled{box-shadow:0 -1px 0 0 var(--box-shadow-color-inverted, #fff),-1px 0 0 0 var(--box-shadow-color-inverted, #fff)}[dir=rtl] .cdx-toggle-button-group .cdx-toggle-button:disabled{box-shadow:0 -1px 0 0 var(--box-shadow-color-inverted, #fff),1px 0 0 0 var(--box-shadow-color-inverted, #fff)}.cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled{z-index:2}[dir=ltr] .cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled{box-shadow:0 -1px 0 0 var(--box-shadow-color-inverted, #fff),-1px 0 0 0 var(--box-shadow-color-inverted, #fff)}[dir=rtl] .cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled{box-shadow:0 -1px 0 0 var(--box-shadow-color-inverted, #fff),1px 0 0 0 var(--box-shadow-color-inverted, #fff)}[dir] .cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled:focus{box-shadow:inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c),inset 0 0 0 2px var(--box-shadow-color-inverted, #fff),0 0 0 1px var(--box-shadow-color-inverted, #fff)}.cdx-demo-direction-switcher{display:inline-block}:root:has(.cdx-demo--dark){--color-base: #eaecf0;--color-base--hover: #f8f9fa;--color-emphasized: #f8f9fa;--color-subtle: #a2a9b1;--color-disabled: #54595d;--color-disabled-emphasized: #72777d;--color-inverted: #101418;--color-progressive: #88a3e8;--color-progressive--hover: #b0c1f0;--color-progressive--active: #cbd6f6;--color-destructive: #fd7865;--color-destructive--hover: #fea898;--color-destructive--active: #ffc8bd;--color-visited: #a799cd;--color-visited--hover: #c5b9dd;--color-visited--active: #d9d0e9;--color-destructive--visited: #c99391;--color-destructive--visited--hover: #dcb5b3;--color-destructive--visited--active: #e8cecd;--color-error: #fd7865;--color-error--hover: #fea898;--color-error--active: #ffc8bd;--color-warning: #ca982e;--color-success: #2cb491;--color-notice: #a2a9b1;--color-content-added: #80cdb3;--color-content-removed: #fd7865;--color-base--subtle: #a2a9b1;--box-shadow-color-base: #72777d;--box-shadow-color-progressive--focus: #6485d1;--box-shadow-color-progressive-selected: #88a3e8;--box-shadow-color-progressive-selected--hover: #b0c1f0;--box-shadow-color-progressive-selected--active: #cbd6f6;--box-shadow-color-destructive--focus: #6485d1;--box-shadow-color-inverted: #000;--box-shadow-color-alpha-base: rgba(0, 0, 0, .87);--mix-blend-mode-blend: screen;--background-color-base: #101418;--background-color-neutral: #27292d;--background-color-neutral-subtle: #202122;--background-color-interactive: #27292d;--background-color-interactive--hover: #404244;--background-color-interactive--active: #54595d;--background-color-interactive-subtle: #202122;--background-color-interactive-subtle--hover: #27292d;--background-color-interactive-subtle--active: #404244;--background-color-disabled: #404244;--background-color-disabled-subtle: #27292d;--background-color-inverted: #f8f9fa;--background-color-progressive--focus: #6485d1;--background-color-progressive-subtle: #1b223d;--background-color-progressive-subtle--hover: #233566;--background-color-progressive-subtle--active: #3056a9;--background-color-destructive--focus: #6485d1;--background-color-destructive-subtle: #3c1a13;--background-color-destructive-subtle--hover: #612419;--background-color-destructive-subtle--active: #9f3526;--background-color-error-subtle: #3c1a13;--background-color-error-subtle--hover: #612419;--background-color-error-subtle--active: #9f3526;--background-color-warning-subtle: #2d2212;--background-color-success-subtle: #132821;--background-color-notice-subtle: #27292d;--background-color-content-added: #233566;--background-color-content-removed: #453217;--background-color-backdrop-light: rgba(0, 0, 0, .65);--background-color-backdrop-dark: rgba(255, 255, 255, .65);--border-color-base: #72777d;--border-color-emphasized: #eaecf0;--border-color-subtle: #54595d;--border-color-muted: #404244;--border-color-interactive--hover: #a2a9b1;--border-color-interactive--active: #c8ccd1;--border-color-disabled: #54595d;--border-color-inverted: #101418;--border-color-progressive--hover: #88a3e8;--border-color-progressive--active: #b0c1f0;--border-color-progressive--focus: #6485d1;--border-color-destructive--hover: #fd7865;--border-color-destructive--active: #fea898;--border-color-destructive--focus: #6485d1;--border-color-error--hover: #fd7865;--border-color-error--active: #fea898;--border-color-content-added: #233566;--border-color-content-removed: #987027}h1{font-family:Linux Libertine,Georgia,Times,"Source Serif Pro",serif;font-size:var(--font-size-xxx-large, 1.75rem);font-weight:400;line-height:var(--line-height-xxx-large, 2.375rem)}h2{font-family:Linux Libertine,Georgia,Times,"Source Serif Pro",serif;font-size:var(--font-size-xx-large, 1.5rem);font-weight:400;line-height:var(--line-height-xx-large, 2.125rem)}h3{font-family:sans-serif;font-size:var(--font-size-x-large, 1.25rem);font-weight:700;line-height:var(--line-height-x-large, 1.875rem)}h4,h5,h6{font-family:sans-serif;font-size:var(--font-size-medium, 1rem);font-weight:700;line-height:var(--line-height-medium, 1.625rem)}p,blockquote{font-family:sans-serif;font-size:var(--font-size-medium, 1rem);font-weight:400;line-height:var(--line-height-medium, 1.625rem)}blockquote{font-family:Linux Libertine,Georgia,Times,"Source Serif Pro",serif}small,figcaption,cite{font-family:sans-serif;font-size:var(--font-size-small, .875rem);font-weight:400;line-height:var(--line-height-small, 1.375rem)}code{font-family:Menlo,Consolas,Liberation Mono,Fira Code,Courier New,monospace}html{scroll-behavior:smooth;scroll-padding-top:calc(4rem + 16px)}body{background-color:var(--background-color-base);color:var(--color-base)}[dir] body{margin:0}.cdx-demo{display:flex;flex-direction:column;font-family:sans-serif}.cdx-demo__header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;z-index:100;box-sizing:border-box;height:4rem}[dir] .cdx-demo__header{background-color:var(--background-color-base, #fff);border-bottom:1px solid var(--border-color-base, #a2a9b1);padding:16px}.cdx-demo__header h1{display:inline-flex;flex-grow:1}[dir] .cdx-demo__header h1{margin-top:0;margin-bottom:0}@media (max-width: 639px){.cdx-demo__header h1{font-size:var(--font-size-x-large, 1.25rem);line-height:var(--line-height-large, 1.75rem)}}.cdx-demo__header .cdx-direction-switcher{display:inline-flex}.cdx-demo__body{display:flex;flex:1;flex-direction:column;justify-content:space-between}[dir] .cdx-demo__body{padding:16px}@media (min-width: 640px){.cdx-demo__body{flex-direction:row}}.cdx-demo__content{flex:1}[dir] .cdx-demo__content__sectioning{margin-bottom:16px}.cdx-demo__nav{flex:1;order:-1}[dir] .cdx-demo__nav{margin-bottom:32px}@media (min-width: 640px){.cdx-demo__nav{flex:0 0 20rem;flex-direction:row}}.cdx-demo__nav__inner{position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:calc(4rem + 16px)}.cdx-demo__nav__inner ul{list-style:none;line-height:var(--line-height-medium, 1.625rem)}[dir] .cdx-demo__nav__inner ul{margin:0;padding:0}