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

add mobile styling

Browse Source
This commit is contained in:
Paul Wackerow 2022-11-29 18:17:09 -08:00
parent 0e295c32b7
commit f1282fbe9d
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
2 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/layouts/MobileMenu.tsx
View File

@ -1,8 +1,8 @@
import { Box, Flex, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; import { Box, Flex, Modal, ModalContent, ModalOverlay, Stack, useDisclosure } from '@chakra-ui/react';
import { CloseIcon } from '@chakra-ui/icons'; import { CloseIcon } from '@chakra-ui/icons';
import { HamburgerIcon } from '../UI/icons'; import { HamburgerIcon } from '../UI/icons';
import { Search } from '../UI/search'; import { Search } from '../UI/';
import { HeaderButtons } from '../UI'; import { HeaderButtons } from '../UI';
import { BORDER_WIDTH } from '../../constants'; import { BORDER_WIDTH } from '../../constants';
@ -62,7 +62,9 @@ export const MobileMenu: React.FC = () => {
<HeaderButtons close={onClose} /> <HeaderButtons close={onClose} />
{/* SEARCH */} {/* SEARCH */}
<Search /> <Stack borderBlockEnd='2px' borderColor='bg'>
<Search />
</Stack>
</Flex> </Flex>
</ModalContent> </ModalContent>
</Modal> </Modal>

64
src/theme/search.css
View File

@ -8,14 +8,17 @@
width: 200px; width: 200px;
gap: 1rem; gap: 1rem;
} }
.DocSearch-Button:hover { .DocSearch-Button:hover {
background: none; background: none;
} }
.DocSearch-Button-Container { .DocSearch-Button-Container {
flex: 1; flex: 1;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
} }
.DocSearch-Button-Keys kbd { .DocSearch-Button-Keys kbd {
background: none; background: none;
border: 1px solid var(--chakra-colors-primary); border: 1px solid var(--chakra-colors-primary);
@ -23,6 +26,7 @@
box-shadow: none; box-shadow: none;
padding: 0.125rem; padding: 0.125rem;
} }
.DocSearch-Button-Placeholder { .DocSearch-Button-Placeholder {
text-align: start; text-align: start;
text-transform: lowercase; text-transform: lowercase;
@ -33,16 +37,16 @@
flex: 1; flex: 1;
} }
/* Algolia search modal styling */ .DocSearch-Search-Icon * {
.DocSearch-Search-Icon *,
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg,
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span,
.DocSearch-Hit-title mark,
.DocSearch-Hit-path mark,
.DocSearch-Prefill {
color: var(--chakra-colors-primary); color: var(--chakra-colors-primary);
} }
/* Algolia search modal styling */
.DocSearch-Modal {
border-radius: 0;
background: var(--chakra-colors-bg);
}
.DocSearch-Logo { .DocSearch-Logo {
text-transform: uppercase; text-transform: uppercase;
} }
@ -63,11 +67,6 @@ svg[aria-label="Algolia"] * {
fill: var(--chakra-colors-body); fill: var(--chakra-colors-body);
} }
.DocSearch-Modal {
border-radius: 0;
background: var(--chakra-colors-bg);
}
.DocSearch-Form { .DocSearch-Form {
box-shadow: inset 0 0 0 2px var(--chakra-colors-primary); box-shadow: inset 0 0 0 2px var(--chakra-colors-primary);
background: var(--chakra-colors-secondary); background: var(--chakra-colors-secondary);
@ -100,6 +99,22 @@ svg[aria-label="Algolia"] * {
padding-block: var(--chakra-space-2); padding-block: var(--chakra-space-2);
} }
.DocSearch-Hit {
padding-bottom: var(--chakra-space-2);
}
.DocSearch-Hit a {
border-radius: 0;
}
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg,
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span,
.DocSearch-Hit-title mark,
.DocSearch-Hit-path mark,
.DocSearch-Prefill {
color: var(--chakra-colors-primary);
}
.DocSearch-Input, .DocSearch-Input,
.DocSearch-Input::placeholder, .DocSearch-Input::placeholder,
.DocSearch-Form > label > svg > path, .DocSearch-Form > label > svg > path,
@ -112,10 +127,25 @@ svg[aria-label="Algolia"] * {
font-size: var(--chakra-fontSizes-md) font-size: var(--chakra-fontSizes-md)
} }
.DocSearch-Hit { /* Search field in mobile menu */
padding-bottom: var(--chakra-space-2); @media (max-width: 768px) {
} .DocSearch-Button {
padding: 2rem 1rem;
width: 100%;
position: relative;
}
.DocSearch-Hit a { .DocSearch-Button::before {
border-radius: 0; position: absolute;
content: "search";
font-size: var(--chakra-fontSizes-md);
color: var(--chakra-colors-bg);
inset: 0;
text-align: start;
padding: 2rem 1rem;
}
.DocSearch-Search-Icon * {
color: var(--chakra-colors-bg);
}
} }