aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/search_input.tsx8
-rw-r--r--packages/instant/src/components/ui/container.tsx1
-rw-r--r--packages/instant/src/components/ui/input.tsx1
3 files changed, 6 insertions, 4 deletions
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
index 3a693b9f8..71bc18915 100644
--- a/packages/instant/src/components/search_input.tsx
+++ b/packages/instant/src/components/search_input.tsx
@@ -13,10 +13,10 @@ export interface SearchInputProps extends InputProps {
}
export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
- <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
- <Flex justify="flex-start" align="flex-end">
- <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
- <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+ <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .5em">
+ <Flex justify="flex-start" align="center">
+ <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="2px 12px" />
+ <Input {...props} type="search" fontSize="16px" fontColor={props.fontColor} />
</Flex>
</Container>
);
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index e7d909d92..636eb8fc9 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -77,6 +77,7 @@ export const Container =
${props => cssRuleIfExists(props, 'opacity')}
${props => cssRuleIfExists(props, 'cursor')}
${props => cssRuleIfExists(props, 'overflow')}
+ ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')};
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
${props => props.display && stylesForMedia<string>('display', props.display)}
${props => props.width && stylesForMedia<string>('width', props.width)}
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 1ea5d8fe1..863c970ef 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -10,6 +10,7 @@ export interface InputProps {
fontSize?: string;
fontColor?: ColorOption;
placeholder?: string;
+ type?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}