gistfile1.sass

$header-padding: 5px

.section-header
  background: whitesmoke
  border-bottom: solid 1px $gray-border
  padding: 15px 0

  h1, h2, h3, h4
    display: inline-block
    font-family: museo-slab, serif
    font-weight: 700
    margin: 0
  h1
    font-size: 30px

  .actions
    text-align: right
    .form-group 
      display: inline-block
      margin: 0 10px 0 0
      position: relative 
      top: 2px 
      @media (max-width: $screen-sm)  
        margin-top: 20px 

    .btn-blue 
      padding: 9px 20px
    .dropdown
      display: inline-block
      margin-right: 5px
      vertical-align: top


.vestorly-header
  padding-top: $header-padding
  padding-bottom: $header-padding
  border: none !important
  z-index: 100
  margin: 0
  +museo

  li:last-child .btn-header
    margin-right: 10px

  li > a
    font-size: 16px

  &.navbar
    +border-radius(0)

  .navbar-nav
    > li
      line-height: inherit
      margin-top: -$header-padding
      margin-bottom: -$header-padding

      & > a:not(.btn)
        padding: $header-padding 15px
        line-height: 50px
        font-size: 13px
        font-weight: 600
        text-transform: uppercase
        +media($screen-sm, max)
          padding: 0
          text-align: left
          &[data-toggle="dropdown"]
            .icon-caret-down
              padding-top: 20px
              float: right

    &.navbar-right 
      > li  
        margin: 0 -15px
        border-bottom: 1px solid $gray-border

        a
          padding: 0 15px

    .dropdown-menu
      +radius($radius)
      +shadow($shadow-hover)
    .dropdown-menu:not(.suggest-dropdown)
      background-color: #F1F0F2
      margin-top: -8px
      li
        &:not(:first-of-type)
          border-top: solid 1px #D1D3D4
        a
          font-size: 13px
          color: #58595B !important
          +ellipsis
          width: 160px
          padding-right: 24px
          +box
          span
            color: #BCBEC0 !important
            margin-right: -16px
            +trans
          &:hover
            color: #000 !important
            span
              color: #000 !important
          +media($screen-sm, max)
            width: 100%
            span
              margin-right: 0
  .mobile-btn-full
    padding-top: $header-padding
    padding-bottom: $header-padding
    margin-top: -$header-padding
    margin-bottom: -$header-padding

  .caret
    margin-left: 4px

  .header-settings-icon
    margin-right: 4px

  span.tm
    margin-left: 2px
    position: relative
    top: -1px
    vertical-align: text-top
    font-size: 10px

  .navbar-collapse
    margin: 0
    padding: 0
    border: none
    @media (max-width: $screen-sm)
      max-height: 0
      overflow: hidden
      +transition(all, 300ms, easeout)
      position: absolute 
      top: 50px
      left: 0
      right: 0
      background: $gray-dark

  .navbar-toggle-container
    float: right
    position: relative

    li
      display: inline-block
      line-height: inherit

  .navbar-toggle
    float: none
    margin: 0
    border: none
    padding: 0 5px

    span.icon-bars
      padding: 5px 8px
      border: 0 !important
      font-size: 20px
      +border-radius(2px)

    &:hover,
    &:focus
      background: 0

  .navbar-brand
    /* bootstrap override */
    line-height: inherit
    padding: 0 0 0 15px

  .navbar-right
    +freight

  .dropdown-menu
    padding: 0
    border-radius: 0
    +box-shadow(none)

    &:before
      @extend .font-awesome-icon
      @extend .icon-caret-up
      position: absolute
      top: -10px
      right: 14px
      color: $white

    > li > a
      padding: 15px 10px

    .dropdown-icon
      margin-right: 8px

  .divider
    margin: 0

  .header-logo
    min-height: 30px
    float: left

  .header-logo-with-text
    height: 40px
    width: 40px
    float: left
    margin: 0 10px 0 0

  .navbar-brand-text
    padding: 0
    letter-spacing: 0.025em
    float: left
    +museo
    &:focus
      outline: 0

@media (min-width: $screen-sm + 1) and (max-width: $screen-md)
  .vestorly-header
    .navbar-header.standard-user
      width: 25%
      a.navbar-brand
        width: 100%
        text-align: right
        img
          display: none !important

@media (max-width: $screen-sm)
  .vestorly-header
    .mobile-menu-open
      max-height: 750px

    ul.navbar-nav
      margin: 0

      li
        margin-top: 0
        margin-bottom: 0
        padding-top: 0
        padding-bottom: 0
        line-height: inherit

      li.mobile-btn-full
        line-height: inherit

    .navbar-right li
      text-align: center

    .dropdown-menu
      background: $white !important
      &:before
        display: none !important
      a
        color: $gray !important
        padding: 6px 10px !important
        text-align: left

    .mobile-btn-half
      width: 47.5%
      float: left
      &.left
        margin-right: 2.5%
      &.right
        margin-left: 2.5%

    .mobile-btn-full
      clear: both

@media (max-width: $screen-xs-min)
  .user-header,
  .advisor-header
    .navbar-brand
      font-size: 11px

.comments-header
  background: whitesmoke
  max-height: 0
  +transition(0.12s max-height, 0.2s opacity)
  z-index: -20
  +opacity(0)

  .container
    padding-top: 20px
    padding-bottom: 20px

  &.active
    max-height: 2000px
    z-index: 0
    +opacity(1)


.dropdown
  a[data-toggle="dropdown"] .icon-caret-down
    margin-left: 5px
    font-size: 10px
    padding-right: 0 !important

.dropdown-menu-caret
  width: 7px
  height: 7px
  position: absolute
  top: -4px
  right: 15px
  border-color: rgba(0, 0, 0, 0.15)
  border-style: solid
  border-width: 1px 0 0 1px
  +rotate(45deg)

.headline-select-group
  .headline-title
    +museo
    width: auto
    display: inline-block
    font-size: 30px
    font-weight: 700
    height: auto
    float: left

  select.headline-select
    font-size: 16px
    width: 0
    border: 0

.library_title
  +museo
  font-weight: 700
  color: $charcoal
  .dropdown-menu li a 
    +freight
    .icon-plus 
      margin-left: 10px

.rename-popover-trigger .vst-popover
  .popover-text 
    font-weight: 600
    font-size: 14px 
    margin: 0 0 10px
    
  .popover-content 
    width: 200px
    padding: 15px

  .btn-block 
    font-size: 12px !important
    padding: 7px 0 
    min-height: 0