Subversion Repositories web.active

/***********************************************************************************************
 * MASTHEAD
 *
 */

.main-nav-toggle {
  position: absolute;
  height: $masthead-height;
  padding: 1em 1.3em 0 1.7em;
  margin: 0;
  z-index: 9;
  background: $mainnav-toggle-bg !important;
  left: $mainnav-width;
  color: $mainnav-toggle-color;
  border-left: $mainnav-toggle-border;
  font-size: 14px !important; // font awesome renders clearer at 14px;
  transition: all $speed ease-in-out;
  @media only screen and (min-width: $wide-screen-width) {
    left: $mainnav-width-wide;
  }
  &:hover,
  &.closed:hover{
    color: $mainnav-toggle-hover-color;
    background: $mainnav-toggle-hover-bg;
  }

  &.closed {
    left: 0;
    border-left: none;
    color: $mainnav-toggle-closed-color;
  }

  &:before{
    position: absolute;
    content: "\f0d9";
    left: 13px;
    padding-top: 1px;
    font-family: fontAwesome;
    font-size: 11px;
    color: $mainnav-toggle-color;
  }

  &.closed:before{
    content: "\f0da";
    color: $mainnav-toggle-color;
  }
}

#branding {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: $mainnav-width;
  height: $masthead-height;
  background: $masthead-bg;

  @media only screen and (min-width: $wide-screen-width) {
    width: $mainnav-width-wide;
  }

  &.closed, &.hide {
    left: -999px;
  }
}

#logo {
  float: left;
  margin: 1em 0 0 1.5em;
  max-width: 150px;

  img.sm {
    display: none;
  }

  img {
    max-width: 100%;
  }
}

#masthead {
  height: $masthead-height;
  background: $masthead-bg;
  padding: 0 1.5em 0 $mainnav-width;
  position: relative;
  z-index: 08;
  font-size: 0.9em;

  @media only screen and (min-width: $wide-screen-width) {
    padding-left: $mainnav-width-wide;
  }

  &.closed, &.full {
    padding-left: 0;
  }

  .pw-container {
    line-height: 1;
  }

  #topnav {
    float: right;
    position: relative;
    height: $masthead-height;

    > li {
      padding: 0;
      margin: 0;
      list-style: none;
      display: inline-block;
      position: relative;
    }

    > li > a {
      background: $topnav-link-bg;
      color: $topnav-link-color;
      display: inline-block;
      margin: 0 ;
      padding: 1em 1.2em 1em 1.2em;
      height: $masthead-height;
      font-weight: $tabs-font-weight;
      vertical-align: middle;
      transition: all $speed ease-in-out;

      &:hover,
      &.hover{
        color: $topnav-link-hover-color;
        background: $topnav-link-bg-hover;
      }

      & i {
        font-size: 16px;
      }

    }

    li.avatar {

      & > a > i.fa {
        display: none;
      }

      a { 
        padding-top: 1em;
        padding-right: 1.5em;

        span{
          max-width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;  
          vertical-align: top;
          position: relative;
        }
      }
      
      img{
        border-radius: 50%;
        margin: 0 4px 0 0;
        width: 26px;
        height: 26px;
        vertical-align: top;
      }

    }

    & li.pw-dropdown{
      position: relative;

      &:not(.superuser) > a:after{
        content:"\f0d7";
        font-family: fontAwesome;
        color: $topnav-link-color;
        margin-left: 7px;
        font-size: 11px;

      }

      ul {
        display: block;
        visibility: hidden;
        opacity: 0;
        background: $dropdown-bg;
        box-shadow: $dropdown-shadow;
        border: $dropdown-border;
        border-top: none;
        width: 100%;
        min-width: 200px;
        position: absolute;
        padding: .5em 0;
        top: $masthead-height - 5;
        right: 0;
        transition: top $speed ease-in, opacity $speed ease-in;

        &:before{
          position: absolute;
          z-index: 10;
          top: -14px;
          right: 1.1em;
          content: "";
          border-width: 8px;
          border-style: solid;
          border-color: transparent transparent $dropdown-bg transparent;

        }
        li {
          white-space: nowrap;
          display: block;
        }
        li a{
          padding: 0.5em 1em;
          display: block;
          color: $dropdown-link-color;
          white-space: nowrap;
          &:hover{
            background: $dropdown-link-hover-bg;
          }

          & i.fa{
            color: $dropdown-icon-color;
            margin-right: 6px;
          }

          &.current{
            color: $dropdown-current-color;
            background: $dropdown-current-bg;

            &:hover{
              color: $dropdown-current-color;
              background: $dropdown-current-bg;
            }

            & i.fa{
              color: $dropdown-current-color;
            }
          }
        }

        &.open{
          visibility: visible !important;
          opacity: 1 !important;
          top: $masthead-height !important;
          z-index: 08 !important;
        }
      }

      &.superuser ul:before{
        right: 0.8em;
      }
    }


    // see .dropdown-menu styles below
    .quicklinks{
      padding: 1em;
      i.fa {
        font-size: 14px !important;
      }
    }

    a.on:hover,
    a.on {
      color: $mainnav-link-current-color;
      background: $mainnav-link-current-bg;
      text-decoration: none;
    }
  }
  
  #NotificationBug {
    left: $mainnav-width + 90;
    
    @media only screen and (min-width: $wide-screen-width) {
      left: $mainnav-width-wide + 90;
    }

    &.closed{
      left: 90px;
    }
  }


} /* #masthead */

