Misago/emberapp/app/styles/misago/navbar.less

//
// Misago Navbar
// --------------------------------------------------


// Navbar scaffold
.navbar-spacer {
  margin-bottom: @line-height-computed;

  .navbar-primary {
    .shadow-4dp();
    border-bottom: none;
    margin: 0px;
    padding: @navbar-inner-margin 0px;

    &.affix {
      .shadow-8dp();

      width: 100%;
      top: 0px;
    }
  }
}


// Navbar brand
.navbar-primary {
  .navbar-brand {
    font-size: @font-size-large * 1.2;
    font-weight: @navbar-link-weight;

    img {
      display: inline-block;
      height: @navbar-brand-height;
      margin: ((@navbar-padding-vertical - @navbar-brand-height) / 2) 0px;

      position: relative;
      bottom: 3px;
    }
  }
}


// Navbar navs
.navbar-primary {
  .navbar-nav {
    float: left;

    &>li {
      float: left;
      margin-right: @navbar-link-spacing;

      &:last-child {
        margin-right: 0px;
      }

      &>a {
        // Border radius
        border-radius: @navbar-link-radius;

        // Scale links up
        font-size: @navbar-link-size;
        font-weight: @navbar-link-weight;

        // We don't use .active states in navbar
        &:active, &:focus {
          background-color: @navbar-default-link-active-bg;

          color: @navbar-default-link-active-color;
        }
      }

      &.icon {
        &>a {
          height: @navbar-height;
          padding: (@navbar-height - @navbar-icon-size) / 2 @navbar-padding-horizontal;
          padding-bottom: 0px;

          &>.material-icons {
            .opacity(1);

            font-size: @navbar-icon-size;
            line-height: @navbar-icon-size;
          }

          // Align badges to glyhps
          &>.badge {
            vertical-align: top;

            position: relative;
            bottom: (@navbar-icon-size - (6px + @font-size-small)) / -2;
          }
        }
      }
    }
  }
}


// User Menu
.navbar-primary {
  .navbar-user-nav {
    float: right;
  }

  .btn-start-thread {
    background: @navbar-start-thread-bg;
    height: @navbar-height;
    padding: (@navbar-height - @navbar-icon-size) / 2;
    padding-bottom: 0px;

    color: @navbar-start-thread-color;

    .material-icons {
      top: -1px;

      font-size: @navbar-icon-size;
      line-height: @navbar-icon-size;
    }

    &:hover, &:focus {
      background: @navbar-start-thread-hover-bg;

      color: @navbar-start-thread-hover-color;
    }

    &:active {
      background: @navbar-start-thread-active-bg;

      color: @navbar-start-thread-active-color;
    }
  }

  .user-menu {
    .dropdown-toggle {
      height: @navbar-height;
      padding: (@navbar-height - @navbar-avatar-height) / 2;
      padding-bottom: 0px;

      line-height: 0px;

      img {
        border-radius: @avatar-radius-small;

        width: @navbar-avatar-height;
        height: @navbar-avatar-height;
      }

      &:hover, &:focus {
        img {
          .shadow-2dp();
        }
      }
    }
  }
}


// Guest Menu
.navbar-primary {
  .navbar-guest-nav {
    float: right;

    .btn-sign-in, .btn-join {
      margin-left: @navbar-link-spacing;
    }

    .btn-sign-in {
      background: @navbar-sign-in-bg;

      color: @navbar-sign-in-color;

      &:hover, &:focus {
        background: @navbar-sign-in-hover-bg;

        color: @navbar-sign-in-hover-color;
      }

      &:active {
        background: @navbar-sign-in-active-bg;

        color: @navbar-sign-in-active-color;
      }
    }

    .btn-join {
      background: @navbar-join-bg;

      color: @navbar-join-color;

      &:hover, &:focus {
        background: @navbar-join-hover-bg;

        color: @navbar-join-hover-color;
      }

      &:active {
        background: @navbar-join-active-bg;

        color: @navbar-join-active-color;
      }
    }
  }
}


// Navbar Buttons
.navbar-primary {
  .navbar-btn {
    .btn-reset-styles();

    margin-top: 0px;
    margin-bottom: 0px;
    padding-top:    11px;
    padding-bottom: 11px;

    font-size: @navbar-link-size;

    &, &:hover, &:focus, &:active {
      border-color: transparent;
    }
  }
}


// Icons in buttons
.navbar-primary {
  &>.navbar-btn {
    .material-icons {
      font-size: @font-size-large;
    }
  }
}


// Dropdowns
.navbar-static-top {
  & .navbar-nav > li > .dropdown-menu {
    border-radius: @dropdown-border-radius;
  }
}


// Compact nav
@media (max-width: @screen-sm-max) {
  .navbar-primary {
    min-height: @navbar-compact-height;
  }
}


.navbar-primary {
  .navbar-compact-nav {
    margin: 0px;
    float: none;
    width: 100%;

    &>li {
      margin: 0px;

      &>a, &>.dropdown-toggle {
        padding: 0px;
        padding-top: (@navbar-compact-height - @navbar-compact-item-height) / 2;
        height: @navbar-compact-height;

        text-align: center;

        // Align images
        img {
          width: @navbar-compact-item-height;
          height: @navbar-compact-item-height;

          position: static;
        }

        // Align and de-opac icons
        .material-icons {
          .opacity(1);

          font-size: @navbar-compact-item-height;
          line-height: @navbar-compact-item-height;
        }

        // Custom touched style
        &:active {
          background-color: @navbar-compact-link-active-bg;

          color: @navbar-compact-link-active-color;
        }
      }
    }

    // Even widths
    &.with-4-links {
      &>li {
        width: 25%;
      }
    }

    &.with-5-links {
      &>li {
        width: 20%;
      }
    }

    &.with-6-links {
      &>li {
        width: 16%;

        &:first-child, &:last-child {
          width: 18%;
        }
      }
    }

    &.with-7-links {
      &>li {
        width: 14%;

        &:first-child, &:last-child {
          width: 15%;
        }
      }
    }
  }
}


// Compact dropdown
.compact-navbar-dropdown {
  margin-top: @line-height-computed * -1;
  margin-bottom: @line-height-computed;

  .dropdown-menu {
    border-radius: 0px;
    display: block;
    position: static;
    width: 100%;
    .shadow-6dp();
  }
}