From 0b4ce2f37b6c6fcba51f4e1f9e648211fb933097 Mon Sep 17 00:00:00 2001 From: Dusan Tuzinsky Date: Wed, 22 Jan 2020 12:00:46 +0100 Subject: [PATCH 1/4] fix position of autocomplete menu --- packages/styleguide/src/components/Search/Search.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/styleguide/src/components/Search/Search.js b/packages/styleguide/src/components/Search/Search.js index 57fd9891ab5..8f39302e0db 100644 --- a/packages/styleguide/src/components/Search/Search.js +++ b/packages/styleguide/src/components/Search/Search.js @@ -168,7 +168,8 @@ const StyledAutocompleteWrapper = styled.div` max-height: calc(8.25 * 52px); overflow: auto; left: 50%; - transform: translate(-50%, -17px); + transform: translate(-50%, 0); + margin: 0; } } From 6dd06ceba05b416340a598906ac9c34d00769972 Mon Sep 17 00:00:00 2001 From: Dusan Tuzinsky Date: Wed, 22 Jan 2020 12:08:34 +0100 Subject: [PATCH 2/4] fix margin of navigation - will not be removed by normalize in project --- packages/styleguide/src/components/Navigation/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/styleguide/src/components/Navigation/index.js b/packages/styleguide/src/components/Navigation/index.js index c177b728057..2386d25db51 100644 --- a/packages/styleguide/src/components/Navigation/index.js +++ b/packages/styleguide/src/components/Navigation/index.js @@ -121,6 +121,7 @@ const StyledNav = styled.nav` font-family: ${props => props.theme.fontFamily}; font-size: ${props => rem(props.theme.fontSizes.base)}; line-height: ${props => props.theme.lineHeights.base}; + margin: ${props => rem(props.theme.spaces.default)} 0; `; const StyledNavList = styled.ul` @@ -133,6 +134,7 @@ const StyledNavList = styled.ul` font-weight: 700; transition: max-height 0.1s cubic-bezier(0, 1, 0.01, 0.98) 0s, padding 0.25s cubic-bezier(0, 1, 0.01, 0.98) 0s; + margin: 0; `; const ListItem = styled.li` From 8b09d5819077166a990e021edc7ce3560401cda6 Mon Sep 17 00:00:00 2001 From: Dusan Tuzinsky Date: Thu, 23 Jan 2020 15:14:14 +0100 Subject: [PATCH 3/4] use theme colors in autocomplete menu - again problem with project colors --- packages/styleguide/src/components/Search/Search.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/styleguide/src/components/Search/Search.js b/packages/styleguide/src/components/Search/Search.js index 8f39302e0db..1ac6d1ef0b4 100644 --- a/packages/styleguide/src/components/Search/Search.js +++ b/packages/styleguide/src/components/Search/Search.js @@ -150,7 +150,8 @@ const StyledAutocompleteWrapper = styled.div` } .autocomplete__option--focused { - background: #eee; + color: ${props => props.theme.colors.black}; + background: ${props => props.theme.colors.grey}; } .autocomplete__menu { From 2ba1f8ae5299e3f26714b9661698ba483d889a97 Mon Sep 17 00:00:00 2001 From: Dusan Tuzinsky Date: Thu, 23 Jan 2020 16:34:59 +0100 Subject: [PATCH 4/4] add margin for navigation --- packages/styleguide/src/components/Navigation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/src/components/Navigation/index.js b/packages/styleguide/src/components/Navigation/index.js index 2386d25db51..4368aca9b05 100644 --- a/packages/styleguide/src/components/Navigation/index.js +++ b/packages/styleguide/src/components/Navigation/index.js @@ -121,7 +121,7 @@ const StyledNav = styled.nav` font-family: ${props => props.theme.fontFamily}; font-size: ${props => rem(props.theme.fontSizes.base)}; line-height: ${props => props.theme.lineHeights.base}; - margin: ${props => rem(props.theme.spaces.default)} 0; + margin-top: ${props => rem(props.theme.spaces.default)}; `; const StyledNavList = styled.ul`