Misago/uiframework/misago/css/misago/header.less

//
// Page Header
// --------------------------------------------------


// Generic spacing and stuff
//
//##
.page-header {
	border-bottom-width: 2px;
  margin-top: @line-height-computed * -1;
}


// Breadcrumb
//
//##
.page-header {
  &>.container {
    .breadcrumb {
      margin-bottom: (@line-height-computed * @headings-line-height) * -1;

      color: @breadcrumb-color;
      font-size: @font-size-small;

      &>li {
        + li:before {
          /* Tinysh hack to remove BS3's style */
          display: none;
        }

        a:link, a:visited {
          color: @breadcrumb-color;
        }

        a:hover, a:active {
          color: @breadcrumb-active-color;
          text-decoration: none;
        }

        span {
          margin: 0px 4px 0px 6px;
        }
      }
    }
  }
}


// Actions
//
//##
.page-header {
  &>.container {
    .page-actions {
      float: right;
      margin-top: (@line-height-computed * @headings-line-height) * -1 - (@line-height-computed * 1.5) + @padding-base-vertical - 1;

      .dropdown-menu {
        left: auto;
        right: 0px;

        &:after {
          left: auto;
          right: 12px;
        }
      }
    }
  }
}

/* Small displays */
@media (max-width: @screen-sm-min) {
  .page-header {
    &>.container {
      .page-actions {
        clear: both;
        float: none;
        margin-top: @line-height-computed;
      }
    }
  }
}


// Details
//
//##
.page-header {
  &>.container {
    .page-details {
      display: block;
      clear: both;

      color: @text-muted;

      a:link, a:visited {
        color: @text-muted;
      }

      a:active, a:hover {
        color: @text-color;
        text-decoration: none;
      }
    }
  }
}

/* Small displays */
@media (max-width: @screen-sm-min) {
  .page-header {
    &>.container {
      .page-details {
        margin-top: @line-height-computed;
      }
    }
  }
}


// Pills
//
//##
.page-pills {
  border-bottom: 1px solid @page-header-border-color;
  margin: @line-height-computed * -1 0px @line-height-computed;
  padding: (@line-height-computed / 2) 0px;

  .nav-pills {
    margin: 0px;

    &>li {
      &>a {
        padding: @page-pills-padding;

        font-size: @font-size-large;

        &>.badge {
          border-radius: @border-radius-small;
          position: relative;
          bottom: 3px;
        }

        &:hover {
          &>.badge {
            background-color: @nav-link-hover-color;
          }
        }
      }

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