diff --git a/docs/src/theme/ColorModeToggle/index.js b/docs/src/theme/ColorModeToggle/index.js deleted file mode 100644 index 5a3d2c3b44..0000000000 --- a/docs/src/theme/ColorModeToggle/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import useIsBrowser from '@docusaurus/useIsBrowser'; -import { translate } from '@docusaurus/Translate'; -import IconLightMode from '@theme/Icon/LightMode'; -import IconDarkMode from '@theme/Icon/DarkMode'; -import styles from './styles.module.css'; -import { useColorScheme } from '@mui/material'; -import usePageType from '@site/src/hooks/usePageType'; -function ColorModeToggle({ className, buttonClassName, value, onChange }) { - const isBrowser = useIsBrowser(); - /* Color scheme switcher from MUI framework. */ - const { setMode } = useColorScheme(); - const { isLanding } = usePageType(); - - const title = translate( - { - message: 'Switch between dark and light mode (currently {mode})', - id: 'theme.colorToggle.ariaLabel', - description: 'The ARIA label for the navbar color mode toggle', - }, - { - mode: - value === 'dark' - ? translate({ - message: 'dark mode', - id: 'theme.colorToggle.ariaLabel.mode.dark', - description: 'The name for the dark color mode', - }) - : translate({ - message: 'light mode', - id: 'theme.colorToggle.ariaLabel.mode.light', - description: 'The name for the light color mode', - }), - } - ); - - const changeTheme = (value) => { - onChange(value); // Default theme switcher - setMode(value); // Color scheme switcher from MUI - }; - - return ( -
- -
- ); -} -export default React.memo(ColorModeToggle); diff --git a/docs/src/theme/ColorModeToggle/styles.module.css b/docs/src/theme/ColorModeToggle/styles.module.css deleted file mode 100644 index c83b157e9b..0000000000 --- a/docs/src/theme/ColorModeToggle/styles.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.toggle { - height: calc(0.8 * var(--swm-logo-height)); - width: calc(1.6 * var(--swm-logo-height)); - - margin-right: 0; -} - -.toggleButton { - -webkit-tap-highlight-color: transparent; - - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 100%; - - border: 1px solid var(--swm-color-mode-enabled); - border-radius: 0; - box-shadow: none; - - transition: background var(--ifm-transition-fast); -} - -.toggleButton:hover { - background: var(--ifm-color-emphasis-200); -} - -.toggleButtonLanding.toggleButton:hover { - background: var(--swm-navy-light-20); -} - -.toggleButtonLanding { - border: 1px solid var(--swm-navy-light-100); -} - -[data-theme='dark'] .toggleButtonLanding { - border: 1px solid var(--swm-off-white); -} - -.toggleButtonDisabled { - cursor: not-allowed; -} - -.iconContainer { - display: flex; - align-items: center; - justify-content: center; - - flex: 1; - height: 100%; - - color: var(--swm-color-mode-disabled-color); -} - -.iconContainer svg { - width: 65%; - height: 65%; -} - -.iconLandingContainer { - color: var(--swm-landing-heading); -} - -.darkIconContainer { - flex: 1; - height: 100%; - transform: scaleX(-1); -} - -[data-theme='dark'] .darkToggleIcon, -[data-theme='light'] .lightToggleIcon { - color: var(--ifm-font-color-base); - background-color: var(--swm-color-mode-enabled); -} - -[data-theme='light'] .iconLandingContainer.lightToggleIcon { - color: var(--swm-white); - background-color: var(--ifm-font-color-base); -} -[data-theme='dark'] .iconLandingContainer.darkToggleIcon { - color: var(--swm-purple-dark-120); - background-color: var(--ifm-font-color-base); -} diff --git a/docs/src/theme/Logo/LogoStyling.tsx b/docs/src/theme/Logo/LogoStyling.tsx deleted file mode 100644 index 17ab55d135..0000000000 --- a/docs/src/theme/Logo/LogoStyling.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common'; -import ThemedImage from '@theme/ThemedImage'; -import type { Props } from '@theme/Logo'; -import usePageType from '@site/src/hooks/usePageType'; -import styles from './styles.module.css'; - -interface LogoProps extends Props { - readonly titleImages?: { light: string; dark: string }; - readonly heroImages?: { - logo: string; - title: string; - }; -} - -const getWrappedImage = (className: string, image: JSX.Element) => { - return className ?
{image}
: image; -}; - -const LogoThemedImage = ({ - logo, - alt, - imageClassName, -}: { - logo: NavbarLogo; - alt: string; - imageClassName?: string; -}) => { - const sources = { - light: useBaseUrl(logo.src), - dark: useBaseUrl(logo.srcDark || logo.src), - }; - const themedImage = ( - - ); - - // Is this extra div really necessary? - // introduced in https://github.com/facebook/docusaurus/pull/5666 - return getWrappedImage(imageClassName, themedImage); -}; - -const LogoStyling = (props: LogoProps): JSX.Element => { - const { - siteConfig: { title }, - } = useDocusaurusContext(); - const { - navbar: { title: navbarTitle, logo }, - } = useThemeConfig(); - const { isLanding } = usePageType(); - const { - titleImages, - heroImages, - imageClassName, - titleClassName, - ...propsRest - } = props; - const logoLink = useBaseUrl(logo?.href || '/'); - - // If visible title is shown, fallback alt text should be - // an empty string to mark the logo as decorative. - const fallbackAlt = navbarTitle ? '' : title; - - // Use logo alt text if provided (including empty string), - // and provide a sensible fallback otherwise. - const alt = logo?.alt ?? fallbackAlt; - - const HeroLogo: NavbarLogo = { - src: props.heroImages.logo, - }; - - const titleImage = { - docs: , - }; - - return ( - - {logo && !isLanding ? ( - <> - - - ) : ( - - )} - {titleImages && getWrappedImage(titleClassName, titleImage.docs)} - - ); -}; - -export default LogoStyling; diff --git a/docs/src/theme/Logo/index.js b/docs/src/theme/Logo/index.js deleted file mode 100644 index 861efacf7c..0000000000 --- a/docs/src/theme/Logo/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import LogoStyling from '@site/src/theme/Logo/LogoStyling'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import usePageType from '@site/src/hooks/usePageType'; -import styles from './styles.module.css'; - -export default function LogoWrapper(props) { - const { isLanding } = usePageType(); - - const titleImages = { - light: useBaseUrl('/img/title.svg'), - dark: useBaseUrl('/img/title-dark.svg'), - }; - - const heroImages = { - logo: useBaseUrl('/img/logo-hero.svg'), - title: useBaseUrl('/img/title.svg'), - }; - - return ( -
- -
- ); -} diff --git a/docs/src/theme/Logo/styles.module.css b/docs/src/theme/Logo/styles.module.css deleted file mode 100644 index 0612e058cd..0000000000 --- a/docs/src/theme/Logo/styles.module.css +++ /dev/null @@ -1,62 +0,0 @@ -:root { - --swm-logo-height: 50px; -} - -.navbar__logo { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 230px; -} - -[class*='sidebar'] .navbar__logo { - display: flex; - justify-content: flex-start; - width: 100%; -} - -@media (max-width: 996px) { - .navbar__logo { - width: 50px; - } -} - -.navbar__logo img { - height: var(--swm-logo-height); -} - -/* Hide logo on mobile sidebar */ -[class*='navbar-sidebar'] [class*='navbar__logo'] { - display: none; -} - -/* Logo shown on the sidebar after scrolling down the page. */ -@media (min-width: 996px) { - [class*='sidebar'] [class*='navbar__logo'] { - display: flex; - padding-left: 1.5rem; - align-items: center; - height: 60px; - } -} - -.navbar__title > img { - height: var(--swm-logo-height); - width: 100%; -} -.navbar__title { - margin-left: 1.23rem; - height: var(--swm-logo-height); - width: 177px; -} - -@media (max-width: 996px) { - .navbar__title { - display: none; - } -} - -[class*='DocCategoryGeneratedIndexPage'][class*='title'] { - font-size: var(--swm-h1-font-size); -} diff --git a/docs/src/theme/PaginatorNavLink/styles.module.css b/docs/src/theme/PaginatorNavLink/styles.module.css deleted file mode 100644 index 2f93c6c366..0000000000 --- a/docs/src/theme/PaginatorNavLink/styles.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.pagination { - display: flex; - flex-direction: column; - - padding: 1em 0; - border: none; - - --ifm-pagination-nav-border-radius: 0; -} - -/* Main class for sublabel, used by Docusaurus. */ -[class*='pagination-nav__sublabel'] { - margin-bottom: 0; - color: var(--swm-paginator-sublabel); - - font-size: var(--swm-paginator-sublabel-font-size); - text-transform: var(--swm-paginator-sublabel-text-transform); -} - -.paginationSublabel { - display: flex; - align-items: center; -} - -.paginationNext { - flex-direction: row-reverse; -} - -.paginationPrevious { - justify-content: flex-start; -} - -.paginationArrow { - display: flex; - align-items: center; - justify-content: center; -} - -.paginationNext .paginationArrow { - margin-left: 12px; - margin-right: 6px; -} - -.paginationPrevious .paginationArrow { - margin-left: 6px; - margin-right: 12px; -} - -/* Main class for label, used by Docusaurus. */ -[class*='pagination-nav__label'] { - color: var(--swm-paginator-label); - transition: color 0.25s; - - font-size: var(--swm-paginator-label-font-size); - font-weight: var(--swm-paginator-label-font-weight); -} - -.pagination:hover [class*='pagination-nav__label'] { - color: var(--swm-paginator-label-hover); -} - -/* Remove arrows from labels that are being added by default by Docusaurus. */ -[class*='pagination-nav__label']:before, -[class*='pagination-nav__label']:after { - content: none !important; -} diff --git a/docs/src/theme/SearchBar/index.js b/docs/src/theme/SearchBar/index.js deleted file mode 100644 index 102108fd5e..0000000000 --- a/docs/src/theme/SearchBar/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import SearchBar from '@theme-original/SearchBar'; -import styles from './styles.module.css'; - -export default function SearchBarWrapper(props) { - return ( - <> - - - ); -} diff --git a/docs/src/theme/SearchBar/styles.module.css b/docs/src/theme/SearchBar/styles.module.css deleted file mode 100644 index 2ad6dff42c..0000000000 --- a/docs/src/theme/SearchBar/styles.module.css +++ /dev/null @@ -1,134 +0,0 @@ -[class*='DocSearch-Modal'] { - --docsearch-modal-background: var(--swm-off-background); - --docsearch-spacing: 16px; -} - -@media (max-width: 768px) { - [class*='DocSearch-Modal'] { - --docsearch-spacing: 24px; - } -} - -@media (min-width: 768px) { - [class*='DocSearch-SearchBar'] { - padding: 24px var(--docsearch-spacing) 0 !important; - } -} - -[class*='DocSearch-Footer'] { - --docsearch-footer-height: 52px; - --docsearch-spacing: 18px; -} - -[class*='DocSearch-Form'] { - --docsearch-searchbox-shadow: none; - --docsearch-spacing: 16px; - --docsearch-searchbox-focus-background: var(--swm-searchbar-background); - - border: 1px solid var(--swm-searchbar-border); - border-radius: 0 !important; -} - -[class*='DocSearch-Form'] [class*='DocSearch-Input'] { - padding: 0 0 0 6px; -} - -[class*='DocSearch-Input']::placeholder { - color: var(--swm-searchbar-text-color) !important; -} - -[class*='DocSearch-Hit-source'] { - font-size: 20px !important; - line-height: 1.3 !important; - letter-spacing: var(--swm-heading-letter-spacing-smaller); - - padding: 0 !important; - margin: 24px 0 8px 0 !important; -} - -@media (max-width: 768px) { - [class*='DocSearch-Hit-source'] { - margin: 24px 0 16px 0 !important; - } -} - -[class*='DocSearch-Hit'], -[class*='DocSearch-Hit'] a { - border-radius: 0 !important; -} - -[class*='DocSearch-Hit'] a { - --docsearch-hit-shadow: none; - --docsearch-hit-background: var(--swm-search-hit-background); - border: 1px solid var(--swm-search-hit-border); -} - -[class*='DocSearch-Hit'][aria-selected='true'] a { - --docsearch-highlight-color: var(--swm-search-hit-background-hover); - border: 1px solid var(--swm-search-hit-border-hover); -} - -@media (max-width: 768px) { - [class*='DocSearch-Hit'] a, - [class*='DocSearch-Hit'][aria-selected='true'] a { - border: none; - } -} - -[class*='DocSearch-Hits'] *[aria-selected='false'] { - --docsearch-hit-active-color: var(--ifm-font-color-base) !important; -} - -[class*='DocSearch-Hits'] *[aria-selected='true'] { - --docsearch-hit-active-color: var(--swm-search-hit-active-color) !important; -} - -[class*='DocSearch-Hits'] mark { - text-decoration: underline; - text-underline-offset: 2px; -} - -[class*='DocSearch-Hit-Container'] { - --docsearch-hit-color: var(--ifm-font-color-base); - font-weight: 400; -} - -[class*='DocSearch-Hit-content-wrapper'] { - font-weight: 400 !important; -} - -[class*='DocSearch-Hit-title'] { - font-size: 16px !important; -} - -[class*='DocSearch-Hit-path'], -[class*='DocSearch-Hit-icon'] { - --docsearch-muted-color: var(--ifm-font-color-base); - font-size: 14px !important; -} - -[class*='DocSearch-Hit-action-button'] { - color: var(--docsearch-hit-active-color) !important; -} - -[class*='DocSearch-HitsFooter'] { - --docsearch-muted-color: var(--ifm-font-color-base); - font-size: 18px !important; - padding: 20px var(--docsearch-spacing) 22px var(--docsearch-spacing) !important; -} - -@media (max-width: 768px) { - [class*='DocSearch-HitsFooter'] { - font-size: 12px !important; - padding: 24px var(--docsearch-spacing); - } -} - -[class*='DocSearch-HitsFooter'] a { - border: none; -} - -[class*='DocSearch-Commands-Key'], -[class*='DocSearch-Label'] { - --docsearch-muted-color: var(--swm-search-hit-results-color); -} diff --git a/docs/src/theme/SearchPage/index.js b/docs/src/theme/SearchPage/index.js deleted file mode 100644 index a7899d015f..0000000000 --- a/docs/src/theme/SearchPage/index.js +++ /dev/null @@ -1,479 +0,0 @@ -/* eslint-disable jsx-a11y/no-autofocus */ -import React, { useEffect, useReducer, useRef, useState } from 'react'; -import clsx from 'clsx'; -import algoliaSearchHelper from 'algoliasearch-helper'; -import algoliaSearch from 'algoliasearch/lite'; -import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; -import Head from '@docusaurus/Head'; -import Link from '@docusaurus/Link'; -import { useAllDocsData } from '@docusaurus/plugin-content-docs/client'; -import { - HtmlClassNameProvider, - useEvent, - usePluralForm, - useSearchQueryString, -} from '@docusaurus/theme-common'; -import { useTitleFormatter } from '@docusaurus/theme-common/internal'; -import Translate, { translate } from '@docusaurus/Translate'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { - useAlgoliaThemeConfig, - useSearchResultUrlProcessor, -} from '@docusaurus/theme-search-algolia/client'; -import Layout from '@theme/Layout'; -import ThemedImage from '@theme/ThemedImage'; -import styles from './styles.module.css'; -// Very simple pluralization: probably good enough for now -function useDocumentsFoundPlural() { - const { selectMessage } = usePluralForm(); - return (count) => - selectMessage( - count, - translate( - { - id: 'theme.SearchPage.documentsFound.plurals', - description: - 'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)', - message: 'One document found|{count} documents found', - }, - { count } - ) - ); -} -function useDocsSearchVersionsHelpers() { - const allDocsData = useAllDocsData(); - // State of the version select menus / algolia facet filters - // docsPluginId -> versionName map - const [searchVersions, setSearchVersions] = useState(() => - Object.entries(allDocsData).reduce( - (acc, [pluginId, pluginData]) => ({ - ...acc, - [pluginId]: pluginData.versions[0].name, - }), - {} - ) - ); - // Set the value of a single select menu - const setSearchVersion = (pluginId, searchVersion) => - setSearchVersions((s) => ({ ...s, [pluginId]: searchVersion })); - const versioningEnabled = Object.values(allDocsData).some( - (docsData) => docsData.versions.length > 1 - ); - return { - allDocsData, - versioningEnabled, - searchVersions, - setSearchVersion, - }; -} -// We want to display one select per versioned docs plugin instance -function SearchVersionSelectList({ docsSearchVersionsHelpers }) { - const versionedPluginEntries = Object.entries( - docsSearchVersionsHelpers.allDocsData - ) - // Do not show a version select for unversioned docs plugin instances - .filter(([, docsData]) => docsData.versions.length > 1); - return ( -
- {versionedPluginEntries.map(([pluginId, docsData]) => { - const labelPrefix = - versionedPluginEntries.length > 1 ? `${pluginId}: ` : ''; - return ( - - ); - })} -
- ); -} - -const breadcrumbsArrows = { - light: '/img/breadcrumb-arrow-light.svg', - dark: '/img/breadcrumb-arrow-dark.svg', -}; - -function SearchPageContent() { - const { - i18n: { currentLocale }, - } = useDocusaurusContext(); - const { - algolia: { appId, apiKey, indexName }, - } = useAlgoliaThemeConfig(); - const processSearchResultUrl = useSearchResultUrlProcessor(); - const documentsFoundPlural = useDocumentsFoundPlural(); - const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers(); - const [searchQuery, setSearchQuery] = useSearchQueryString(); - const initialSearchResultState = { - items: [], - query: null, - totalResults: null, - totalPages: null, - lastPage: null, - hasMore: null, - loading: null, - }; - const [searchResultState, searchResultStateDispatcher] = useReducer( - (prevState, data) => { - switch (data.type) { - case 'reset': { - return initialSearchResultState; - } - case 'loading': { - return { ...prevState, loading: true }; - } - case 'update': { - if (searchQuery !== data.value.query) { - return prevState; - } - return { - ...data.value, - items: - data.value.lastPage === 0 - ? data.value.items - : prevState.items.concat(data.value.items), - }; - } - case 'advance': { - const hasMore = prevState.totalPages > prevState.lastPage + 1; - return { - ...prevState, - lastPage: hasMore ? prevState.lastPage + 1 : prevState.lastPage, - hasMore, - }; - } - default: - return prevState; - } - }, - initialSearchResultState - ); - const algoliaClient = algoliaSearch(appId, apiKey); - const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, { - hitsPerPage: 15, - advancedSyntax: true, - disjunctiveFacets: ['language', 'docusaurus_tag'], - }); - algoliaHelper.on( - 'result', - ({ results: { query, hits, page, nbHits, nbPages } }) => { - if (query === '' || !Array.isArray(hits)) { - searchResultStateDispatcher({ type: 'reset' }); - return; - } - const sanitizeValue = (value) => - value.replace( - /algolia-docsearch-suggestion--highlight/g, - 'search-result-match' - ); - const items = hits.map( - ({ - url, - _highlightResult: { hierarchy }, - _snippetResult: snippet = {}, - }) => { - const titles = Object.keys(hierarchy).map((key) => - sanitizeValue(hierarchy[key].value) - ); - return { - title: titles.pop(), - url: processSearchResultUrl(url), - summary: snippet.content - ? `${sanitizeValue(snippet.content.value)}...` - : '', - breadcrumbs: titles, - }; - } - ); - searchResultStateDispatcher({ - type: 'update', - value: { - items, - query, - totalResults: nbHits, - totalPages: nbPages, - lastPage: page, - hasMore: nbPages > page + 1, - loading: false, - }, - }); - } - ); - const [loaderRef, setLoaderRef] = useState(null); - const prevY = useRef(0); - const observer = useRef( - ExecutionEnvironment.canUseIntersectionObserver && - new IntersectionObserver( - (entries) => { - const { - isIntersecting, - boundingClientRect: { y: currentY }, - } = entries[0]; - if (isIntersecting && prevY.current > currentY) { - searchResultStateDispatcher({ type: 'advance' }); - } - prevY.current = currentY; - }, - { threshold: 1 } - ) - ); - const getTitle = () => - searchQuery - ? translate( - { - id: 'theme.SearchPage.existingResultsTitle', - message: 'Search results for "{query}"', - description: 'The search page title for non-empty query', - }, - { - query: searchQuery, - } - ) - : translate({ - id: 'theme.SearchPage.emptyResultsTitle', - message: 'Search the documentation', - description: 'The search page title for empty query', - }); - const makeSearch = useEvent((page = 0) => { - algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default'); - algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale); - Object.entries(docsSearchVersionsHelpers.searchVersions).forEach( - ([pluginId, searchVersion]) => { - algoliaHelper.addDisjunctiveFacetRefinement( - 'docusaurus_tag', - `docs-${pluginId}-${searchVersion}` - ); - } - ); - algoliaHelper.setQuery(searchQuery).setPage(page).search(); - }); - useEffect(() => { - if (!loaderRef) { - return undefined; - } - const currentObserver = observer.current; - if (currentObserver) { - currentObserver.observe(loaderRef); - return () => currentObserver.unobserve(loaderRef); - } - return () => true; - }, [loaderRef]); - useEffect(() => { - searchResultStateDispatcher({ type: 'reset' }); - if (searchQuery) { - searchResultStateDispatcher({ type: 'loading' }); - setTimeout(() => { - makeSearch(); - }, 300); - } - }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]); - useEffect(() => { - if (!searchResultState.lastPage || searchResultState.lastPage === 0) { - return; - } - makeSearch(searchResultState.lastPage); - }, [makeSearch, searchResultState.lastPage]); - return ( - - - {useTitleFormatter(getTitle())} - {/* - We should not index search pages - See https://github.com/facebook/docusaurus/pull/3233 - */} - - - -
-

{getTitle()}

- -
e.preventDefault()}> -
- setSearchQuery(e.target.value)} - value={searchQuery} - autoComplete="off" - autoFocus - /> -
- - {docsSearchVersionsHelpers.versioningEnabled && ( - - )} - - -
-
- {!!searchResultState.totalResults && - documentsFoundPlural(searchResultState.totalResults)} -
- - -
- - {searchResultState.items.length > 0 ? ( -
- {searchResultState.items.map( - ({ title, url, summary, breadcrumbs }, i) => ( -
-

- -

- - {breadcrumbs.length > 0 && ( - - )} - - {summary && ( -

- )} -

- ) - )} -
- ) : ( - [ - searchQuery && !searchResultState.loading && ( -

- - No results were found - -

- ), - !!searchResultState.loading && ( -
- ), - ] - )} - - {searchResultState.hasMore && ( -
- - Fetching new results... - -
- )} -
- - ); -} -export default function SearchPage() { - return ( - - - - ); -} diff --git a/docs/src/theme/SearchPage/styles.module.css b/docs/src/theme/SearchPage/styles.module.css deleted file mode 100644 index 3a2f012d4f..0000000000 --- a/docs/src/theme/SearchPage/styles.module.css +++ /dev/null @@ -1,164 +0,0 @@ -.searchContainer { - width: 60%; -} - -.searchQueryLabel { - margin-bottom: 21px; -} - -.searchQueryInput, -.searchVersionInput { - border-radius: 0; - border: 1px solid var(--swm-searchbar-border); - font: var(--ifm-font-size-base) var(--ifm-font-family-base); - padding: 1rem 20px; - width: 100%; - background: var(--swm-searchbar-background); - color: var(--swm-search-page-query-text-color); - margin-bottom: 0.5rem; - transition: border var(--ifm-transition-fast) ease; -} - -.searchQueryInput:focus, -.searchVersionInput:focus { - border-color: var(--swm-searchbar-border-hover); - outline: none; -} - -.searchQueryInput::placeholder { - color: var(--docsearch-muted-color); -} - -.searchResultsRow { - margin: 46px 0 51px 0; -} - -.searchResultsColumn { - font-size: 18px; - padding: 0; -} - -.searchLogoColumn { - padding: 0; -} - -.algoliaLogo { - max-width: 150px; -} - -.algoliaLogoPathFill { - fill: var(--ifm-font-color-base); -} - -.searchResultItem { - padding: 1rem 0; -} - -.searchResultItem:not(:last-child) { - border-bottom: 1px solid var(--swm-searchbar-border); -} - -.searchResultItemHeading { - margin-bottom: 0; - - color: var(--ifm-font-color-base); - font-weight: var(--swm-search-page-heading-font-weight); - font-size: var(--swm-h3-font-size); -} - -.searchResultItem [class*='breadcrumbs__item'] { - color: var(--ifm-font-color-base); - font-size: 16px; -} - -.searchResultItem [class*='breadcrumbs__item']::after { - display: none; -} - -.breadcrumbArrow { - margin: 0 var(--ifm-breadcrumb-spacing); -} - -.searchResultItemPath { - --ifm-breadcrumb-separator-size-multiplier: 1; - margin-top: 0.5rem; - - color: var(--ifm-color-content-secondary); - font-size: 0.8rem; -} - -.searchResultItemSummary { - margin: 0.5rem 0 0; - font-size: 14px; -} - -.searchResultItemSeparator { - --ifm-hr-background-color: var(--swm-navy-light-20); - margin: 0; -} - -@media only screen and (max-width: 996px) { - .searchContainer { - width: 100%; - } - - .searchVersionColumn { - max-width: 40% !important; - } - - .searchResultsColumn { - max-width: 60% !important; - } - - .searchLogoColumn { - max-width: 40% !important; - padding-left: 0 !important; - } -} - -@media screen and (max-width: 576px) { - .searchQueryColumn { - max-width: 100% !important; - } - - .searchVersionColumn { - max-width: 100% !important; - padding-left: var(--ifm-spacing-horizontal) !important; - } -} - -.loadingSpinner { - width: 3rem; - height: 3rem; - border: 0.4em solid var(--swm-navy-light-10); - border-top-color: var(--swm-navy-light-80); - border-radius: 50%; - animation: loading-spin 1s linear infinite; - margin: 0 auto; -} - -@keyframes loading-spin { - 100% { - transform: rotate(360deg); - } -} - -.loader { - margin-top: 2rem; -} - -:global(.search-result-match) { - padding: 0.09em 0; - - font-style: inherit; - text-decoration: underline; - text-decoration-skip-ink: none; - text-underline-offset: 2px; -} - -/* Larger underline offset in headings */ -[class*='searchResultItemHeading'] [class*='search-result-match'], -[class*='searchResultItemHeading']:hover { - text-underline-offset: 4px; - text-decoration-skip-ink: none; -}