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

//
// Navs
// --------------------------------------------------


/* Tabs */
.nav-tabs {
  border-bottom-width:3px;

  &>li {
    &>a {
      &:link, &:active, &:visited {
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 0px;
        margin-bottom: -2px;
        padding: @nav-tabs-padding;

        color: @nav-link-color;
      }

      &:hover {
        border: none;
        border-bottom: 3px solid @nav-tabs-link-hover-border-color;
        margin-bottom: -2px;
        padding: @nav-tabs-padding;
        transition-timing-function: ease;
        transition-duration: 0.3s;

        color: @nav-link-hover-color;
      }

      &:active {
        background: @nav-tabs-link-clicked-bg;
        border-bottom-color: @nav-tabs-link-clicked-border-color;
        transition-timing-function: ease;
        transition-duration: 0.1s;

        color: @nav-tabs-link-clicked-color;
      }
    }
  }

  &>li.active {
    &>a {
      &:link, &:active, a:hover, &:visited {
        border: none;
        border-radius: 0px;
        border-bottom: 3px solid @nav-tabs-active-link-border-color;
        margin-bottom: -2px;
        padding: @nav-link-padding;

        color: @nav-tabs-active-link-color;
        cursor: pointer;
        font-weight: bold;
      }
    }
  }
}


/* Pills */
.nav-pills {
  &>li {
    &>a {
      &:link, &:active, &:visited {
        padding: @nav-pills-padding;

        color: @nav-link-color;
      }

      &:hover {
        color: @nav-link-hover-color;
      }

      &:active {
      }
    }
  }

  &>li.active {
    &>a {
      &:link, &:active, a:hover, &:visited {
        background: @nav-pills-active-link-hover-bg;

        color: @nav-pills-active-link-hover-color;
      }
    }
  }
}


/* Sidenav */
.nav-side {
  margin-bottom: @line-height-computed;

  li {
    .fa, .glyphicon {
      margin-left: -8px;
      width: 30px;

      text-align: center;
    }

    &.title {
      h3 {
        border-bottom: 1px solid @nav-side-border;
        margin: 0px;
        padding: @nav-side-padding;

        font-size: @font-size-base;
      }
    }

    a {
      &, &:link, &:visited {
        border-bottom: 1px solid @nav-side-border;
        padding: @nav-side-padding;

        color: @nav-side-color;
      }

      &:hover {
        color: @nav-side-hover-color;
      }

      &:active {
        color: @nav-side-active-color;
      }
    }

    &:last-child {
      a {
        border-bottom: none;
      }
    }

    &.active {
      a {
        &, &:link, &:visited, &:active, &:hover {
          background: @nav-side-active-bg;
          border: none;
          border-radius: @border-radius-base;

          color: @nav-side-active-text-color;
        }
      }
    }

    .badge {
      float: right;
    }
  }

  &.large {
    a {
      font-size: @font-size-large;
    }

    .badge {
      position: relative;
      top: 2px;

      font-size: @font-size-base;
    }
  }
}


/* Badges */
.nav-pills, .nav-tabs {
  &>li {
    .badge {
      padding: 2px 3px;
      padding-top: 3px;
      padding-right: 4px;
      position: relative;
      bottom: 1px;
    }
  }
}

.nav-side {
  li {
    a {
      &, &:link, &:visited {
        .badge {
          background: transparent;
          float: right;
          margin-top: 1px;

          color: @text-color;
        }
      }
    }

    &.active {
      a {
        &, &:link, &:visited, &:active, &:hover {
          .badge {
            background: @nav-side-active-text-color;

            color: @nav-side-active-bg;
          }
        }
      }
    }
  }
}


/* Label */
.nav-pills, .nav-tabs, .nav-side {
  &>li {
    .label {
      padding: 2px 3px;
      padding-top: 1px;
      padding-right: 4px;
      position: relative;
      bottom: 1px;
    }
  }
}

.nav-pills {
  &>li.active {
    .label-default, .badge {
      background-color: @component-active-color;

      color: @nav-pills-active-link-hover-bg;
    }
  }
}