nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(design): hovers + tree icons

Browse source
This commit is contained in:
Shipow 2020-04-08 23:49:32 +02:00
parent 25208954c3
commit 92fa12d780
3 changed files with 58 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/ResultsScreen.tsx
View file

@ -38,7 +38,7 @@ export function ResultsScreen(props: ResultsScreenProps) {
renderIcon={({ item, index }) => (
<>
{item.__docsearch_parent && (
<svg className="DocSearch-Hit-Tree">
<svg className="DocSearch-Hit-Tree" viewBox="0 0 24 54">
<g
stroke="currentColor"
fill="none"
@ -48,9 +48,9 @@ export function ResultsScreen(props: ResultsScreenProps) {
>
{item.__docsearch_parent !==
suggestion.items[index + 1]?.__docsearch_parent ? (
<path d="M8 8v22M26.5 30H8.3" />
<path d="M8 6v42M20 27H8.3"/>
) : (
<path d="M8 8v44M26.5 30H8.3" />
<path d="M8 6v21M20 27H8.3"/>
)}
</g>
</svg>

8
src/icons/SourceIcon.tsx
View file

@ -13,9 +13,9 @@ export function SourceIcon(props: { type: string }) {
function LvlIcon() {
return (
<svg width="20" height="20">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5h-4c-.59 0-1-.4-1-1V1l5 5z"
d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4"
stroke="currentColor"
fill="none"
fillRule="evenodd"
@ -27,7 +27,7 @@ function LvlIcon() {
function AnchorIcon() {
return (
<svg width="20" height="20">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
stroke="currentColor"
@ -42,7 +42,7 @@ function AnchorIcon() {
function ContentIcon() {
return (
<svg width="20" height="20">
<svg width="20" height="20" viewBox="0 0 20 20">
<path
d="M17 5H3h14zm0 5H3h14zm0 5H3h14z"
stroke="currentColor"

60
src/style.css
View file

@ -1,22 +1,38 @@
/* Variables */
:root {
/* Extract rgb from primary with JS
function extractRgb (css) {
return css.match(/[0-9.]+/gi)
} */
--docsearch-primary-color-R: 84;
--docsearch-primary-color-G: 104;
--docsearch-primary-color-B: 255;
--docsearch-primary-color: rgb(var(--docsearch-primary-color-R), var(--docsearch-primary-color-G), var(--docsearch-primary-color-B));
--docsearch-input-color: var(--ifm-color-emphasis-800);
--docsearch-highlight-color: var(--ifm-color-primary);
--docsearch-highlight-color: var(--docsearch-primary-color);
--docsearch-placeholder-color: rgb(150, 155, 175);
--docsearch-container-background: rgba(101, 108, 133, 0.8);
--docsearch-modal-background: var(--ifm-color-emphasis-100);
--docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
0px 3px 8px 0px rgba(85, 90, 100, 1);
--docsearch-searchbox-background: var(--ifm-color-emphasis-300);
--docsearch-searchbox-focus-background: white;
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px rgba(84, 104, 255, 0.5),
inset 2px 4px 6px 0px rgba(84, 104, 255, 0.25),
1px 1px 0px 0px rgb(255, 255, 255);
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px rgba(var(--docsearch-primary-color-R), var(--docsearch-primary-color-G), var(--docsearch-primary-color-B),.5);
--docsearch-hit-color: var(--ifm-color-emphasis-800);
--docsearch-hit-active-color: white;
--docsearch-hit-background: white;
--docsearch-hit-shadow: 0px 1px 3px 0px rgb(212, 217, 225);
--docsearch-key-gradient: linear-gradient(
-225deg,
rgb(213, 219, 228) 0%,
@ -24,18 +40,29 @@
);
--docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 205, 230),
inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(30, 35, 90, 0.4);
--docsearch-footer-background: white;
--docsearch-footer-shadow: 0px -1px 0px 0px rgb(224, 227, 232),
0px -3px 6px 0px rgba(69, 98, 155, 0.12);
--docsearch-logo-color: #5468ff;
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-modal-width: 560px;
--docsearch-modal-height: 600px;
--docsearch-searchbox-height: 56px;
--docsearch-hit-height: 56px;
--docsearch-footer-height: 44px;
--docsearch-spacing: 12px;
--docsearch-icon-stroke-width: 1.6;
--docsearch-icon-stroke-width: 1.4;
}
/* Darkmode */
@ -82,7 +109,7 @@ html[data-theme='dark'] {
background: var(--docsearch-searchbox-background);
color: var(--ifm-color-emphasis-900);
font-weight: 500;
transition: box-shadow 0.4s ease-out;
transition: background-color 0.3s ease-out;
user-select: none;
}
@ -255,7 +282,7 @@ html[data-theme='dark'] {
background: none;
cursor: pointer;
stroke-width: var(--docsearch-icon-stroke-width);
color: var(--docsearch-icon);
color: var(--docsearch-icon-color);
animation: reset-button .1s ease-in forwards;
}
@ -272,6 +299,19 @@ html[data-theme='dark'] {
outline: none;
}
.DocSearch-Reset {
color: inherit;
border: none;
padding: 2px;
cursor: pointer;
border-radius: 50%;
}
.DocSearch-Reset:hover {
transition: background-color .1s ease-in;
background: var(--ifm-color-emphasis-300);
}
.DocSearch-LoadingIndicator svg,
.DocSearch-MagnifierLabel svg {
width:24px;
@ -429,7 +469,8 @@ html[data-theme='dark'] {
width: 24px;
height: var(--docsearch-hit-height);
color: var(--docsearch-muted-color);
opacity: 0.4;
opacity: 0.5;
stroke-width: var(--docsearch-icon-stroke-width);
}
.DocSearch-Hit[aria-selected='true'] a{
@ -441,7 +482,8 @@ html[data-theme='dark'] {
.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-action,
.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
color: var(--docsearch-hit-active-color) !important;
}