/***********************************************************************************************
 * Masthead dropdown <ul> Menu
 *
 */

.pw-dropdown-menu {
  display: none;
  position: relative;
  z-index: 100;
  
  &,
  & ul {
    border: $dropdown-border;
    border-radius: 0 0 3px 3px !important;
    box-shadow: $dropdown-shadow;
  }
  
  .ui-menu-icon {
    display: none;
  }

  .pw-has-items-icon {
    float: right;
    position: relative;
    right: 0.5em;
    top: 3px;
  }

  // add-new dropdown
  &.pw-dropdown-menu-rounded,
  &.pw-dropdown-shortcuts {
    min-width: 200px;
    padding: 0.3em 0 0.3em 0;
    background: $dropdown-bg;
    box-shadow: $dropdown-shadow;
    border: $dropdown-border;
    font-size: 14px;

    a {
      border-radius: 0 !important;
      padding: 0.4em 0 0.4em 0.6em;

      &.ui-state-focus,
      &.ui-state-active,
      &:hover {
        color: $text-color;
        background: $dropdown-link-hover-bg !important;
        border-color: $dropdown-link-hover-bg;
      }
      
      i.fa {
        color: $mainnav-icon-color;
      }

    }

  }

  &.topnav {

    background: $dropdown-bg;
    padding: 0.2em 0 0.4em 0;

    .ui-menu-item {
      min-width: 8em;
      border: 0 !important;

      > a {
        background: none;
        border-radius: 0 !important;
        color: $dropdown-link-color;
        padding: 0.3em 0 0.3em 1em;
        font-size: 0.9em;
        line-height: 1;
        &:hover {
          background: $dropdown-link-hover-bg !important;
          color: $dropdown-link-hover-color;
        }
      }

      &.add a {
        color: $link;
        &:hover {
          color: $dark-link;
        }
      }

      .ui-state-active {
        border-color: $dropdown-bg !important;
        background: $dropdown-bg;
        color: $link;
      }
    }

    ul {
      background: $dropdown-bg;
      border-color: $dropdown-bg;
      width: 15em;
      border-radius: 3px !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
      > li > a {
        padding: 0.2em 1em 0.2em 1em !important;
        word-wrap: break-word
      }
    }

    li { min-width: 10em;}
  }
}