diff options
Diffstat (limited to 'finished-application/frontend/components/styles')
4 files changed, 54 insertions, 2 deletions
diff --git a/finished-application/frontend/components/styles/DropDown.js b/finished-application/frontend/components/styles/DropDown.js new file mode 100644 index 0000000..df86aee --- /dev/null +++ b/finished-application/frontend/components/styles/DropDown.js @@ -0,0 +1,47 @@ +import styled, { keyframes } from 'styled-components'; + +const DropDown = styled.div` + position: absolute; + width: 100%; + z-index: 2; + border: 1px solid ${props => props.theme.lightgrey}; +`; + +const DropDownItem = styled.div` + border-bottom: 1px solid ${props => props.theme.lightgrey}; + background: ${props => (props.highlighted ? '#f7f7f7' : 'white')}; + padding: 1rem; + transition: all 0.2s; + ${props => (props.highlighted ? 'padding-left: 2rem;' : null)}; + display: flex; + align-items: center; + border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')}; + img { + margin-right: 10px; + } +`; + +const glow = keyframes` + from { + box-shadow: 0 0 0px yellow; + } + + to { + box-shadow: 0 0 10px 1px yellow; + } +`; + +const SearchStyles = styled.div` + position: relative; + input { + width: 100%; + padding: 10px; + border: 0; + font-size: 2rem; + &.loading { + animation: ${glow} 0.5s ease-in-out infinite alternate; + } + } +`; + +export { DropDown, DropDownItem, SearchStyles }; diff --git a/finished-application/frontend/components/styles/NavStyles.js b/finished-application/frontend/components/styles/NavStyles.js index 41523df..fe4abda 100644 --- a/finished-application/frontend/components/styles/NavStyles.js +++ b/finished-application/frontend/components/styles/NavStyles.js @@ -18,6 +18,8 @@ const NavStyles = styled.ul` background: none; border: 0; cursor: pointer; + color: ${props => props.theme.black}; + font-weight: 800; @media (max-width: 700px) { font-size: 10px; padding: 0 10px; diff --git a/finished-application/frontend/components/styles/OrderStyles.js b/finished-application/frontend/components/styles/OrderStyles.js index 4a2d804..f461b70 100644 --- a/finished-application/frontend/components/styles/OrderStyles.js +++ b/finished-application/frontend/components/styles/OrderStyles.js @@ -30,7 +30,6 @@ const OrderStyles = styled.div` padding-bottom: 2rem; img { width: 100%; - height: 100%; object-fit: cover; } } diff --git a/finished-application/frontend/components/styles/Table.js b/finished-application/frontend/components/styles/Table.js index e9d0673..b2cd6c4 100644 --- a/finished-application/frontend/components/styles/Table.js +++ b/finished-application/frontend/components/styles/Table.js @@ -11,7 +11,7 @@ const Table = styled.table` th { border-bottom: 1px solid ${props => props.theme.offWhite}; border-right: 1px solid ${props => props.theme.offWhite}; - padding: 10px 5px; + padding: 5px; position: relative; &:last-child { border-right: none; @@ -20,6 +20,10 @@ const Table = styled.table` width: 100%; } } + label { + padding: 10px 5px; + display: block; + } } tr { &:hover { |