fix(design): hovers + tree icons

algolia · Apr 8, 2020 · 92fa12d · 92fa12d
1 parent 2520895
commit 92fa12d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 16 deletions.
diff --git a/src/ResultsScreen.tsx b/src/ResultsScreen.tsx
@@ -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>

diff --git a/src/icons/SourceIcon.tsx b/src/icons/SourceIcon.tsx
@@ -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"

diff --git a/src/style.css b/src/style.css
@@ -1,41 +1,68 @@
 /* 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%,
     rgb(248, 248, 248) 100%
   );
   --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;
 }