{"size": 1075, "ext": "js", "max_stars_repo_path": "src/components/navigation/styles.js", "max_stars_repo_name": "ScoutsOut/asd-gatsby", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/navigation/styles.js", "max_issues_repo_name": "ScoutsOut/asd-gatsby", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/navigation/styles.js", "max_forks_repo_name": "ScoutsOut/asd-gatsby", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.3695652174, "max_line_length": 70, "alphanum_fraction": 0.6465116279}
import styled, { keyframes } from 'styled-components'
import { slideInDown } from 'react-animations'
import { colors } from '../../style-variables'

const slideInDownAnimation = keyframes`${slideInDown}`

const Sc_Navigation = styled.div`
  background-color: ${colors.white};
  color: ${colors.black};

  nav {
    animation: 0.3s ${slideInDownAnimation};
    display: ${props => (props.nav_open === true ? 'block' : 'none')};
    padding: 16px 20px 10px;
  }

  a {
    transition: 0.2s transform ease-in;
    display: inline-block;
    font-size: 1.4rem;
    padding: 14px;
    &:hover {
      transform: translateX(10px);
      transition: 0.2s transform ease-out;
    }
  }
`

const Sc_Menu = styled.span`
  display: ${props => (props.nav_open === false ? 'block' : 'none')};
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
`

const Sc_CloseMenu = styled.span`
  display: ${props => (props.nav_open === true ? 'block' : 'none')};
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
`

export { Sc_Navigation, Sc_Menu, Sc_CloseMenu }
