navbar.css

@import '../variables.css';


$toggle-size: 2.5rem;

nav[role="navigation"] {
  background: $nav-bg;

  display: flex;

  margin: 0;

  font-size: 1.2rem;

  a {
    color: #777;
    font-family: sans-serif;

    &:hover {
      text-decoration: none;
    }
  }

  .container-fluid {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .navbar-brand {
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    // flex-grow: 1;

    line-height: 1;

    > .title-wrapper {
      display: flex;
      flex-basis: 100%;
      align-items: center;

      &:before {
        content: "";
        display: inline-block;
        overflow: hidden;
        height: 0;
        padding: 32px 32px 0 0;
        margin: 0 4px 0 0;
        background-image: url(https://cpprefjp.github.io/static/original-icons/cpprefjp-icon-v1.1-transparent.png);
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }

  .navbar-header {
    display: flex;
    position: relative;
    // flex-basis: 100%;
    margin: 0;
    background: $nav-bg;

    align-items: center;

    &:after {
      content: '';
      display: block;
      width: calc($toggle-size + 1rem);
      visibility: hidden;
    }
  }

  .navbar-toggle {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    padding: 0;
    margin: 0;
    // margin: 0 .5rem 0 .5rem;
    height: 2.2rem;
    width: $toggle-size;

    background: none;

    // border: 1px solid #AAA;
    border: none;
    border-radius: 6px;

    &:hover, &:focus {
      background-color: initial;
    }

    .sr-only {
      display: none;
    }

    .icon-bar {
      display: block;
      width: 1.5rem;
      height: 2px;
      background: #AAA;
    }
  }
}