| /* Codex design tokens and rules for VitePress docs. */ | |
| @import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css'; | |
| /* stylelint-disable selector-class-pattern */ | |
| /* | |
| * CSS custom property overrides of the default VitePress theme. | |
| * Note that dark mode colors are set up in the style block of CustomLayout.vue, because we can use | |
| * the dark mode Less mixin there. | |
| */ | |
| :root { | |
| /* syntax highlighting fixes */ | |
| --vp-code-block-color: rgba( 255, 255, 245, 0.86 ); | |
| --vp-code-block-bg: #292b30; | |
| --vp-code-block-divider-color: #000; | |
| --vp-code-color: var( --color-emphasized ); | |
| /* Language label inside code blocks. We use dark mode code blocks for both color modes, so this | |
| color shouldn't change. */ | |
| --vp-code-lang-color: var( --color-inverted-fixed ); | |
| --vp-code-tab-text-color: rgba( 235, 235, 245, 0.6 ); | |
| --vp-code-tab-hover-text-color: rgba( 255, 255, 245, 0.86 ); | |
| --vp-code-tab-active-text-color: rgba( 255, 255, 245, 0.86 ); | |
| --vp-c-brand: var( --color-progressive ); | |
| --vp-c-brand-light: var( --color-progressive--hover ); | |
| /* Used for links within content. */ | |
| --vp-c-brand-1: var( --color-progressive ); | |
| /* Used for links within content on hover. */ | |
| --vp-c-brand-2: var( --color-progressive--hover ); | |
| --vp-c-text: var( --color-base ); | |
| --vp-c-text-1: var( --color-base ); | |
| --vp-c-text-2: var( --color-subtle ); | |
| --vp-c-text-code: var( --color-emphasized ); | |
| --vp-c-white-soft: var( --background-color-interactive-subtle ); | |
| --vp-c-white-mute: var( --background-color-interactive-subtle ); | |
| --vp-c-indigo: var( --color-progressive ); | |
| --vp-c-indigo-soft: var( --color-progressive--active ); | |
| --vp-c-bg: var( --background-color-base ); | |
| --vp-c-bg-alt: var( --background-color-interactive-subtle ); | |
| --vp-c-divider: var( --border-color-base ); | |
| --vp-c-divider-light: var( --border-color-subtle ); | |
| --vp-c-gutter: var( --border-color-subtle ); | |
| --vp-font-family-base: var( --font-family-system-sans ); | |
| --vp-font-family-serif: var( --font-family-serif ); | |
| --vp-shadow-3: var( --box-shadow-medium ); | |
| /* Z-indexes */ | |
| /* Header is sticky. */ | |
| --vp-z-index-nav: var( --z-index-sticky ); | |
| --vp-custom-block-info-border: var( --border-color-notice ); | |
| --vp-custom-block-info-text: var( --color-notice ); | |
| --vp-custom-block-info-bg: var( --background-color-notice-subtle ); | |
| --vp-custom-block-tip-border: var( --border-color-progressive ); | |
| --vp-custom-block-tip-text: var( --color-notice ); | |
| --vp-custom-block-tip-bg: var( --background-color-interactive-subtle ); | |
| --vp-custom-block-warning-border: var( --border-color-warning ); | |
| --vp-custom-block-warning-text: var( --color-notice ); | |
| --vp-custom-block-warning-bg: var( --background-color-warning-subtle ); | |
| --vp-custom-block-danger-border: var( --border-color-error ); | |
| --vp-custom-block-danger-text: var( --color-notice ); | |
| --vp-custom-block-danger-bg: var( --background-color-error-subtle ); | |
| --vp-custom-block-details-border: var( --border-color-notice ); | |
| --vp-custom-block-details-text: var( --color-notice ); | |
| --vp-custom-block-details-bg: var( --background-color-notice-subtle ); | |
| } | |
| /* VitePress theme overrides and unsets. */ | |
| /* HTML elements. ---------------------------------------------------------- */ | |
| html, | |
| body { | |
| /* Use `initial` to overwrite VitePress' absolute font sizing. | |
| * We can't use `unset` due to cross-browser compatibility right now. | |
| * See T303100. | |
| */ | |
| font-size: initial; | |
| /* Set `line-height` to medium `1.6` in default theme. This also fulfills the | |
| * WCAG 2.2 AA requirement for line height of at least 1.5. | |
| */ | |
| line-height: var( --line-height-medium ); | |
| } | |
| .vp-doc h1, | |
| .vp-doc h2, | |
| .vp-doc h3, | |
| .vp-doc h4, | |
| .vp-doc h5, | |
| .vp-doc h6 { | |
| color: var( --color-emphasized ); | |
| /* Use `initial` to reset VitePress' opinionated `letter-spacing` to browser default. | |
| * In future, replace by `.vp-doc :is( h1, … )`. | |
| */ | |
| letter-spacing: initial; | |
| } | |
| .vp-doc h2, | |
| .vp-doc h3, | |
| .vp-doc h4, | |
| .vp-doc h5, | |
| .vp-doc h6 { | |
| font-weight: var( --font-weight-bold ); | |
| } | |
| .vp-doc h1 { | |
| font-family: var( --font-family-heading-main ); | |
| font-size: var( --font-size-xxx-large ); | |
| font-weight: var( --font-weight-normal ); | |
| line-height: var( --line-height-xxx-small ); | |
| } | |
| .vp-doc h2 { | |
| padding-top: var( --spacing-300 ); | |
| font-size: var( --font-size-xx-large ); | |
| line-height: var( --line-height-xxx-small ); | |
| } | |
| .vp-doc h2 .header-anchor { | |
| /* Align anchor link with heading. */ | |
| top: var( --spacing-300 ); | |
| } | |
| .vp-doc h3 { | |
| font-size: var( --font-size-x-large ); | |
| line-height: var( --line-height-xxx-small ); | |
| } | |
| .vp-doc h4 { | |
| margin-top: var( --spacing-150 ); | |
| font-size: var( --font-size-large ); | |
| line-height: var( --line-height-xxx-small ); | |
| } | |
| .vp-doc h5 { | |
| margin-top: var( --spacing-125 ); | |
| font-size: var( --font-size-medium ); | |
| line-height: var( --line-height-xxx-small ); | |
| } | |
| .vp-doc h6 { | |
| font-size: var( --font-size-medium ); | |
| line-height: var( --line-height-medium ); | |
| } | |
| .vp-doc a { | |
| /* Use `initial` to reset VitePress' opinionated font weight to browser default. */ | |
| font-weight: initial; | |
| text-decoration: var( --text-decoration-none ); | |
| transition-duration: 0s; | |
| } | |
| .vp-doc a:hover { | |
| text-decoration: var( --text-decoration-underline ); | |
| } | |
| /* VitePress doesn't set a color for active links. */ | |
| .vp-doc a:active { | |
| color: var( --color-progressive--active ); | |
| } | |
| /* Code. */ | |
| .vp-doc :not( pre ) > code { | |
| background-color: var( --background-color-neutral ); | |
| border-radius: var( --border-radius-base ); | |
| padding: var( --spacing-12 ) var( --spacing-25 ); | |
| } | |
| .custom-block.tip code { | |
| color: var( --color-base ); | |
| } | |
| /* | |
| * Remove bottom margin from last code block in a paragraph, this leaves spacing to | |
| * be set by `.vp-doc p` only. | |
| */ | |
| .vp-doc p > code:last-child { | |
| margin-bottom: 0; | |
| } | |
| .vp-doc a:hover > code { | |
| color: var( --color-progressive ); | |
| } | |
| .vp-doc kbd { | |
| background-color: var( --background-color-neutral-subtle ); | |
| border: var( --border-subtle ); | |
| border-radius: var( --border-radius-base ); | |
| padding: var( --spacing-12 ) var( --spacing-25 ); | |
| box-shadow: var( --box-shadow-small ); | |
| font-size: var( --font-size-small ); | |
| white-space: nowrap; | |
| } | |
| .vp-doc p, | |
| .vp-doc li { | |
| clear: both; | |
| line-height: var( --line-height-medium ); | |
| } | |
| .vp-doc img, | |
| .vp-doc video, | |
| .vp-doc h1 + p { | |
| margin-top: var( --spacing-125 ); | |
| } | |
| .vp-doc h4 + p { | |
| margin-top: var( --spacing-75 ); | |
| } | |
| .vp-doc .cdx-demo-best-practice p, | |
| .vp-doc .cdx-demo-best-practices li { | |
| line-height: var( --line-height-small ); | |
| } | |
| .vp-doc table { | |
| display: table; | |
| } | |
| .vp-doc th, | |
| .vp-doc td { | |
| border-color: var( --border-color-subtle ); | |
| padding: var( --spacing-50 ) var( --spacing-75 ); | |
| /* Use relative size in general. */ | |
| font-size: var( --font-size-small ); | |
| } | |
| .vp-doc td pre { | |
| margin: 0; | |
| } | |
| .vp-doc figcaption { | |
| font-size: var( --font-size-small ); | |
| /* There is no token for this. */ | |
| /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ | |
| font-style: italic; | |
| } | |
| /* Navigation. ------------------------------------------------------------- */ | |
| .Layout .VPSidebar { | |
| background-color: var( --background-color-base ); | |
| border-right: var( --border-width-base ) var( --border-style-base ) var( --border-color-subtle ); | |
| } | |
| /* When the sidebar is not collapsed... */ | |
| @media screen and ( min-width: 960px ) { | |
| /* Get rid of blurred background of fixed header. */ | |
| .VPSidebar .curtain { | |
| background-color: var( --background-color-base ); | |
| } | |
| } | |
| .VPNavBarTitle .logo { | |
| margin-right: var( --spacing-35 ); | |
| } | |
| .VPNavBarTitle .title { | |
| font-size: var( --font-size-x-large ); | |
| } | |
| .VPNavBarTitle .title:hover { | |
| color: var( --color-base--hover ); | |
| opacity: var( --opacity-base ); | |
| } | |
| /* Main nav dropdown menus. */ | |
| .VPFlyout .VPMenu { | |
| border-color: var( --border-color-base ); | |
| border-radius: var( --border-radius-base ); | |
| padding: 0; | |
| box-shadow: var( --box-shadow-medium ); | |
| } | |
| /* Hide the social links navbar menu on medium/large screens since we add our own GitHub link for | |
| those sizes. */ | |
| .VPFlyout.VPNavBarExtra, | |
| .VPSocialLinks.VPNavBarSocialLinks { | |
| display: none; | |
| } | |
| /* Main nav dropdown link. */ | |
| .VPFlyout .link { | |
| border-radius: var( --border-radius-base ); | |
| padding: var( --spacing-50 ) var( --spacing-75 ); | |
| line-height: var( --line-height-medium ); | |
| transition-property: var( --transition-property-base ); | |
| transition-duration: var( --transition-duration-base ); | |
| } | |
| .VPFlyout .link:hover { | |
| background-color: var( --background-color-interactive ); | |
| } | |
| .VPFlyout .link:active, | |
| .VPFlyout .link.active { | |
| background-color: var( --background-color-progressive-subtle ); | |
| } | |
| /* Hamburger menu icon, styled to look like an icon-only quiet button. */ | |
| .VPNavBar .VPNavBarHamburger { | |
| min-width: var( --min-size-interactive-pointer ); | |
| min-height: var( --min-size-interactive-pointer ); | |
| width: auto; | |
| height: auto; | |
| border-radius: var( --border-radius-base ); | |
| padding: 0 var( --spacing-horizontal-button ); | |
| transition-property: @transition-property-base; | |
| transition-duration: @transition-duration-base; | |
| } | |
| .VPNavBar .VPNavBarHamburger:hover { | |
| background-color: var( --background-color-interactive-subtle--hover ); | |
| border-color: var( --border-color-transparent ); | |
| } | |
| .VPNavBar .VPNavBarHamburger:active { | |
| background-color: var( --background-color-interactive-subtle--active ); | |
| border-color: var( --border-color-transparent ); | |
| } | |
| .VPNavBar .content-body { | |
| @media ( max-width: 767px ) { | |
| /* Override column-gap style from VitePress. */ | |
| /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ | |
| column-gap: var( --spacing-75 ); | |
| } | |
| } | |
| /* Hide line below main nav on large screens. */ | |
| .VPNavBar .divider { | |
| display: none; | |
| } | |
| /* stylelint-disable no-descending-specificity */ | |
| .VPNavBar .link, | |
| .VPNavBar .text, | |
| .VPSidebar .text, | |
| .VPDocFooter .desc, | |
| .VPDocFooter .title { | |
| font-size: initial; | |
| } | |
| /* stylelint-enable no-descending-specificity */ | |
| .VPSidebar .link .text, | |
| .VPDocAside .content { | |
| font-size: initial; | |
| font-weight: var( --font-weight-normal ); | |
| } | |
| /* Mimic main sidebar styles within right sidebar. */ | |
| .VPDocAside .outline-title, | |
| .VPDocAside .outline-link { | |
| padding: var( --spacing-35 ) 0; | |
| font-size: var( --font-size-small ); | |
| line-height: var( --line-height-medium ); | |
| } | |
| /* Enlarge outline marker to match enlarged font size of outline links */ | |
| .VPDocAside .outline-marker { | |
| height: calc( var( --font-size-small ) * var( --line-height-medium ) + 2 * var( --spacing-35 ) ); | |
| } | |
| /* Higher specificity to override VitePress internal `.VPSidebarItem.level-1.is-link > .item > .link:hover .text[data-v-foo]` */ | |
| .VPSidebar .link:hover .text, | |
| .VPDocAside .outline-link:hover { | |
| /* stylelint-disable-next-line declaration-no-important */ | |
| color: var( --color-progressive--hover ) !important; | |
| } | |
| /* Higher specificity to override VitePress internal `.VPSidebarItem.level-1.is-active > .item > .link .text[data-v-foo]` */ | |
| .VPSidebar .VPSitebarItem.is-link.is-active .link .text, | |
| .VPDocAside .outline-link.active { | |
| /* stylelint-disable-next-line declaration-no-important */ | |
| color: var( --color-progressive ) !important; | |
| /* stylelint-disable-next-line declaration-no-important */ | |
| font-weight: var( --font-weight-bold ) !important; | |
| } | |
| /* Menu navigation on screen sizes < 960px. */ | |
| /* Need the .Layout class here for specificity to override border-bottom. */ | |
| .Layout .VPLocalNav { | |
| border-color: var( --border-color-subtle ); | |
| @media ( min-width: 960px ) { | |
| border-bottom: 0; | |
| } | |
| } | |
| .VPLocalNav .menu, | |
| .VPLocalNav .VPLocalNavOutlineDropdown button, | |
| .VPLocalNav .menu-text, | |
| .VPLocalNav .top-link { | |
| font-size: var( --font-size-medium ); | |
| } | |
| /* Menu button icon on screen sizes < 960px. */ | |
| .VPLocalNav .menu-icon { | |
| min-width: var( --min-size-icon-medium ); | |
| min-height: var( --min-size-icon-medium ); | |
| } | |
| /* Mobile 'On this page' menu. */ | |
| .VPLocalNav .items { | |
| top: var( --spacing-300 ); | |
| border-radius: var( --border-radius-base ); | |
| } | |
| .VPLocalNav .items .header, | |
| .VPLocalNav .items .outline { | |
| background-color: var( --background-color-base ); | |
| } | |
| /* Main Sidebar */ | |
| /* Position flyout sidebar over the nav bar, foremost for tablet and mobile screens. */ | |
| .VPSidebar.open { | |
| z-index: calc( var( --vp-z-index-nav ) + 1 ); | |
| } | |
| /* Style component categories. */ | |
| .VPSidebarItem.level-1.collapsible h3.text { | |
| font-weight: var( --font-weight-bold ); | |
| } | |
| /* Add space between groups. */ | |
| .VPSidebarItem.collapsible:not( :last-child ) { | |
| margin-bottom: var( --spacing-75 ); | |
| } | |
| /* Make sidebar caret icons point up when the section is open. */ | |
| /* Add `.vpi-chevron-right` for higher specificity. */ | |
| .VPSidebarItem.collapsible .vpi-chevron-right.caret-icon { | |
| transform: rotate( -90deg ); | |
| } | |
| /* Make sidebar caret icons point down when the section is collapsed. */ | |
| .VPSidebarItem.collapsed .vpi-chevron-right.caret-icon { | |
| transform: rotate( 90deg ); | |
| } | |
| /* Remove line to the left of nested items. */ | |
| .VPSidebarItem.level-1.collapsible .items { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /* Add a little more space between nested items. */ | |
| .collapsible .VPSidebarItem.level-2 { | |
| margin-top: var( --spacing-12 ); | |
| } | |
| .collapsible .VPSidebarItem.level-2 .indicator { | |
| display: none; | |
| } | |
| /* Search. ----------------------------------------------------------------- */ | |
| /* Position search button with the nav menu. */ | |
| .VPNavBarSearch { | |
| flex-grow: 0; | |
| } | |
| /* Search button in the header, which we style to look like an icon-only quiet button. */ | |
| .DocSearch-Button { | |
| background-color: var( --background-color-transparent ); | |
| justify-content: center; | |
| box-sizing: var( --box-sizing-base ); | |
| width: var( --min-size-interactive-pointer ); | |
| height: var( --min-size-interactive-pointer ); | |
| border-radius: var( --border-radius-base ); | |
| padding: 0 var( --spacing-horizontal-button ); | |
| transition-property: @transition-property-base; | |
| transition-duration: @transition-duration-base; | |
| @media screen and ( min-width: 960px ) { | |
| /* Override VitePress fixed size, which is an accessibility no-go. */ | |
| /* Use same approach as SearchInput. */ | |
| min-height: var( --min-size-interactive-pointer ); | |
| height: auto; | |
| } | |
| } | |
| .DocSearch-Button:hover { | |
| background-color: var( --background-color-interactive-subtle--hover ); | |
| border-color: var( --border-color-transparent ); | |
| } | |
| .DocSearch-Button:active { | |
| background-color: var( --background-color-interactive-subtle--active ); | |
| border-color: var( --border-color-transparent ); | |
| } | |
| /* Hide placeholder text (that makes the button look like an input) and keyboard nav hint. */ | |
| .DocSearch-Button .DocSearch-Button-Placeholder, | |
| .DocSearch-Button .DocSearch-Button-Keys { | |
| display: none; | |
| } | |
| .vpi-search, | |
| .DocSearch-Button .DocSearch-Search-Icon { | |
| --icon: url( data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0D%0A%09%3Cpath%20d%3D%22M12.2%2013.6a7%207%200%201%201%201.4-1.4l5.4%205.4-1.4%201.4zM3%208a5%205%200%201%200%2010%200A5%205%200%200%200%203%208%22%2F%3E%0D%0A%3C%2Fsvg%3E ); | |
| min-width: var( --min-size-icon-medium ); | |
| min-height: var( --min-size-icon-medium ); | |
| margin: 0; | |
| } | |
| .VPLocalSearchBox .results .result { | |
| border: var( --border-base ); | |
| } | |
| /* Style the highlighted search query. */ | |
| .VPLocalSearchBox .result .titles mark, | |
| .VPLocalSearchBox .result .excerpt mark { | |
| background-color: var( --background-color-progressive ); | |
| color: var( --color-inverted-fixed ); | |
| } | |
| .search-bar { | |
| /* stylelint-disable-next-line declaration-no-important */ | |
| border-radius: var( --border-radius-base ) !important; | |
| } | |
| /* Footer. ----------------------------------------------------------------- */ | |
| /* Use Codex Card styles on `.pager-link` */ | |
| .VPDocFooter .pager-link { | |
| border-color: var( --border-color-base ); | |
| border-radius: var( --border-radius-base ); | |
| padding: var( --spacing-75 ); | |
| } | |
| .VPDocFooter .pager-link:hover { | |
| border-color: var( --border-color-interactive ); | |
| } | |
| .VPDocFooter .pager-link:focus { | |
| border-color: var( --border-color-progressive--focus ); | |
| /* stylelint-disable-next-line | |
| @stylistic/declaration-colon-newline-after, | |
| @stylistic/value-list-comma-newline-after, | |
| scale-unlimited/declaration-strict-value */ | |
| box-shadow: var( --box-shadow-inset-small ) var( --box-shadow-color-progressive--focus ), | |
| var( --box-shadow-inset-medium ) var( --box-shadow-color-inverted ); | |
| outline: var( --outline-base--focus ); | |
| } | |
| .pager .pager-link:hover .title { | |
| color: var( --color-progressive ); | |
| } | |
| /* Syntax highlighting. ------------------------------------------- */ | |
| /* | |
| * Make sure template-only code blocks are labeled as Vue code. | |
| * Hide the "template" text and inject "vue" instead. | |
| */ | |
| .vp-doc [ class~='language-template' ] > span.lang { | |
| font-size: 0; | |
| } | |
| .vp-doc [ class~='language-template' ] > span.lang::after { | |
| content: 'vue'; | |
| /* We can't use em here because the parent's font size is 0 */ | |
| /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */ | |
| font-size: 0.75rem; | |
| } | |
| .vp-doc [ class*='language-' ] > button.copy { | |
| /* Hide built-in copy button. */ | |
| /* We have our own that's more accessible. */ | |
| display: none; | |
| } | |
| .vp-doc [ class*='language-' ]:hover > button.copy + span.lang, | |
| .vp-doc [ class*='language-' ] > button.copy:focus + span.lang { | |
| /* Never hide the code block language, set `opacity` to `1`. */ | |
| opacity: var( --opacity-base ); | |
| } | |
| /* Custom block. ----------------------------------------------------------- */ | |
| /* Markdown Messages and expandables. */ | |
| /* See https://vitepress.vuejs.org/guide/markdown.html#custom-containers. */ | |
| .vp-doc .custom-block { | |
| clear: both; | |
| margin-top: var( --spacing-100 ); | |
| margin-bottom: var( --spacing-200 ); | |
| border-radius: var( --border-radius-base ); | |
| font-size: var( --font-size-medium ); | |
| line-height: var( --line-height-medium ); | |
| } | |
| .vp-doc .custom-block p { | |
| line-height: var( --line-height-medium ); | |
| } | |
| .vp-doc .custom-block a { | |
| color: var( --color-progressive ); | |
| text-decoration: var( --text-decoration-none ); | |
| } | |
| .vp-doc .custom-block a:hover { | |
| color: var( --color-progressive ); | |
| opacity: var( --opacity-base ); | |
| text-decoration: var( --text-decoration-underline ); | |
| } | |
| /* stylelint-disable-next-line no-descending-specificity */ | |
| .vp-doc .custom-block code { | |
| background-color: var( --background-color-neutral ); | |
| /* VitePress uses bold for `code` in warnings by default?! */ | |
| font-weight: var( --font-weight-normal ); | |
| } | |
| .custom-block.danger .custom-block-title { | |
| color: var( --color-destructive--active ); | |
| } | |
| /* Columns */ | |
| @media ( min-width: 640px ) { | |
| .vp-doc .cdx-docs-col { | |
| float: left; | |
| width: var( --size-half ); | |
| padding: 0 var( --spacing-50 ); | |
| } | |
| .vp-doc .cdx-docs-col-start { | |
| clear: both; | |
| } | |
| .vp-doc .cdx-docs-col.cdx-docs-col-m { | |
| width: var( --size-half ); | |
| } | |
| .vp-doc h1, | |
| .vp-doc h2, | |
| .vp-doc h3, | |
| .vp-doc h4 { | |
| clear: both; | |
| } | |
| } | |
| /* CSS multi-columns */ | |
| .cdx-docs-multi-column ol { | |
| /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ | |
| column-gap: var( --spacing-100 ); | |
| } | |
| .cdx-docs-multi-columns-2 ol { | |
| /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ | |
| column-count: 2; | |
| } | |
| /* CSS Grid layout */ | |
| @media ( min-width: 640px ) { | |
| .cdx-docs-grid { | |
| display: grid; | |
| } | |
| .cdx-docs-grid-columns-2 { | |
| grid-template-columns: repeat( 2, 1fr ); | |
| grid-gap: var( --spacing-150 ); | |
| } | |
| .cdx-docs-grid-columns-3 { | |
| grid-template-columns: repeat( 3, 1fr ); | |
| grid-gap: var( --spacing-150 ); | |
| } | |
| } | |
| @media ( min-width: 1120px ) { | |
| .cdx-docs-grid-columns-2 { | |
| grid-gap: var( --spacing-200 ); | |
| } | |
| .cdx-docs-grid-columns-3 { | |
| grid-gap: var( --spacing-200 ); | |
| } | |
| } | |
| /* Custom docs. ------------------------------------------------------------ */ | |
| /* Class for visually hidden text for supporting assistive technology. | |
| Equal to `.screen-reader-text()` Less mixin. */ | |
| .vp-doc .cdx-docs-is-visually-hidden { | |
| display: block; | |
| clip: rect( var( --size-absolute-1 ), var( --size-absolute-1 ), var( --size-absolute-1 ), var( --size-absolute-1 ) ); | |
| /* stylelint-disable-next-line declaration-no-important */ | |
| position: absolute !important; | |
| width: var( --size-absolute-1 ); | |
| height: var( --size-absolute-1 ); | |
| /* Use negative `--size` token here as they are inherently connected. */ | |
| margin: var( --size-absolute-1 ); | |
| border: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /* Styles for the "developer notes" accordions. */ | |
| .vp-doc .cdx-accordion { | |
| margin-top: var( --spacing-75 ); | |
| } | |
| .vp-doc .cdx-accordion summary { | |
| /* Undo VitePress margins, which are excessive (margins for `<p>` and heading `<h1>`–`<h6>` | |
| elements will suffice). */ | |
| margin: 0; | |
| } | |
| .cdx-accordion__content p:first-child { | |
| margin-top: 0; | |
| } | |
| .cdx-accordion__content p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .cdx-docs-table-wrapper { | |
| /* Enable horizontal scroll on child tables. */ | |
| overflow-x: auto; | |
| } | |
| /* Added specificity to override VitePress style. */ | |
| .vp-doc tr.cdx-docs-table-row--warning { | |
| background-color: var( --background-color-warning-subtle ); | |
| } | |
| /* Make every tokens table content smaller aside of the token demo. */ | |
| .vp-doc .cdx-docs-tokens-table__value { | |
| font-size: var( --font-size-medium ); | |
| } | |
| .vp-doc .cdx-docs-tokens-table__value > p { | |
| font-size: var( --font-size-small ); | |
| } | |
| .vp-doc .cdx-docs-tokens-table__name .cdx-docs-copy-text-button { | |
| /* Override CdxButton styles. */ | |
| margin-left: var( --spacing-25 ); | |
| } | |
| /* Override VitePress style when using CdxTable. */ | |
| .vp-doc .cdx-docs-tokens-table table.cdx-table__table { | |
| margin: 0; | |
| thead tr, | |
| tbody tr { | |
| border-top: 0; | |
| } | |
| thead th { | |
| background-color: inherit; | |
| border-top: 0; | |
| border-right: 0; | |
| border-left: 0; | |
| } | |
| tbody td { | |
| border-right: 0; | |
| border-left: 0; | |
| code { | |
| color: var( --color-base ); | |
| } | |
| } | |
| } | |
| .cdx-docs-required-indicator { | |
| margin-left: var( --spacing-25 ); | |
| } | |
| /* Higher specificity to override VitePress internal `.vp-doc ul`. */ | |
| .vp-doc ul.cdx-docs-methods__params { | |
| margin: 0; | |
| } | |
| .cdx-docs-example img { | |
| background-color: var( --background-color-interactive-subtle ); | |
| } | |
| /* Set subtle background color on component demo and mixins image assets. | |
| This is scoped pretty narrowly because we don't want to accidentally | |
| apply a background color to any visual elements used for styling or | |
| branding purposes in the future. */ | |
| .vp-doc[ class*='_components' ] img { | |
| background-color: var( --background-color-interactive-subtle ); | |
| /* Center images that are less than full width. */ | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| /* Maintain a light background to match the image's background. */ | |
| html.dark .cdx-docs-example img, | |
| html.dark .vp-doc[ class*='_components' ] img { | |
| background-color: var( --background-color-inverted ); | |
| } | |
| /* Background for images that are less than full width. In browsers that don't support `:has()`, | |
| the background color will just not cover the full width of the content section. */ | |
| .vp-doc[ class*='_components' ] p:has( img ) { | |
| background-color: var( --background-color-interactive-subtle ); | |
| width: var( --size-full ); | |
| } | |
| /* Align the figure and figcaption text. */ | |
| .cdx-docs-figure { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| /* Center the figcaption text on smaller screens */ | |
| @media ( max-width: 640px ) { | |
| .cdx-docs-figcaption { | |
| text-align: center; | |
| } | |
| } | |
| /* stylelint-disable-next-line no-descending-specificity */ | |
| .cdx-docs-grid.cdx-docs-content-guidelines p { | |
| margin: var( --spacing-100 ) 0 0; | |
| } | |
| .cdx-docs-content-guidelines ul, | |
| .cdx-docs-content-guidelines ol { | |
| margin-bottom: 0; | |
| } | |
| /* Remove space between paragraph and list in content. */ | |
| .vp-doc p + ul, | |
| .vp-doc p + ol { | |
| margin-top: calc( var( --spacing-50 ) * -1 ); | |
| } | |
| /* Maintain space between paragraph and lists in custom blocks, where `<p>` elements | |
| have no bottom margin. */ | |
| .vp-doc .custom-block ul, | |
| .vp-doc .custom-block ol { | |
| margin: var( --spacing-50 ) 0; | |
| } | |
| @media ( min-width: 640px ) { | |
| .cdx-docs-grid.cdx-docs-content-guidelines p { | |
| margin: 0; | |
| } | |
| } | |
| /* Customize target text highlight color. */ | |
| ::target-text { | |
| background-color: var( --background-color-target-text ); | |
| } | |
| /* stylelint-enable selector-class-pattern */ |
US