Misago/uiframework/misago/css/misago/navs.less

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


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

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

        color: @nav-link-color;
      }

      &:hover {
        border: none;
        border-bottom: 2px solid @nav-tabs-link-hover-border-color;
        margin-bottom: -2px;
        padding: @nav-tabs-padding;

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

      &:active {
        border-bottom-color: @nav-tabs-link-active-border-color
      }
    }
  }

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

        color: @nav-tabs-active-link-hover-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 {
  li {
    a {
      &, &:link, &:visited {
        border-bottom: 1px solid @nav-side-border;
        padding: @nav-side-padding;

        color: @nav-side-color;

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

          text-align: center;
        }
      }

      &: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;
        }
      }
    }
  }
}


/* 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 {
  &>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;
    }
  }
}