From a358695c256595bd256a029f3e3cd1a3e9f84026 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 9 Jul 2020 10:54:38 +0200 Subject: [PATCH] feat(docsearch): introduce DocSearch.js v3 (#56) --- package.json | 8 +- src/style.css | 762 ----------------------------------- src/styles/_variables.css | 74 ---- src/styles/modal.css | 624 ---------------------------- src/styles/search-button.css | 66 --- style.js | 4 +- 6 files changed, 4 insertions(+), 1534 deletions(-) delete mode 100644 src/style.css delete mode 100644 src/styles/_variables.css delete mode 100644 src/styles/modal.css delete mode 100644 src/styles/search-button.css diff --git a/package.json b/package.json index 21c49f94d..34da1e1d7 100644 --- a/package.json +++ b/package.json @@ -23,19 +23,17 @@ "unpkg": "dist/umd/index.js", "jsdelivr": "dist/umd/index.js", "scripts": { - "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:css", - "": "// TODO: have a proper build:css, probably including autoprefixer?", - "build:css": "cp src/styles/*.css dist/", - "build:css:watch": "chokidar src/styles/*.css --command \"yarn build:css\"", + "build": "yarn build:clean && yarn build:umd && yarn build:esm", "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm", "build:esm:watch": "yarn build:esm --watch", "build:umd": "rollup --config", "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm", "build:types:watch": "chokidar \"**/*.ts\" \"**/*.tsx\" --command \"yarn build:types\" --ignore \"dist\"", "build:clean": "rm -rf ./dist", - "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\" \"yarn build:css:watch\"" + "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\"" }, "dependencies": { + "@docsearch/css": "^1.0.0-alpha.21", "@francoischalifour/autocomplete-core": "^1.0.0-alpha.21", "@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.21", "algoliasearch": "^4.0.0" diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 81cbffd0e..000000000 --- a/src/style.css +++ /dev/null @@ -1,762 +0,0 @@ -/* Variables */ - -:root { - --docsearch-primary-color: rgb(84, 104, 255); - --docsearch-spacing: 12px; - --docsearch-icon-stroke-width: 1.4; - --docsearch-highlight-color: var(--docsearch-primary-color); - --docsearch-text-color: var(--ifm-color-emphasis-900); - --docsearch-muted-color: rgb(150, 159, 175); - --docsearch-container-background: rgba(101, 108, 133, 0.8); - --docsearch-logo-color: rgba(84, 104, 255); - - /* modal */ - --docsearch-modal-width: 560px; - --docsearch-modal-height: 600px; - --docsearch-modal-background: var(--ifm-color-emphasis-100); - --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), - 0 3px 8px 0 rgba(85, 90, 100, 1); - - /* searchbox */ - --docsearch-searchbox-height: 56px; - --docsearch-searchbox-background: var(--ifm-color-emphasis-200); - --docsearch-searchbox-focus-background: #fff; - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); - - /* hit */ - --docsearch-hit-height: 56px; - --docsearch-hit-color: var(--ifm-color-emphasis-800); - --docsearch-hit-active-color: #fff; - --docsearch-hit-background: #fff; - --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225); - - /* key */ - --docsearch-key-gradient: linear-gradient( - -225deg, - rgb(213, 219, 228) 0%, - rgb(248, 248, 248) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), - inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4); - - /* footer */ - --docsearch-footer-height: 44px; - --docsearch-footer-background: #fff; - --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), - 0 -3px 6px 0 rgba(69, 98, 155, 0.12); -} - -/* Darkmode */ - -html[data-theme='dark'] { - --docsearch-container-background: rgba(9, 10, 17, 0.8); - --docsearch-modal-background: rgb(21, 23, 42); - --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), - 0 3px 8px 0 rgb(0, 3, 9); - --docsearch-searchbox-background: rgb(9, 10, 17); - --docsearch-searchbox-focus-background: #000; - --docsearch-hit-color: var(--ifm-color-emphasis-500); - --docsearch-hit-shadow: none; - --docsearch-hit-background: rgb(9, 10, 17); - --docsearch-key-gradient: linear-gradient( - -26.56505117707799deg, - rgb(86, 88, 114) 0%, - rgb(49, 53, 91) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), - inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3); - --docsearch-footer-background: rgb(30, 33, 54); - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), - 0 -4px 8px 0 rgba(0, 0, 0, 0.2); - --docsearch-logo-color: rgb(255, 255, 255); - --docsearch-muted-color: rgb(127, 132, 151); -} - -/* Search Button */ - -.DocSearch-SearchButton { - align-items: center; - background: var(--docsearch-searchbox-background); - border: 0; - border-radius: 40px; - color: var(--docsearch-text-color); - color: var(--docsearch-muted-color); - cursor: pointer; - display: flex; - font-weight: 500; - height: 36px; - margin: 0 0 0 16px; - padding: 0 8px; - user-select: none; -} - -.DocSearch-SearchButton:hover, -.DocSearch-SearchButton:active, -.DocSearch-SearchButton:focus { - background: var(--docsearch-searchbox-focus-background); - box-shadow: var(--docsearch-searchbox-shadow); - color: var(--docsearch-text-color); - outline: none; -} - -.DocSearch-Search-Icon { - stroke-width: 1.6; -} - -.DocSearch-SearchButton .DocSearch-Search-Icon { - color: var(--docsearch-text-color); -} - -.DocSearch-SearchButton-Placeholder { - font-size: 1rem; - padding: 0 12px 0 6px; -} - -.DocSearch-SearchButton-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 3px; - box-shadow: var(--docsearch-key-shadow); - color: var(--docsearch-muted-color); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding-bottom: 2px; - position: relative; - top: -1px; - width: 20px; -} - -/* Body modifier */ - -.DocSearch--active { - /* - * We need to mark it as important because some websites override the - * `style` attribute (e.g. Docusaurus). - */ - overflow: hidden !important; -} - -/* Container & Modal */ - -.DocSearch-Container, -.DocSearch-Container * { - box-sizing: border-box; -} - -.DocSearch-Container { - background-color: var(--docsearch-container-background); - height: 100vh; - left: 0; - position: fixed; - top: 0; - width: 100vw; - z-index: var(--ifm-z-index-fixed); -} - -.DocSearch-Container a { - text-decoration: none; -} - -.DocSearch-Link { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - font: inherit; - margin: 0; - padding: 0; -} - -.DocSearch-Modal { - background: var(--docsearch-modal-background); - border-radius: 6px; - box-shadow: var(--docsearch-modal-shadow); - flex-direction: column; - margin: 60px auto auto; - max-width: var(--docsearch-modal-width); - position: relative; -} - -/* Modal Searchbox */ - -.DocSearch-SearchBar { - display: flex; - padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; -} - -.DocSearch-Form { - align-items: center; - background: var(--docsearch-searchbox-focus-background); - border-radius: 4px; - box-shadow: var(--docsearch-searchbox-shadow); - display: flex; - height: var(--docsearch-searchbox-height); - padding: 0 var(--docsearch-spacing); - position: relative; - width: 100%; -} - -.DocSearch-Input { - appearance: none; - background: transparent; - border: 0; - color: var(--docsearch-text-color); - flex: 1; - font: inherit; - font-size: 1.2em; - height: 100%; - outline: none; - padding-left: 8px; - width: 80%; -} - -.DocSearch-Input::placeholder { - color: var(--docsearch-muted-color); -} - -.DocSearch-Input::-webkit-search-cancel-button, -.DocSearch-Input::-webkit-search-decoration, -.DocSearch-Input::-webkit-search-results-button, -.DocSearch-Input::-webkit-search-results-decoration { - display: none; -} - -.DocSearch-LoadingIndicator, -.DocSearch-MagnifierLabel, -.DocSearch-Reset { - margin: 0; - padding: 0; -} - -.DocSearch-MagnifierLabel, -.DocSearch-Reset { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; -} - -.DocSearch-Container--Stalled .DocSearch-MagnifierLabel { - display: none; -} - -.DocSearch-LoadingIndicator { - display: none; -} - -.DocSearch-Container--Stalled .DocSearch-LoadingIndicator { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Reset { - animation: none; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); - } -} - -.DocSearch-Reset { - animation: fade-in 0.1s ease-in forwards; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - padding: 2px; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); -} - -.DocSearch-Reset[hidden] { - display: none; -} - -.DocSearch-Reset:focus { - outline: none; -} - -.DocSearch-Reset:hover { - color: var(--docsearch-highlight-color); -} - -.DocSearch-LoadingIndicator svg, -.DocSearch-MagnifierLabel svg { - height: 24px; - width: 24px; -} - -.DocSearch-Cancel { - display: none; -} - -/* Modal Dropdown */ - -.DocSearch-Dropdown { - max-height: calc( - var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - - var(--docsearch-spacing) - var(--docsearch-footer-height) - ); - overflow-y: auto; /* firefox */ - overflow-y: overlay; - padding: 0 var(--docsearch-spacing); - scrollbar-color: var(--docsearch-muted-color) - var(--docsearch-modal-background); - scrollbar-width: thin; -} - -.DocSearch-Dropdown::-webkit-scrollbar { - width: 12px; -} - -.DocSearch-Dropdown::-webkit-scrollbar-track { - background: transparent; -} - -.DocSearch-Dropdown::-webkit-scrollbar-thumb { - background-color: var(--docsearch-muted-color); - border: 3px solid var(--docsearch-modal-background); - border-radius: 20px; -} - -.DocSearch-Dropdown ul { - list-style: none; - margin: 0; - padding: 0; -} - -.DocSearch-Label { - color: var(--docsearch-muted-color); - font-size: 0.75em; - line-height: 1.6em; -} - -.DocSearch-Help { - color: var(--docsearch-muted-color); - font-size: 0.9em; - margin: 0; - user-select: none; -} - -.DocSearch-Title { - font-size: 1.2em; -} - -.DocSearch-Logo a { - display: flex; -} - -.DocSearch-Logo svg { - color: var(--docsearch-logo-color); - margin-left: 8px; -} - -/* Hit */ - -.DocSearch-Hits:last-of-type { - margin-bottom: 24px; -} - -.DocSearch-Hits mark { - background: none; - color: var(--docsearch-highlight-color); -} - -.DocSearch-HitsFooter { - color: var(--docsearch-muted-color); - display: flex; - font-size: 0.85em; - justify-content: center; - margin-bottom: var(--docsearch-spacing); - padding: var(--docsearch-spacing); -} - -.DocSearch-HitsFooter a { - border-bottom: 1px solid; - color: inherit; -} - -.DocSearch-Hit { - border-radius: 4px; - display: flex; - padding-bottom: 4px; - position: relative; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--deleting { - transition: none; - } -} - -.DocSearch-Hit--deleting { - opacity: 0; - transition: all 250ms linear; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--favoriting { - transition: none; - } -} - -.DocSearch-Hit--favoriting { - transform: scale(0); - transform-origin: top center; - transition: all 250ms linear; - transition-delay: 250ms; -} - -.DocSearch-Hit a { - background: var(--docsearch-hit-background); - border-radius: 4px; - box-shadow: var(--docsearch-hit-shadow); - display: block; - padding-left: var(--docsearch-spacing); - width: 100%; -} - -.DocSearch-Hit-source { - background: var(--docsearch-modal-background); - color: var(--docsearch-highlight-color); - font-size: 0.85em; - font-weight: 600; - line-height: 32px; - margin: 0 -4px; - padding: 8px 4px 0; - position: sticky; - top: 0; - z-index: 10; -} - -.DocSearch-Hit-Tree { - color: var(--docsearch-muted-color); - height: var(--docsearch-hit-height); - opacity: 0.5; - stroke-width: var(--docsearch-icon-stroke-width); - width: 24px; -} - -.DocSearch-Hit[aria-selected='true'] a { - background-color: var(--docsearch-highlight-color); -} - -.DocSearch-Hit[aria-selected='true'] mark { - text-decoration: underline; -} - -.DocSearch-Hit-Container { - align-items: center; - color: var(--docsearch-hit-color); - display: flex; - flex-direction: row; - height: var(--docsearch-hit-height); - padding: 0 var(--docsearch-spacing) 0 0; -} - -.DocSearch-Hit-icon { - color: var(--docsearch-muted-color); - height: 20px; - stroke-width: var(--docsearch-icon-stroke-width); - width: 20px; -} - -.DocSearch-Hit-action { - align-items: center; - color: var(--docsearch-muted-color); - display: flex; - height: 22px; - stroke-width: var(--docsearch-icon-stroke-width); - width: 22px; -} - -.DocSearch-Hit-action svg { - display: block; - height: 18px; - width: 18px; -} - -.DocSearch-Hit-action + .DocSearch-Hit-action { - margin-left: 6px; -} - -.DocSearch-Hit-action-button { - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: inherit; - cursor: pointer; - padding: 2px; -} - -svg.DocSearch-Hit-Select-Icon { - display: none; -} - -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon { - display: block; -} - -.DocSearch-Hit-action-button:hover, -.DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: background-color 0.1s ease-in; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - transition: none; - } -} - -.DocSearch-Hit-action-button:hover path, -.DocSearch-Hit-action-button:focus path { - fill: #fff; -} - -.DocSearch-Hit-content-wrapper { - display: flex; - flex: 1 1 auto; - flex-direction: column; - font-weight: 500; - justify-content: center; - line-height: 1.2em; - margin: 0 8px; - overflow-x: hidden; - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - width: 80%; -} - -.DocSearch-Hit-title { - font-size: 0.9em; -} - -.DocSearch-Hit-path { - color: var(--docsearch-muted-color); - font-size: 0.75em; -} - -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, -.DocSearch-Hit[aria-selected='true'] mark, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree { - color: var(--docsearch-hit-active-color) !important; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -/* No Results - Start Screen - Error Screen */ - -.DocSearch-NoResults, -.DocSearch-StartScreen, -.DocSearch-ErrorScreen { - font-size: 0.9em; - margin: 0 auto; - padding: 36px 0; - text-align: center; - width: 80%; -} - -.DocSearch-Screen-Icon { - color: var(--docsearch-muted-color); - padding-bottom: 12px; -} - -.DocSearch-NoResults-Prefill-List { - display: inline-block; - padding-bottom: 24px; - text-align: left; -} - -.DocSearch-NoResults-Prefill-List ul { - display: inline-block; - padding: 8px 0 0; -} - -.DocSearch-NoResults-Prefill-List li { - list-style-position: inside; - list-style-type: '» '; -} - -.DocSearch-Prefill { - appearance: none; - background: none; - border: 0; - border-radius: 1em; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 700; - padding: 0; -} - -.DocSearch-Prefill:hover, -.DocSearch-Prefill:focus { - outline: none; - text-decoration: underline; -} - -/* Modal Footer */ - -.DocSearch-Footer { - align-items: center; - background: var(--docsearch-footer-background); - border-radius: 0 0 8px 8px; - box-shadow: var(--docsearch-footer-shadow); - display: flex; - flex-direction: row-reverse; - flex-shrink: 0; - height: var(--docsearch-footer-height); - justify-content: space-between; - padding: 0 var(--docsearch-spacing); - position: relative; - user-select: none; - width: 100%; - z-index: 300; -} - -.DocSearch-Commands { - color: var(--docsearch-muted-color); - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.DocSearch-Commands li { - align-items: center; - display: flex; -} - -.DocSearch-Commands li:not(:last-of-type) { - margin-right: 0.8em; -} - -.DocSearch-Commands-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 2px; - box-shadow: var(--docsearch-key-shadow); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding-bottom: 2px; - width: 20px; -} - -/* Responsive */ -@media (max-width: 750px) { - :root { - --docsearch-spacing: 10px; - --docsearch-footer-height: 40px; - } - - .DocSearch--active #__docusaurus { - display: none; - } - - .DocSearch-SearchButton-KeySeparator, - .DocSearch-SearchButton-Key { - display: none; - } - - .DocSearch-SearchButton-Placeholder { - display: none; - } - - .DocSearch-Dropdown { - height: 100%; - } - - .DocSearch-Container { - height: 100vh; - height: -webkit-fill-available; - position: absolute; - } - - .DocSearch-Footer { - border-radius: 0; - bottom: 0; - position: absolute; - } - - .DocSearch-Hit-content-wrapper { - display: flex; - position: relative; - width: 80%; - } - - .DocSearch-Modal { - border-radius: 0; - box-shadow: none; - height: 100vh; - height: -webkit-fill-available; - margin: 0; - max-width: 100%; - width: 100%; - } - - .DocSearch-Cancel { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - flex: none; - font: inherit; - font-size: 1em; - font-weight: 500; - margin-left: var(--docsearch-spacing); - outline: none; - overflow: hidden; - padding: 0; - user-select: none; - white-space: nowrap; - } - - .DocSearch-Commands { - display: none; - } - - .DocSearch-Hit-Tree { - display: none; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/src/styles/_variables.css b/src/styles/_variables.css deleted file mode 100644 index d59766d95..000000000 --- a/src/styles/_variables.css +++ /dev/null @@ -1,74 +0,0 @@ -/* Variables */ - -:root { - --docsearch-primary-color: rgb(84, 104, 255); - --docsearch-text-color: rgb(28, 30, 33); - --docsearch-spacing: 12px; - --docsearch-icon-stroke-width: 1.4; - --docsearch-highlight-color: var(--docsearch-primary-color); - --docsearch-muted-color: rgb(150, 159, 175); - --docsearch-container-background: rgba(101, 108, 133, 0.8); - --docsearch-logo-color: rgba(84, 104, 255); - - /* modal */ - --docsearch-modal-width: 560px; - --docsearch-modal-height: 600px; - --docsearch-modal-background: rgb(245, 246, 247); - --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), - 0 3px 8px 0 rgba(85, 90, 100, 1); - - /* searchbox */ - --docsearch-searchbox-height: 56px; - --docsearch-searchbox-background: rgb(235, 237, 240); - --docsearch-searchbox-focus-background: #fff; - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); - - /* hit */ - --docsearch-hit-height: 56px; - --docsearch-hit-color: rgb(68, 73, 80); - --docsearch-hit-active-color: #fff; - --docsearch-hit-background: #fff; - --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225); - - /* key */ - --docsearch-key-gradient: linear-gradient( - -225deg, - rgb(213, 219, 228) 0%, - rgb(248, 248, 248) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), - inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4); - - /* footer */ - --docsearch-footer-height: 44px; - --docsearch-footer-background: #fff; - --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), - 0 -3px 6px 0 rgba(69, 98, 155, 0.12); -} - -/* Darkmode */ - -html[data-theme='dark'] { - --docsearch-text-color: rgb(245, 246, 247); - --docsearch-container-background: rgba(9, 10, 17, 0.8); - --docsearch-modal-background: rgb(21, 23, 42); - --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), - 0 3px 8px 0 rgb(0, 3, 9); - --docsearch-searchbox-background: rgb(9, 10, 17); - --docsearch-searchbox-focus-background: #000; - --docsearch-hit-color: rgb(190, 195, 201); - --docsearch-hit-shadow: none; - --docsearch-hit-background: rgb(9, 10, 17); - --docsearch-key-gradient: linear-gradient( - -26.5deg, - rgb(86, 88, 114) 0%, - rgb(49, 53, 91) 100% - ); - --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), - inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3); - --docsearch-footer-background: rgb(30, 33, 54); - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), - 0 -4px 8px 0 rgba(0, 0, 0, 0.2); - --docsearch-logo-color: rgb(255, 255, 255); - --docsearch-muted-color: rgb(127, 132, 151); -} diff --git a/src/styles/modal.css b/src/styles/modal.css deleted file mode 100644 index 807d02368..000000000 --- a/src/styles/modal.css +++ /dev/null @@ -1,624 +0,0 @@ -/* Body modifier */ - -.DocSearch--active { - /* - * We need to mark it as important because some websites override the - * `style` attribute (e.g. Docusaurus). - */ - overflow: hidden !important; -} - -/* Container & Modal */ - -.DocSearch-Container, -.DocSearch-Container * { - box-sizing: border-box; -} - -.DocSearch-Container { - background-color: var(--docsearch-container-background); - height: 100vh; - left: 0; - position: fixed; - top: 0; - width: 100vw; - z-index: 200; -} - -.DocSearch-Container a { - text-decoration: none; -} - -.DocSearch-Link { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - font: inherit; - margin: 0; - padding: 0; -} - -.DocSearch-Modal { - background: var(--docsearch-modal-background); - border-radius: 6px; - box-shadow: var(--docsearch-modal-shadow); - flex-direction: column; - margin: 60px auto auto; - max-width: var(--docsearch-modal-width); - position: relative; -} - -/* Modal Searchbox */ - -.DocSearch-SearchBar { - display: flex; - padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; -} - -.DocSearch-Form { - align-items: center; - background: var(--docsearch-searchbox-focus-background); - border-radius: 4px; - box-shadow: var(--docsearch-searchbox-shadow); - display: flex; - height: var(--docsearch-searchbox-height); - padding: 0 var(--docsearch-spacing); - position: relative; - width: 100%; -} - -.DocSearch-Input { - appearance: none; - background: transparent; - border: 0; - color: var(--docsearch-text-color); - flex: 1; - font: inherit; - font-size: 1.2em; - height: 100%; - outline: none; - padding: 0 0 0 8px; - width: 80%; -} - -.DocSearch-Input::placeholder { - color: var(--docsearch-muted-color); - opacity: 1; /* Firefox */ -} - -.DocSearch-Input::-webkit-search-cancel-button, -.DocSearch-Input::-webkit-search-decoration, -.DocSearch-Input::-webkit-search-results-button, -.DocSearch-Input::-webkit-search-results-decoration { - display: none; -} - -.DocSearch-LoadingIndicator, -.DocSearch-MagnifierLabel, -.DocSearch-Reset { - margin: 0; - padding: 0; -} - -.DocSearch-MagnifierLabel, -.DocSearch-Reset { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; -} - -.DocSearch-Container--Stalled .DocSearch-MagnifierLabel { - display: none; -} - -.DocSearch-LoadingIndicator { - display: none; -} - -.DocSearch-Container--Stalled .DocSearch-LoadingIndicator { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Reset { - animation: none; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); - } -} - -.DocSearch-Reset { - animation: fade-in 0.1s ease-in forwards; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - padding: 2px; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); -} - -.DocSearch-Reset[hidden] { - display: none; -} - -.DocSearch-Reset:focus { - outline: none; -} - -.DocSearch-Reset:hover { - color: var(--docsearch-highlight-color); -} - -.DocSearch-LoadingIndicator svg, -.DocSearch-MagnifierLabel svg { - height: 24px; - width: 24px; -} - -.DocSearch-Cancel { - display: none; -} - -/* Modal Dropdown */ - -.DocSearch-Dropdown { - max-height: calc( - var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - - var(--docsearch-spacing) - var(--docsearch-footer-height) - ); - overflow-y: auto; /* firefox */ - overflow-y: overlay; - padding: 0 var(--docsearch-spacing); - scrollbar-color: var(--docsearch-muted-color) - var(--docsearch-modal-background); - scrollbar-width: thin; -} - -.DocSearch-Dropdown::-webkit-scrollbar { - width: 12px; -} - -.DocSearch-Dropdown::-webkit-scrollbar-track { - background: transparent; -} - -.DocSearch-Dropdown::-webkit-scrollbar-thumb { - background-color: var(--docsearch-muted-color); - border: 3px solid var(--docsearch-modal-background); - border-radius: 20px; -} - -.DocSearch-Dropdown ul { - list-style: none; - margin: 0; - padding: 0; -} - -.DocSearch-Label { - color: var(--docsearch-muted-color); - font-size: 0.75em; - line-height: 1.6em; -} - -.DocSearch-Help { - color: var(--docsearch-muted-color); - font-size: 0.9em; - margin: 0; - user-select: none; -} - -.DocSearch-Title { - font-size: 1.2em; -} - -.DocSearch-Logo a { - display: flex; -} - -.DocSearch-Logo svg { - color: var(--docsearch-logo-color); - margin-left: 8px; -} - -/* Hit */ - -.DocSearch-Hits:last-of-type { - margin-bottom: 24px; -} - -.DocSearch-Hits mark { - background: none; - color: var(--docsearch-highlight-color); -} - -.DocSearch-HitsFooter { - color: var(--docsearch-muted-color); - display: flex; - font-size: 0.85em; - justify-content: center; - margin-bottom: var(--docsearch-spacing); - padding: var(--docsearch-spacing); -} - -.DocSearch-HitsFooter a { - border-bottom: 1px solid; - color: inherit; -} - -.DocSearch-Hit { - border-radius: 4px; - display: flex; - padding-bottom: 4px; - position: relative; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--deleting { - transition: none; - } -} - -.DocSearch-Hit--deleting { - opacity: 0; - transition: all 250ms linear; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--favoriting { - transition: none; - } -} - -.DocSearch-Hit--favoriting { - transform: scale(0); - transform-origin: top center; - transition: all 250ms linear; - transition-delay: 250ms; -} - -.DocSearch-Hit a { - background: var(--docsearch-hit-background); - border-radius: 4px; - box-shadow: var(--docsearch-hit-shadow); - display: block; - padding-left: var(--docsearch-spacing); - width: 100%; -} - -.DocSearch-Hit-source { - background: var(--docsearch-modal-background); - color: var(--docsearch-highlight-color); - font-size: 0.85em; - font-weight: 600; - line-height: 32px; - margin: 0 -4px; - padding: 8px 4px 0; - position: sticky; - top: 0; - z-index: 10; -} - -.DocSearch-Hit-Tree { - color: var(--docsearch-muted-color); - height: var(--docsearch-hit-height); - opacity: 0.5; - stroke-width: var(--docsearch-icon-stroke-width); - width: 24px; -} - -.DocSearch-Hit[aria-selected='true'] a { - background-color: var(--docsearch-highlight-color); -} - -.DocSearch-Hit[aria-selected='true'] mark { - text-decoration: underline; -} - -.DocSearch-Hit-Container { - align-items: center; - color: var(--docsearch-hit-color); - display: flex; - flex-direction: row; - height: var(--docsearch-hit-height); - padding: 0 var(--docsearch-spacing) 0 0; -} - -.DocSearch-Hit-icon { - color: var(--docsearch-muted-color); - height: 20px; - stroke-width: var(--docsearch-icon-stroke-width); - width: 20px; -} - -.DocSearch-Hit-action { - align-items: center; - color: var(--docsearch-muted-color); - display: flex; - height: 22px; - stroke-width: var(--docsearch-icon-stroke-width); - width: 22px; -} - -.DocSearch-Hit-action svg { - display: block; - height: 18px; - width: 18px; -} - -.DocSearch-Hit-action + .DocSearch-Hit-action { - margin-left: 6px; -} - -.DocSearch-Hit-action-button { - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: inherit; - cursor: pointer; - padding: 2px; -} - -svg.DocSearch-Hit-Select-Icon { - display: none; -} - -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon { - display: block; -} - -.DocSearch-Hit-action-button:hover, -.DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: background-color 0.1s ease-in; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - transition: none; - } -} - -.DocSearch-Hit-action-button:hover path, -.DocSearch-Hit-action-button:focus path { - fill: #fff; -} - -.DocSearch-Hit-content-wrapper { - display: flex; - flex: 1 1 auto; - flex-direction: column; - font-weight: 500; - justify-content: center; - line-height: 1.2em; - margin: 0 8px; - overflow-x: hidden; - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - width: 80%; -} - -.DocSearch-Hit-title { - font-size: 0.9em; -} - -.DocSearch-Hit-path { - color: var(--docsearch-muted-color); - font-size: 0.75em; -} - -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, -.DocSearch-Hit[aria-selected='true'] mark, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree { - color: var(--docsearch-hit-active-color) !important; -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -/* No Results - Start Screen - Error Screen */ - -.DocSearch-NoResults, -.DocSearch-StartScreen, -.DocSearch-ErrorScreen { - font-size: 0.9em; - margin: 0 auto; - padding: 36px 0; - text-align: center; - width: 80%; -} - -.DocSearch-Screen-Icon { - color: var(--docsearch-muted-color); - padding-bottom: 12px; -} - -.DocSearch-NoResults-Prefill-List { - display: inline-block; - padding-bottom: 24px; - text-align: left; -} - -.DocSearch-NoResults-Prefill-List ul { - display: inline-block; - padding: 8px 0 0; -} - -.DocSearch-NoResults-Prefill-List li { - list-style-position: inside; - list-style-type: '» '; -} - -.DocSearch-Prefill { - appearance: none; - background: none; - border: 0; - border-radius: 1em; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 700; - padding: 0; -} - -.DocSearch-Prefill:hover, -.DocSearch-Prefill:focus { - outline: none; - text-decoration: underline; -} - -/* Modal Footer */ - -.DocSearch-Footer { - align-items: center; - background: var(--docsearch-footer-background); - border-radius: 0 0 8px 8px; - box-shadow: var(--docsearch-footer-shadow); - display: flex; - flex-direction: row-reverse; - flex-shrink: 0; - height: var(--docsearch-footer-height); - justify-content: space-between; - padding: 0 var(--docsearch-spacing); - position: relative; - user-select: none; - width: 100%; - z-index: 300; -} - -.DocSearch-Commands { - color: var(--docsearch-muted-color); - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.DocSearch-Commands li { - align-items: center; - display: flex; -} - -.DocSearch-Commands li:not(:last-of-type) { - margin-right: 0.8em; -} - -.DocSearch-Commands-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 2px; - box-shadow: var(--docsearch-key-shadow); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding-bottom: 2px; - width: 20px; -} - -/* Responsive */ -@media (max-width: 750px) { - :root { - --docsearch-spacing: 10px; - --docsearch-footer-height: 40px; - } - - .DocSearch--active #__docusaurus { - display: none; - } - - .DocSearch-Dropdown { - height: 100%; - } - - .DocSearch-Container { - height: 100vh; - height: -webkit-fill-available; - position: absolute; - } - - .DocSearch-Footer { - border-radius: 0; - bottom: 0; - position: absolute; - } - - .DocSearch-Hit-content-wrapper { - display: flex; - position: relative; - width: 80%; - } - - .DocSearch-Modal { - border-radius: 0; - box-shadow: none; - height: 100vh; - height: -webkit-fill-available; - margin: 0; - max-width: 100%; - width: 100%; - } - - .DocSearch-Cancel { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - flex: none; - font: inherit; - font-size: 1em; - font-weight: 500; - margin-left: var(--docsearch-spacing); - outline: none; - overflow: hidden; - padding: 0; - user-select: none; - white-space: nowrap; - } - - .DocSearch-Commands { - display: none; - } - - .DocSearch-Hit-Tree { - display: none; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/src/styles/search-button.css b/src/styles/search-button.css deleted file mode 100644 index d53099e13..000000000 --- a/src/styles/search-button.css +++ /dev/null @@ -1,66 +0,0 @@ -/* Search Button */ - -.DocSearch-SearchButton { - align-items: center; - background: var(--docsearch-searchbox-background); - border: 0; - border-radius: 40px; - color: var(--docsearch-text-color); - color: var(--docsearch-muted-color); - cursor: pointer; - display: flex; - font-weight: 500; - height: 36px; - margin: 0 0 0 16px; - padding: 0 8px; - user-select: none; -} - -.DocSearch-SearchButton:hover, -.DocSearch-SearchButton:active, -.DocSearch-SearchButton:focus { - background: var(--docsearch-searchbox-focus-background); - box-shadow: var(--docsearch-searchbox-shadow); - color: var(--docsearch-text-color); - outline: none; -} - -.DocSearch-Search-Icon { - stroke-width: 1.6; -} - -.DocSearch-SearchButton .DocSearch-Search-Icon { - color: var(--docsearch-text-color); -} - -.DocSearch-SearchButton-Placeholder { - font-size: 1rem; - padding: 0 12px 0 6px; -} - -.DocSearch-SearchButton-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 3px; - box-shadow: var(--docsearch-key-shadow); - color: var(--docsearch-muted-color); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding-bottom: 2px; - position: relative; - top: -1px; - width: 20px; -} - -@media (max-width: 750px) { - .DocSearch-SearchButton-KeySeparator, - .DocSearch-SearchButton-Key { - display: none; - } - - .DocSearch-SearchButton-Placeholder { - display: none; - } -} diff --git a/style.js b/style.js index 5e43eda11..26d58a9da 100644 --- a/style.js +++ b/style.js @@ -1,3 +1 @@ -export * from './dist/_variables.css'; -export * from './dist/modal.css'; -export * from './dist/search-button.css'; +export * from '@docsearch/css';