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

//
// Forum Navbar
// --------------------------------------------------


//== Brand
//
//**
.navbar {
  margin-bottom: 0px;

  .navbar-brand {
    .navbar-vertical-align(@navbar-height - (@navbar-brand-size - @font-size-large) / 2 + 2);
    margin-top: -1px;
    position: relative;
    top: 3px;

    font-size: @navbar-brand-size;
  }
}


//== Primary menu
//
//**
.navbar-nav-primary {
  &>li {
    &>a {
      font-size: @font-size-large;

      &>.badge {
        background-color: darken(@brand-danger, 10%);
        border-radius: @border-radius-base;
        padding: 2px 3px;
        padding-left: 4px;
      }
    }
  }
}


/* Big displays */
@media (min-width: @screen-sm-min) {
  .navbar-nav-primary {
    .navbar-vertical-align(@navbar-icon-size * 1.7 - 2px);
    margin-bottom: 0px;
    margin-left: @navbar-icon-size + @navbar-padding-horizontal;
    margin-right: @navbar-icon-size;

    &>li {
      margin: 0px;
      padding: 0px;

      &>a {
        /* Make button blocky */
        clear: both;
        border: 1px solid @navbar-icon-link-border;
        border-radius: @border-radius-base;
        margin: 0px;
        padding: 0px;
        padding-top: 6px;
        height: @navbar-icon-size * 1.7;
        width: @navbar-icon-size * 1.7;

        text-align: center;

        /* Hide item labels on big displays */
        .item-label {
          display: none;
        }

        .glyphicon, .fa {
          font-size: @navbar-icon-size;

          &.fa-search {
            position: relative;
            bottom: 1px;
          }
        }

        &>.badge {
          border-radius: @border-radius-small;
          position: absolute;
          right: 1px;
          bottom: 1px;
          padding: 1px 3px;
          padding-left: 4px;
          padding-top: 2px;

          font-size: @font-size-base * 0.8;
          font-weight: normal;
        }

        /* Primary styles */
        &, &:link, &:visited {
          background-color: @navbar-icon-link-bg;

          color: @navbar-icon-link-color !important;
        }

        &:hover {
          background-color: @navbar-icon-link-hover-bg !important;
          border-color: @navbar-icon-link-hover-border;
          transition-duration: 0.3ms;

          color: @navbar-icon-link-hover-color !important;
        }

        &:active {
          background-color: @navbar-icon-link-active-bg !important;
          border-color: @navbar-icon-link-active-border;
          transition-duration: 0.05ms;

          color: @navbar-icon-link-active-color !important;
        }
      }

      &.open {
        &>a {
          &:link, &:active, &:visited, &:hover {
            background-color: @navbar-icon-link-open-bg !important;
            border-color: @navbar-icon-link-open-border !important;
            box-shadow: none;

            color: @navbar-icon-link-open-color !important;

            &>.badge {
              background-color: @navbar-icon-link-open-color;

              color: @navbar-icon-link-open-border;
            }
          }
        }
      }
    }

    .dropdown-menu {
      top: @navbar-height - (@navbar-icon-size / 2) - 1px;

      &:after {
        right: @navbar-icon-size / 2;
      }
    }
  }
}


//== User menu
//
//**
.navbar-nav-user {
  &>li {
    &>a.user-toggle {
      overflow: auto;

      font-size: @font-size-large;

      img {
        border-radius: @border-radius-base;
        height: 32px;
      }

      .glyphicon-chevron-down {
        position: relative;
        top: 4px;
        margin-right: 6px;

        color: @navbar-user-caret-color;
      }

      &:hover {
        .glyphicon-chevron-down {
          color: @navbar-user-caret-hover-color;
        }
      }

      &:active, &:focus {
        .glyphicon-chevron-down {
          color: @navbar-user-caret-active-color;
        }
      }
    }
  }
}

/* Big displays */
@media (min-width: @screen-sm-min) {
  /* Put some distance between user menu and primary nav */
  .navbar-nav-user {
    padding-right: @navbar-padding-horizontal;
  }

  /* Change way switch and dropdown appears */
  .navbar-nav-user {
    .dropdown-toggle.user-toggle {
      padding-top: ((@navbar-height - @font-size-large) / 2) + 1px;
      padding-left: 0px;
      padding-right: 0px;

      img {
        float: right;
        height: 32px;
        margin: (@font-size-base / 2 * -1) 0px;
        margin-bottom: (@font-size-base / 2 * -1) + 1px;
        margin-left: 8px;
      }

      .glyphicon-chevron-down {
        float: right;
        margin: 0px;
        margin-left: 8px;

        font-size: @font-size-small;
      }

      &:link, &:visited {
        color: @navbar-user-name-color;
      }

      &:hover {
        color: @navbar-user-name-hover-color;
      }

      &:active, &:focus {
        color: @navbar-user-name-active-color;
      }

      &, &:visited, &:hover, &:active, &:focus {
        background: transparent;
      }
    }

    .dropdown-menu {
      min-width: 256px;
      right: -8px;
      top: auto;
      bottom: auto;

      &:after {
        right: 7px;
        top: -11px;
      }
    }

    &>li.open {
      .dropdown-toggle.user-toggle {
        &, &:visited, &:hover, &:active, &:focus {
          background: transparent;

          color: @navbar-user-name-active-color;
        }
      }
    }
  }
}


//== Guest buttons
//
//**
.navbar-nav-guest {
  .navbar-vertical-align(@font-size-large + 12px);

  .btn-sign-in, .btn-register {
    margin: 0px;

    &:hover {
      transition-timing-function: ease;
      transition-duration: 0.3s;
     }

    &:active {
      .box-shadow(none);
      transition-timing-function: ease;
      transition-duration: 0.1s;
    }
  }

  .btn-sign-in {
    &, &:visited, &:link {
      background: @btn-sign-in-bg;
      border-color: @btn-sign-in-border;

      color: @btn-sign-in-color;
    }

    &:hover {
      background: @btn-sign-in-hover-bg;
      border-color: @btn-sign-in-hover-border;

      color: @btn-sign-in-hover-color;

    }

    &:active {
      background: @btn-sign-in-active-bg;
      border-color: @btn-sign-in-active-border;

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

  .btn-register {
    &, &:visited, &:link {
      background: @btn-register-bg;
      border-color: @btn-register-border;

      color: @btn-register-color;
    }

    &:hover {
      background: @btn-register-hover-bg;
      border-color: @btn-register-hover-border;

      color: @btn-register-hover-color;
    }

    &:active {
      background: @btn-register-active-bg;
      border-color: @btn-register-active-border;

      color: @btn-register-active-color;
    }
  }
}

/* On big displays put some distance between guest nav and other nav */
@media (min-width: @screen-sm-min) {
  .navbar-nav-guest {
    padding-right: @navbar-padding-horizontal;
    margin-left: @navbar-padding-horizontal * 2;
  }
}


//== Navbar dropdowns
//
//**

/* Small displays */
@media (max-width: @screen-sm-min) {
  /* Hide carets */
  .navbar {
    .dropdown-menu {
      &:after {
        display: none;
      }
    }
  }

  /* Dropdown title */
  .navbar-default {
    .dropdown-menu {
      .dropdown-title {
        margin-top: -5px;
        margin-bottom: 5px;
        padding: @padding-base-vertical @padding-base-horizontal;

        .badge {
          background-color: darken(@brand-danger, 10%);
          border-radius: @border-radius-small;

          color: #fff;
        }
      }
    }
  }

  .navbar-default {
    .dropdown-menu {
      .dropdown-title {
        background-color: darken(@navbar-default-bg, 15%);
      }
    }
  }

  .navbar-inverse {
    .dropdown-menu {
      .dropdown-title {
        background-color: lighten(@navbar-inverse-bg, 15%);
      }
    }
  }

  /* Make buttons size equal to that of links */
  .navbar {
    .dropdown-menu {
      li {
        form {
          button {
            padding: 3px 25px;
          }
        }
      }
    }
  }

  /* Color badges in red and white */
  .navbar {
    .dropdown-menu {
      li {
        a {
          &, &:link, &:visited, &:hover, &:active {
            .badge {
              background-color: @brand-danger;
              border-radius: @border-radius-base;

              color: @dropdown-bg;
            }
          }
        }
      }
    }
  }

  /* Dropdown links and buttons */
  .navbar {
    .dropdown-menu {
      li {
        form {
          button {
            color: @navbar-default-link-color;

            &:hover {
              background: none;

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

            &:active, &:focus {
              background: none;

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

  .navbar-inverse {
    .dropdown-menu {
      button {
        color: @navbar-inverse-link-color;

        &:hover {
          background: none;

          color: @navbar-inverse-link-hover-color;
        }

        &:active, &:focus {
          background: none;

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

  /* Make open dropdowns differ*/
  .navbar {
    .dropdown.open {
      background: darken(@navbar-default-bg, 3%);
      border-bottom: 2px solid darken(@navbar-default-bg, 6%);

      .dropdown-toggle {
        &:link, &:active, &:visited, &:hover {
          background: darken(@navbar-default-bg, 6%);
        }
      }

      .dropdown-menu {
        li.divider {
          background-color: darken(@navbar-default-bg, 9%);
        }
      }
    }
  }

  .navbar-inverse {
    .dropdown.open {
      background: lighten(@navbar-inverse-bg, 3%);
      border-bottom: 2px solid lighten(@navbar-inverse-bg, 6%);

      .dropdown-menu {
        li.divider {
          background-color: lighten(@navbar-inverse-bg, 9%);
        }
      }
    }
  }
}