OXID Bootstrap Responsive: widget/_navigation.scss

_navigation.scss

@charset "UTF-8";
/**
 * Navigation
 *
 * @version $Id$
 */

header {
  background-color: #fafafa ;
  padding-top: 10px;

  .well{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    padding: 0;
    padding-top: 20px;
    border: 0;
    background: transparent;
    // da Icons im Kopf nah am oberen Rand kein Abstand bei Smartphone
    @media (max-width: 767px) {
      padding-top: 0;
      margin-bottom: 5px;
    }
  }

  // Logo skalieren
  .logo{
    padding: 0;
    position: relative;
    img {
      width: 100%;
      @media (min-width: 768px) {
        max-height: 81px;
        width: auto;
      }
    }
  }

  // Servicemenue
  #servicesTrigger {
    // bei Icon kein Einzug
    margin-top: 0;
  }
  #topMenu {
    margin-top: 0;
  }
  #topMenu li, .selectedValue a {
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
    //padding: 0;
    text-transform: none;
  }
  #topMenu a:hover, .selectedValue a:hover {
    color: $orange2;
  }
  .logoutLink {
    background: none;
    padding-left: 10px;
  }

  // Warenkorb-Icon
  #minibasket_container {
    @media (max-width: 767px) {
      padding-top: 0;
      margin-bottom: 0;
    }
  }

  .basketBox {
    position: inherit;
    right: 0;
    top: 0;
    img {
      position: inherit;
      @media (min-width: 992px) {
        height: 56px;
      }
      @media (max-width: 767px) {
        height: 35px;
      }
    }
  }

  // keinen Menüdivider und Scrolldown-Pfeil wg. Icons
  .selectedValue, .selectedValue a, #topMenu li {
    background-image: none;
  }
  .selectedValue a {
    padding-right: 0;
  }
}

// Kategorie-Navibar
.navbar-inverse {
  background-color: #4a4a4a;
  border-color: #080808;
  color: white;
}

.navbar {
  border-radius: 0;

  .navbar-nav>li>a {
    color: white;
  }
  li a:hover, li a.active{
    background-color: $orange2 !important;
  }
  li.nav-dropdown .caret{
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
  @media (min-width: 768px) {
    li.nav-dropdown ul li a{
      font-family: Arial;
      font-size: 15px;
      color: #333!important;
      text-transform: inherit;
    }
    li.nav-dropdown ul li a:hover{
      background-color: #f1f1f1!important;
    }
  }

  font: 2em "Yanone Kaffeesatz", arial, serif;
  .dropdown-menu>li {
    font: 1.5em "Yanone Kaffeesatz", arial, serif;
  }

  .navbar-brand {
    color: lightgray;
  }

  button {
    color: black;
  }

  li a { color: $schwarz2; }
  .nav>li>a:focus,
  .nav>li>a:hover {
    background-color: $orange2;
    color: white;
  }

  .nav .open>a,
  .nav .open>a:focus,
  .nav .open>a:hover {
    background-color: $orange3;
    border-color: $orange3;
    color: white;
  }
  .dropdown-menu>li>a:focus,
  .dropdown-menu>li>a:hover {
    background-color: $orange2;
    color: white;
  }

  .navbar-toggle {
    border-color: $orange2;
    .icon-bar { background-color: $orange3; }
  }
}

// Unterseiten Menue

a.list-group-item:focus,
a.list-group-item:hover {
  color: white;
  background-color: $orange2;
  border-color: $orange3;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: $hellgrau;
  border-color: $mittelgrau;
  color: $dunkelgrau;
  font-size: 1em;
  font-weight: bold;
}

// Breadcrumb
.breadcrumb {
  margin-left: 0;

  @media (max-width: 767px) {
    margin: -10px 0 0 0;
    background-color: transparent;
    padding: 0;
  }
}