fix(design): icons
This commit is contained in:
Shipow
parent
4c0aa3b71e
commit
321955979f
11 changed files with 75 additions and 61 deletions
|
|
@ -8,10 +8,10 @@ import { RecentDocSearchHit } from '../types';
|
|||
|
||||
interface EmptyScreenProps
|
||||
extends AutocompleteApi<
|
||||
RecentDocSearchHit,
|
||||
React.FormEvent,
|
||||
React.MouseEvent,
|
||||
React.KeyboardEvent
|
||||
RecentDocSearchHit,
|
||||
React.FormEvent,
|
||||
React.MouseEvent,
|
||||
React.KeyboardEvent
|
||||
> {
|
||||
state: AutocompleteState<RecentDocSearchHit>;
|
||||
hasSuggestions: boolean;
|
||||
|
|
@ -52,10 +52,9 @@ export function EmptyScreen(props: EmptyScreenProps) {
|
|||
<a href={item.url}>
|
||||
<div className="DocSearch-Hit-Container">
|
||||
<div className="DocSearch-Hit-icon">
|
||||
<svg width="20" height="20">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||
<g
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -119,17 +118,7 @@ export function EmptyScreen(props: EmptyScreenProps) {
|
|||
}}
|
||||
>
|
||||
<svg width="20" height="20">
|
||||
<g
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
d="M10,10 L15.0853291,4.91467086 L10,10 L15.0853291,15.0853291 L10,10 Z M10,10 L4.91467086,4.91467086 L10,10 L4.91467086,15.0853291 L10,10 Z"
|
||||
transform="translate(10.000000, 10.000000) rotate(-360.000000) translate(-10.000000, -10.000000) "
|
||||
></path>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,13 @@ export function SelectIcon() {
|
|||
<svg width="20" height="20">
|
||||
<g
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 2v5c0 2-1 4-4 4H4" />
|
||||
<path d="M8 16l-5-5 5-4" />
|
||||
<path d="M18 3v4c0 2-2 4-4 4H2" />
|
||||
<path d="M8 17l-6-6 6-6" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ export function Results(props: ResultsProps) {
|
|||
<svg className="DocSearch-Hit-Tree">
|
||||
<g
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ function LvlIcon() {
|
|||
return (
|
||||
<svg width="20" height="20">
|
||||
<path
|
||||
d="M17 6h-4-1V1l5 5v11l-1 2H4l-1-1V2l1-1h8l5 5z"
|
||||
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"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
|
|
@ -32,7 +31,6 @@ function AnchorIcon() {
|
|||
<path
|
||||
d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -48,7 +46,6 @@ function ContentIcon() {
|
|||
<path
|
||||
d="M17 5H3h14zm0 5H3h14zm0 5H3h14z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@ import React from 'react';
|
|||
|
||||
export function ResetIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 10 10">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M5 4.12L8.93.18a.62.62 0 1 1 .89.89L5.88 5l3.94 3.93a.62.62 0 1 1-.89.89L5 5.88 1.07 9.82a.62.62 0 1 1-.89-.89L4.12 5 .18 1.07a.62.62 0 1 1 .89-.89L5 4.12z"
|
||||
fill="currentColor"
|
||||
d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@ import React from 'react';
|
|||
|
||||
export function SearchIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 18 18">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
className="DocSearch-Search-Icon"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M13.14 13.14L17 17l-3.86-3.86A7.11 7.11 0 1 1 3.08 3.08a7.11 7.11 0 0 1 10.06 10.06z"
|
||||
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.3"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { SearchIcon } from '../SearchBox/SearchIcon';
|
||||
|
||||
interface SearchButtonProps {
|
||||
onClick(): void;
|
||||
|
|
@ -32,24 +33,8 @@ export function SearchButton(props: SearchButtonProps) {
|
|||
className="DocSearch-SearchButton"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<svg
|
||||
className="DocSearch-SearchButton-Icon"
|
||||
width={18}
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
d="M13.14 13.14L17 17l-3.86-3.86A7.11 7.11 0 1 1 3.08 3.08a7.11 7.11 0 0 1 10.06 10.06z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.78"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<SearchIcon />
|
||||
<span className="DocSearch-SearchButton-Placeholder">Search</span>
|
||||
|
||||
<span className="DocSearch-SearchButton-Key">{key}</span>
|
||||
<span className="DocSearch-SearchButton-Key">K</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
--docsearch-input-color: var(--ifm-color-emphasis-800);
|
||||
--docsearch-highlight-color: var(--ifm-color-primary);
|
||||
--docsearch-placeholder-color: rgb(150, 155, 175);
|
||||
--docsearch-container-background: rgb(60, 65, 85, 0.8);
|
||||
--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);
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
--docsearch-hit-height: 56px;
|
||||
--docsearch-footer-height: 44px;
|
||||
--docsearch-spacing: 12px;
|
||||
--docsearch-icon-stroke-width: 1.6;
|
||||
}
|
||||
|
||||
/* Darkmode */
|
||||
|
|
@ -86,12 +87,12 @@ html[data-theme='dark'] {
|
|||
box-shadow: var(--docsearch-searchbox-shadow);
|
||||
}
|
||||
|
||||
.DocSearch-SearchButton-Icon {
|
||||
color: var(--docsearch-highlight-color);
|
||||
.DocSearch-Search-Icon {
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
|
||||
.DocSearch-SearchButton-Placeholder {
|
||||
margin: 0 8px;
|
||||
margin: 0 1em 0 .5em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -222,8 +223,6 @@ html[data-theme='dark'] {
|
|||
.DocSearch-LoadingIndicator,
|
||||
.DocSearch-MagnifierLabel,
|
||||
.DocSearch-Reset {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -248,7 +247,14 @@ html[data-theme='dark'] {
|
|||
border-radius: 50%;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
color: var(--docsearch-icon);
|
||||
animation: reset-button .2s ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes reset-button {
|
||||
0% {opacity: 0}
|
||||
100% { opacity: 1}
|
||||
}
|
||||
|
||||
.DocSearch-Reset[hidden] {
|
||||
|
|
@ -259,15 +265,10 @@ html[data-theme='dark'] {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.DocSearch-Reset svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg,
|
||||
.DocSearch-MagnifierLabel svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
}
|
||||
|
||||
.DocSearch-MagnifierLabel {
|
||||
|
|
@ -445,6 +446,7 @@ html[data-theme='dark'] {
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
color: var(--docsearch-muted-color);
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action-button {
|
||||
|
|
@ -524,6 +526,7 @@ html[data-theme='dark'] {
|
|||
font-weight: 500;
|
||||
color: var(--docsearch-highlight-color);
|
||||
animation: cancel-button ease-out 0.2s forwards;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@keyframes cancel-button {
|
||||
|
|
|
|||
11
src/svg/icon_action_clear.svg
Normal file
11
src/svg/icon_action_clear.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?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>2b0d15d6-5f05-49e4-8d6b-a70e8854fdaf@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/action/clear" stroke="#7E8BA1" stroke-width="2">
|
||||
<path d="M10,10 L15.0853291,4.91467086 L10,10 L15.0853291,15.0853291 L10,10 Z M10,10 L4.91467086,4.91467086 L10,10 L4.91467086,15.0853291 L10,10 Z" id="Combined-Shape" transform="translate(10.000000, 10.000000) rotate(-360.000000) translate(-10.000000, -10.000000) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 880 B |
13
src/svg/icon_action_microphone.svg
Normal file
13
src/svg/icon_action_microphone.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<?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>026603da-1296-49a5-8a02-d1059668a8c1@1.00x</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="autocomplete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon/action/microphone" stroke="#7E8BA1" stroke-width="2">
|
||||
<rect id="Rectangle" x="7.97271729" y="2.84960157" width="4.05456543" height="10.4791508" rx="2.02728271"></rect>
|
||||
<path d="M5.06680245,13.3394248 C5.87457883,15.2656977 7.77816513,16.6187302 9.99776911,16.6187302 L9.99776911,16.6187302 C12.22147,16.6187302 14.1279856,15.2606982 14.9331976,13.3287524" id="Path" stroke-linecap="round"></path>
|
||||
<path d="M10,17.2842534 L10,17.7451909" id="Line-6" stroke-linecap="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,013 B |
11
src/svg/icon_search_primary.svg
Normal file
11
src/svg/icon_search_primary.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?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>a9ce3a89-b607-4099-acb0-89761f0cf8fa@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/search/primary" stroke="#5468FF" stroke-width="2">
|
||||
<path d="M14.386049,14.386049 L18.473732,18.473732 L14.386049,14.386049 C11.4441962,17.3279018 6.67451042,17.3279018 3.73265762,14.386049 C0.790804829,11.4441962 0.790804829,6.67451042 3.73265762,3.73265762 C6.67451042,0.790804829 11.4441962,0.790804829 14.386049,3.73265762 C17.3279018,6.67451042 17.3279018,11.4441962 14.386049,14.386049 Z" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
Loading…
Reference in a new issue