Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash/components/navbar/styles.js
| Show All 15 Lines | .announcementbar_ctn { | ||||
| letter-spacing: 1px; | letter-spacing: 1px; | ||||
| text-transform: uppercase; | text-transform: uppercase; | ||||
| font-size: 14px; | font-size: 14px; | ||||
| height: 34px; | height: 34px; | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: center; | justify-content: center; | ||||
| transition: all 200ms ease-in-out; | transition: all 200ms ease-in-out; | ||||
| margin-top: ${props => (props.navBackground ? '-34px' : '0')}; | |||||
| &:hover { | &:hover { | ||||
| background-color: ${props => props.theme.colors.accent}; | background-color: ${props => props.theme.colors.accent}; | ||||
| color: ${props => props.theme.colors.contrast}; | color: ${props => props.theme.colors.contrast}; | ||||
| } | } | ||||
| } | } | ||||
| `; | `; | ||||
| export const NavbarCtn = styled.div` | export const NavbarCtn = styled.div` | ||||
| width: 100%; | width: 100%; | ||||
| background-color: rgba(0, 0, 0, 0); | background-color: ${props => | ||||
| props.navBackground | |||||
| ? props.theme.colors.navbarBackground | |||||
| : 'transparent'}; | |||||
| position: relative; | position: relative; | ||||
| padding: 0 24px; | padding: 0 24px; | ||||
| .navbar { | .navbar { | ||||
| width: 100%; | width: 100%; | ||||
| max-width: 1400px; | max-width: 1400px; | ||||
| margin: auto; | margin: auto; | ||||
| position: relative; | position: relative; | ||||
| Show All 30 Lines | .nav_outer { | ||||
| display: flex; | display: flex; | ||||
| .nav_item { | .nav_item { | ||||
| color: ${props => props.theme.colors.contrast}; | color: ${props => props.theme.colors.contrast}; | ||||
| font-size: 15px; | font-size: 15px; | ||||
| font-weight: 500; | font-weight: 500; | ||||
| letter-spacing: 1px; | letter-spacing: 1px; | ||||
| position: relative; | position: relative; | ||||
| padding: 36px 20px; | |||||
| transition: all 200ms ease-in-out; | transition: all 200ms ease-in-out; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| padding: ${props => | |||||
| props.navBackground ? '28px 20px' : '36px 20px'}; | |||||
| } | } | ||||
| } | } | ||||
| .nav_dropdown_ctn { | .nav_dropdown_ctn { | ||||
| position: absolute; | position: absolute; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| top: 90px; | top: ${props => (props.navBackground ? '80px' : '90px')}; | ||||
| left: 0; | left: 0; | ||||
| width: 300px; | width: 300px; | ||||
| z-index: 99; | z-index: 99; | ||||
| transition: all ease-in-out 200ms; | transition: all ease-in-out 200ms; | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| .navbar_outer_scroll .nav_dropdown_ctn { | .navbar_outer_scroll .nav_dropdown_ctn { | ||||
| ▲ Show 20 Lines • Show All 264 Lines • Show Last 20 Lines | |||||