nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat(design): new error icons + update icons + update light shadows / searchbox

Browse source
This commit is contained in:
Shipow 2020-04-08 16:53:54 +02:00
parent e6614359ab
commit 25208954c3
9 changed files with 57 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/style.css
View file

@ -9,11 +9,14 @@
--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-shadow: inset 0px 0px 0px 2px var(--ifm-color-primary);
--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-hit-color: var(--ifm-color-emphasis-800);
--docsearch-hit-active-color: white;
--docsearch-hit-background: white;
--docsearch-hit-shadow: 0px 2px 6px 0px rgb(212, 217, 225);
--docsearch-hit-shadow: 0px 1px 3px 0px rgb(212, 217, 225);
--docsearch-key-gradient: linear-gradient(
-225deg,
rgb(213, 219, 228) 0%,
@ -22,7 +25,8 @@
--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 -5px 7px 0px rgba(69, 98, 155, 0.12);
--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;
@ -42,6 +46,7 @@ html[data-theme='dark'] {
--docsearch-modal-shadow: inset 1px 1px 0px 0px rgb(44, 46, 64),
0px 3px 8px 0px rgb(0, 3, 9);
--docsearch-searchbox-background: rgb(9, 10, 17);
--docsearch-searchbox-focus-background: black;
--docsearch-hit-color: var(--ifm-color-emphasis-500);
--docsearch-hit-shadow: none;
--docsearch-hit-background: rgb(9, 10, 17);
@ -85,6 +90,7 @@ html[data-theme='dark'] {
.DocSearch-SearchButton:active,
.DocSearch-SearchButton:focus {
outline: none;
background: var(--docsearch-searchbox-focus-background);
box-shadow: var(--docsearch-searchbox-shadow);
}
@ -192,7 +198,7 @@ html[data-theme='dark'] {
padding: 0 var(--docsearch-spacing);
align-items: center;
border-radius: 4px;
background: var(--docsearch-searchbox-background);
background: var(--docsearch-searchbox-focus-background);
box-shadow: var(--docsearch-searchbox-shadow);
}
@ -466,6 +472,8 @@ html[data-theme='dark'] {
.DocSearch-Hit-action {
height: 22px;
width: 22px;
display: flex;
align-items: center;
}
.DocSearch-Hit-action svg{

14
src/svg/icon_error_noResults.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>9d12a5ba-adf6-46da-9c20-406b66b1b0ca@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon/error/noResults" stroke="#979797">
<g id="icon/search/active" transform="translate(1.000000, 1.000000)" stroke-width="1.78">
<path d="M14.5349098,3.76239531 C16.5183295,6.7803967 16.1830418,10.8750518 13.5290468,13.5290468 L13.5290468,13.5290468 L17.75,17.75 L13.5290468,13.5290468 C10.8652195,16.1928742 6.75003777,16.520782 3.72889715,14.5127702 M1.51828608,12.2886159 C-0.460486386,9.27122406 -0.123806999,5.18045548 2.52832424,2.52832424 C5.14463407,-0.087985586 9.16098134,-0.450969157 12.1657701,1.43937353" id="Shape"></path>
</g>
<path d="M2,18 L18,2" id="Line-8" stroke-width="2"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

16
src/svg/icon_error_offline.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>bb4e7e4c-061e-4bb5-8ea4-ab254709e8f4@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon/error/offline" stroke="#979797" stroke-width="2">
<path d="M18.9963751,4.76688972 C18.3698376,4.34011879 17.7114187,3.95668035 17.0254298,3.62088584 M13.7483545,2.44148646 C12.5460174,2.15286729 11.2908607,2 10,2 C6.69820623,2 3.63000493,3.00012824 1.08181346,4.71396735" id="Shape"></path>
<path d="M16.6871987,8.02928429 C15.8176228,7.44492084 14.8674079,6.9713049 13.8567578,6.62864022 M10,5.9956665 C7.51022642,5.9956665 5.19748844,6.75364597 3.27995499,8.05143595" id="Shape"></path>
<path d="M12.2869761,14.666658 C11.6421714,14.2282478 10.8635067,13.9720337 10.025,13.9720337 C9.2083238,13.9720337 8.44841421,14.2150804 7.81365726,14.6327878" id="Path"></path>
<path d="M14.5048628,11.3879967 C13.2218109,10.5121416 11.670714,10 10,10" id="Path"></path>
<path d="M3,16 L18,2" id="Line-8-Copy"></path>
<path d="M10,18 L10.05,18" id="Line-9"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/svg/icon_source_anchor.svg
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>78adcbdb-966a-4cd6-9309-109b3e7780e1@1.00x</title>
<title>7ba0d688-6d43-462d-b03b-e154ecb6f024@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="icon/source/anchor" stroke="#D4D9E1" stroke-width="2">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

2
src/svg/icon_source_content.svg
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>90955cc9-f7b3-4479-898c-19510cc4b6d4@1.00x</title>
<title>93a43dc2-d948-446a-b1ec-321aaf5ecbe3@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="icon/source/content" stroke="#D4D9E1" stroke-width="2">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 746 B

After

Width:  |  Height:  |  Size: 746 B

5
src/svg/icon_source_page.svg
View file

@ -1,11 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>1f96940f-ca50-4e02-84bd-79bc02579d53@1.00x</title>
<title>ed46face-8603-49b5-b7b5-1ba481f17dd2@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g id="icon/source/page" stroke="#D4D9E1" stroke-width="2">
<path d="M16.9999972,6 C16.9999972,14 16.9999972,18 16.9999972,18 C16.9999972,18.5223389 16.7907986,19 15.9999972,19 C8.46227598,19 4.46227598,19 3.99999715,19 C3.30658461,19 2.99999715,18.6738281 2.99999715,18 C2.99999715,18 2.99999715,2 2.99999715,2 C2.99999715,1.44580078 3.42492676,1 3.99999715,1 L11.9999972,1 L16.9999972,6 L12.9999972,6 C12.4106445,6 11.9999972,5.60534668 11.9999972,5 L11.9999972,1 L16.9999972,6 Z" id="Path"></path>
<path d="M16.9999972,6 C16.9999972,14 16.9999972,18 16.9999972,18 C16.9999972,18.5223389 16.7907986,19 15.9999972,19 C8.46227598,19 4.46227598,19 3.99999715,19 C3.30658461,19 2.99999715,18.6738281 2.99999715,18 C2.99999715,18 2.99999715,2 2.99999715,2 C2.99999715,1.44580078 3.42492676,1 3.99999715,1 L11.9999972,1 L16.9999972,6 Z" id="Path"></path>
<path d="M13.9999972,8 L10.8689183,8 C10.3568174,8 9.99999715,7.65707737 9.99999715,7.13107882 L9.99999715,4" id="Path" stroke-linecap="round"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,022 B

After

Width:  |  Height:  |  Size: 1.1 KiB

8
src/svg/icon_tree_child.svg
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="60px" viewBox="0 0 30 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="24px" height="54px" viewBox="0 0 24 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>8d4bc779-eae6-4075-8edb-f964556f9cd5@1.00x</title>
<title>62e232f0-63be-4bb8-9547-1d9a37cb8929@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon/tree/child" stroke="#D4D9E1" stroke-width="2">
<path d="M8,8 L8,52" id="Line"></path>
<path d="M26.5,30 L8.3047619,30" id="Line"></path>
<path d="M8,6 L8,48" id="Line"></path>
<path d="M20,27 L8.3047619,27" id="Line"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 705 B

After

Width:  |  Height:  |  Size: 703 B

8
src/svg/icon_tree_last-child.svg
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="60px" viewBox="0 0 30 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="24px" height="54px" viewBox="0 0 24 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>658830a4-2f41-4e2b-b15f-517e3365664b@1.00x</title>
<title>32a42f48-52c2-4fb1-9251-210392f3ac2c@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="icon/tree/last-child" stroke="#D4D9E1" stroke-width="2">
<path d="M8,8 L8,30" id="Line"></path>
<path d="M26.5,30 L8.3047619,30" id="Line"></path>
<path d="M8,6 L8,27" id="Line"></path>
<path d="M20,27 L8.3047619,27" id="Line"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 710 B

After

Width:  |  Height:  |  Size: 708 B

4
src/svg/light_footer_key_esc.svg
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>67ddc381-274d-431d-a5d3-cf7d76b0c2cd@1.00x</title>
<title>66bd230c-207d-4c2d-b384-0b58dff9dbb1@1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g id="light/footer/key/esc" fill-rule="nonzero" stroke="#7E8BA1">
<path d="M13.6167337,8.93599037 C13.5102412,9.2942938 12.9284476,9.89794268 12.1291915,9.89794268 C11.3299354,9.89794268 10.476295,8.9815299 10.476295,7.77215533 L10.476295,7.20436816 C10.476295,5.94964204 11.2657983,5.10277517 12.1291915,5.10277517 C12.9925846,5.10277517 13.4893364,5.58059532 13.6167337,6.17518075 M9,6 C8.86478471,5.52650257 8.24941503,5.07810537 7.54008548,5.10277517 C6.83075593,5.12744496 6.19600545,5.67280617 6.19600545,6.31942015 C6.19600545,6.96603413 6.61582974,7.20056152 7.54045132,7.29986572 C8.4650729,7.39916992 8.96798545,7.9337231 9,8.5 C9.03201455,9.0662769 8.54603841,9.89794268 7.54045132,9.89794268 C6.65925929,9.89794268 6,9 5.9630371,8.48521892 M4.48822602,9.02197266 C4.22473145,9.6161499 3.67834884,9.89794268 2.94392628,9.89794268 C2.20950372,9.89794268 1.2365649,9.27317984 1.2365649,7.69401142 L1.2365649,7.23372021 C1.2365649,6.19205827 1.95759349,5.10277517 2.94392628,5.10277517 C3.93025907,5.10277517 4.58636475,6.13360596 4.48822602,7.35192871 L1.53226299,7.35192871" id="Shape"></path>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB