Misago/uiframework/misago/css/misago/navbar.less

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


//== Brand
//
//**
.navbar {
  .navbar-brand {
    .navbar-vertical-align(@navbar-height - (@navbar-brand-size - @font-size-large) / 2 + 1);
    position: relative;
    bottom: 1px;

    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.2);
    margin-bottom: 0px;

    &>li {
      /* Some space between icons */
      margin-left: 8px;

      &>a {
        /* Make button blocky */
        border-radius: @border-radius-base;
        margin: 0px;
        padding: 0px;
        padding-top: 6px;
        height: @navbar-icon-size * 1.5;
        width: @navbar-icon-size * 1.5;

        text-align: center;

        &>.glyphicon, &>.fa{
          font-size: @navbar-icon-size;
          text-align: center;
        }

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

        &>.badge {
          float: right;
          position: absolute;
          right: -6px;
          top: -4px;
        }

        /* Primary styles */
        &:link, &:visited {
          background-color: @navbar-icon-link-bg;
          box-shadow: 0px 2px 0px @navbar-icon-link-border;

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

        &:hover {
          background-color: @navbar-icon-link-hover-bg !important;

          color: @navbar-icon-link-hover-color !important;
          box-shadow: 0px 1px 0px @navbar-icon-link-hover-border;
        }

        &:active {
          background-color: @navbar-icon-link-active-bg !important;
          box-shadow: none;

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

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

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

    .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 {
    margin-left: @line-height-computed * 2;
  }

  /* 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 {
    margin: 0px;
    .misago-button-flavour(@btn-signin-color, @btn-signin-bg, @btn-signin-border);
  }

  .btn-register {
    margin: 0px;
    .misago-button-flavour(@btn-register-color, @btn-register-bg, @btn-register-border);
  }
}

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


//== 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%);
        }
      }
    }
  }
}