causeway-standard-theme/causeway/components/site-header.less

// Sticky Header
// --------------------------------------------------
.site-header {
  background-color: @white;
  left: 0;
  position: fixed;
  top: 0;
  width: 100% !important;
  margin: 0 0 20px 0;
  padding: 0;
}

.site-header-holder {
  position: relative;
  z-index: 3000;
}

.site-heading {
  height: @heading-height;
  position: relative;
  .site-logo {
    background: url('../images/causeway-logo.png') no-repeat transparent;
    -webkit-background-size: 21px;
    background-size: 21px;
    width: 21px;
    height: 21px;
    float: left;
    .inline;
    margin: 18px 15px 17px 20px;
  }


  .page-title {
    font-family: "Roboto Light", "Roboto", Helvetica, Arial, sans-serif;
    position: absolute;
    left: @heading-height;
    line-height: @heading-height;
    margin: 0;
    .font-size(21);
  }
}

.account-management {
  float: right;
  margin-right: 25px;
  height: @heading-height;
  .user-avatar, .user-info {
    display: inline-block;
  }
  .user-avatar {
    margin-top: 7px;
    margin-right: 10px;
    img {
      max-height: 32px;
      max-width: 32px;
      width: 32px;
      height: auto;
      border-radius: 100%;
    }
  }
  .user-info {
    height: @heading-height;
    line-height: @heading-height;
    .dropdown-menu {
      left: auto;
      right: 0;
      z-index: 1001;
    }
    a {
      .font-size(12);
      font-weight: normal;
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      color: @black080;
      margin-right: 20px;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
      &:last-child, &:last-of-type {
        margin-right: 0;
      }
      .caret {
        border-color: @black050 transparent transparent transparent;
        margin-bottom: 4px;
      }
    }
  }
}

.additional-nav-info {
  font-family: arial, sans-serif;
  .font-size(12);
  line-height: 34px;
  text-align: right;
  margin-right: 15px;
  color: @black080;
  float: right;
  //> span {
  //  margin-right: 20px;
  //  &:last-child {
  //    margin-right: 0;
  //  }
  //}
}

.site-notification, .cs-badge {
  display: inline-block;
  height: 34px;
  width: 34px;
  margin-right: 5px;
  text-align: center;
  color: inherit;
  position: relative;
  &:hover {
    background: @enterprise-blue;
    color: @white;
    a {
      color: inherit;
    }
  }
  a {
    color: inherit;
    display: block;
    height: 34px;
    width: 34px;
    text-align: center;
  }
  .glyphicon-notification, .fa {
    .font-size(15);
  }
  .notification-count, .cs-badge-count {
    display: none;
    width: 18px;
    height: 18px;
    .border-radius(18px);
    background-color: @deep-orange;
    border: 2px solid @white;
    text-align: center;
    line-height: 14px;
    font-weight: bold;
    .font-size(9);
    color: @white;
    position: absolute;
    top: 2px;
    right: 2px;
  }
  &.has-notification, &.has-count {
    a {
      text-align: left;
    }
    .glyphicon-notification, .fa {
      padding-left: 4px;
      margin-left: 0;
    }
    .notification-count, .cs-badge-count {
      display: block;
    }
  }
}

.additional-menu {
  position: relative;
  height: 34px;
  display: inline-block;
  &.open {
    > a {
      background-color: @enterprise-blue;
      color: @white;
    }
    .dropdown-backdrop + .dropdown-menu{
      right: 0;
      left: auto;
    }
  }
  > a {
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    display: inline-block;
    cursor: pointer;
    color: inherit;
    > span {
      color: inherit;
    }
    &:hover {
      background-color: @enterprise-blue;
      color: @white;
    }
    + .dropdown-menu {
      right: 0;
      left: auto;
      text-align: left;
    }
  }
}

@media @desktop {
  body {
    &.site-menu-open,
    &.left-nav-open {
      overflow-y: hidden;
    }
  }

  .resp-back {
    position: absolute;
    left: 0;
    height: @primary-tap-height;
    line-height: @primary-tap-height;
    display: none;
    > a {
      display: none;
      width: 40px;
      text-align: center;
      .site-menu-open &.visible {
        display: inline-block;
        float: left;
        + .title {
          padding-left: 0;
        }
      }
      .fa {
        font-weight: lighter;
        font-size: 16px;
        color: @black080;
        margin-left: 0;
      }
    }
    .site-menu-open &.visible {
      display: inline-block;
    }
    .title {
      padding-left: 15px;
      text-transform: uppercase;
    }
  }

  .additional-menu {
    height: @primary-tap-height;
    line-height: @primary-tap-height;

    > a {
      height: @primary-tap-height;
      line-height: @primary-tap-height;
    }

    .site-menu-wrapper {
      position: fixed;
      right: -100%;
      top: 100px;
      transition: right 500ms ease-in;
      z-index: 1000;
      min-width: 320px;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: @cool-grey045;
      > .dropdown-menu {
        position: static;
        display: block;
      }
      > ul, > ol, .navbar-nav, .dropdown-menu {
        float: none;
        border: none;
        background-color: transparent;
        padding: 20px 0;
        border-bottom: 1px solid @black020;
        &:last-child {
          border-bottom: none;
        }
        > li {
          float: none;
          text-align: left;
          position: static;
          a {
            padding: 17px 20px 17px 40px;
            font-size: 15px;
            line-height: 1;
            height: auto;
          }
        }
        > .dropdown {
          &.open {
            .dropdown-menu {
              display: none;
            }
          }
        }
      }
      .dropdown {
        .fa-chevron-down {
          &:before {
            content: "\f054";
          }
        }
      }
      .dropdown-submenu {
        > a {
          &:after {
            display: inline-block;
            padding-left: 10px;
            float: none;
            vertical-align: middle;
          }
        }
      }
    }
    &.open {
      .site-menu-wrapper {
        right: 0;
        transition: right 500ms ease-in;
        > ul, > ol, .navbar-nav {
          float: none;

          li {
            &.dropdown, &.dropdown-submenu {
              ul {
                &.dropdown-menu {
                  width: 100%;
                  height: 100%;
                  background-color: @cool-grey;
                  top: 0;
                  display: block;
                  right: -100%;
                  left: auto;
                  transition: right 500ms ease-in;
                  overflow: auto;
                }
              }
              &.open {
                > ul {
                  &.dropdown-menu {
                    right: 0;
                    transition: right 500ms ease-in;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .additional-nav-info {
    .site-notification, .cs-badge {
      height: @primary-tap-height;
      line-height: @primary-tap-height;
      a {
        height: @primary-tap-height;
        line-height: @primary-tap-height;
      }
    }
  }

  .navbar {
    &.site-menu {
      background-color: @black005;
      .border-radius(0);
      height: @primary-tap-height;
    }
  }

  .nav {
    .open {
      > a {
        background-color: @enterprise-blue;
        &:hover {
          background-color: @enterprise-blue;
        }
      }
    }
  }

  .site-header {
    //border-bottom: 1px solid @black020;
  }


  .account-management {
    margin-right: 11px;
    .user-info {
      position: relative;
      text-indent: -99999px;
      width: 14px;
      .fa {
        position: absolute;
        right: 0;
        text-indent: 0;
        line-height: @heading-height;
        color: @black080;
        font-size: 14px;
        margin: 0;
      }

      .dropdown-menu {
        text-indent: 0;
      }
    }
  }
}