tornadocontrib/go-ethereum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract search styling to .css

Browse Source
This commit is contained in:
Paul Wackerow 2022-11-29 17:00:33 -08:00
parent 9d9735a252
commit 791309031c
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
3 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/UI/Search.tsx
View File

@ -1,45 +1,11 @@
import { Flex, FlexProps } from '@chakra-ui/react'
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
export const Search: React.FC<FlexProps> = (props) => (
<Flex
css={`
svg.DocSearch-Search-Icon path {
color: var(--chakra-colors-primary);
}
.DocSearch-Button {
border-radius: 0;
height: 100%;
background: none;
margin: 0;
padding: 1rem;
width: 200px;
}
.DocSearch-Button:hover {
background: none;
}
.DocSearch-Button-Container {
flex-direction: row-reverse;
}
.DocSearch-Button-Keys {
display: none;
}
.DocSearch-Button-Placeholder {
text-transform: lowercase;
font-style: italic;
color: var(--chakra-colors-primary);
font-weight: 400;
width: 100%;
flex: 1;
}
`}
{...props}
>
<DocSearch
appId="R2IYF7ETH7"
apiKey="599cec31baffa4868cae4e79f180729b"
indexName="docsearch" />
</Flex>
export const Search: React.FC = () => (
<DocSearch
appId="R2IYF7ETH7"
apiKey="599cec31baffa4868cae4e79f180729b"
indexName="docsearch"
/>
)

3
src/pages/_app.tsx
View File

@ -10,6 +10,9 @@ import theme from '../theme';
import { MDXProvider } from '@mdx-js/react';
import MDXComponents from '../components/';
// Algolia search css styling
import '../theme/search.css';
export default function App({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>

35
src/theme/search.css Normal file
View File

@ -0,0 +1,35 @@
/* Search field on desktop nav bar */
.DocSearch-Button {
border-radius: 0;
height: 100%;
background: none;
margin: 0;
padding: 1rem;
width: 200px;
gap: 1rem;
}
.DocSearch-Button:hover {
background: none;
}
.DocSearch-Button-Container {
flex: 1;
flex-direction: row-reverse;
justify-content: space-between;
}
.DocSearch-Button-Keys kbd {
background: none;
border: 1px solid var(--chakra-colors-primary);
color: var(--chakra-colors-primary);
box-shadow: none;
padding: 0.125rem;
}
.DocSearch-Button-Placeholder {
text-align: start;
text-transform: lowercase;
font-style: italic;
color: var(--chakra-colors-primary);
font-weight: 400;
width: 100%;
flex: 1;
}