Newer
Older
dmpopidor / app / assets / stylesheets / blocks / _navbars.scss
/* For org navbar custom height */
#org-navbar {
  border-radius: 0px;
  margin-top: -20px;
}
@media (min-width: 768px) {
  #org-navbar .navbar-nav li a {
    line-height: 102px;
    height: 102px;
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  #admin-dropdown ul li a, #super-admin-dropdown ul li a {
    line-height: 26px !important;
    height: 26px !important;
    margin-top: 3px !important;
  }
}

#org-navbar {
  margin-top: -20px;

  #banner-org-name {
    margin-top: 40px;
  }
}
@media (min-width: 768px) {
  #org-navbar .navbar-nav li a {
    line-height: 102px;
    height: 102px;
    padding-top: 0;
  }
  #org-navbar .org-links {
    padding-top: $grid-gutter-width / 2;
  }
  #org-navbar .org-a {
    line-height: 36px !important;
    height: 36px !important;
    vertical-align: middle !important;
    padding-top: 0;
    padding-bottom: 0;
  }
}

// Inverse navbar. This is defined as a clone of .navbar-branding with customizations

$navbar-branding-color: lighten($gray-light, 15%) !default;
$navbar-branding-bg: #222 !default;
$navbar-branding-border: darken($navbar-branding-bg, 10%) !default;
$navbar-branding-link-color: lighten($gray-light, 15%) !default;
$navbar-branding-link-hover-color: #fff !default;
$navbar-branding-link-hover-bg: transparent !default;
$navbar-branding-link-active-color: $navbar-branding-link-hover-color !default;
$navbar-branding-link-active-bg: darken($navbar-branding-bg, 10%) !default;
$navbar-branding-link-disabled-color: #444 !default;
$navbar-branding-link-disabled-bg: transparent !default;
$navbar-branding-brand-color: $navbar-branding-link-color !default;
$navbar-branding-brand-hover-color: #FFFFFF !default;
$navbar-branding-brand-hover-bg: transparent !default;
$navbar-branding-toggle-hover-bg: #333 !default;
$navbar-branding-toggle-icon-bar-bg: #fff !default;
$navbar-branding-toggle-border-color: #333 !default;

.navbar-branding {
  @extend .navbar-inverse;
  background-color: $navbar-branding-bg;
  border-color: $navbar-branding-border;

  .navbar-text {
    color: $navbar-branding-color;
  }

  .navbar-nav {
    > li > a {
      color: $navbar-branding-link-color;

      &:hover,
      &:focus {
        color: $navbar-branding-link-hover-color;
        background-color: $navbar-branding-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-branding-link-active-color;
        background-color: $navbar-branding-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-branding-link-disabled-color;
        background-color: $navbar-branding-link-disabled-bg;
      }
    }
  }

  // Darken the responsive nav toggle
  .navbar-toggle {
    border-color: $navbar-branding-toggle-border-color;
    &:hover,
    &:focus {
      background-color: $navbar-branding-toggle-hover-bg;
    }
    .icon-bar {
      background-color: $navbar-branding-toggle-icon-bar-bg;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: darken($navbar-branding-bg, 7%);
  }

  // Dropdowns
  .navbar-nav {
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: $navbar-branding-link-active-bg;
        color: $navbar-branding-link-active-color;
      }
    }

    @media (max-width: $grid-float-breakpoint-max) {
      // Dropdowns get custom display
      .open .dropdown-menu {
        > .dropdown-header {
          border-color: $navbar-branding-border;
        }
        .divider {
          background-color: $navbar-branding-border;
        }
        > li > a {
          color: $navbar-branding-link-color;
          &:hover,
          &:focus {
            color: $navbar-branding-link-hover-color;
            background-color: $navbar-branding-link-hover-bg;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-branding-link-active-color;
            background-color: $navbar-branding-link-active-bg;
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-branding-link-disabled-color;
            background-color: $navbar-branding-link-disabled-bg;
          }
        }
      }
    }
  }

  .navbar-link {
    color: $navbar-branding-link-color;
    &:hover {
      color: $navbar-branding-link-hover-color;
    }
  }

  .btn-link {
    color: $navbar-link-color;
    &:hover,
    &:focus {
      color: $navbar-branding-link-hover-color;
    }
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus {
        color: $navbar-link-disabled-color;
      }
    }
  }
}