Instantly share code, notes, and snippets.
ronnyhartenstein/_navigation.scss
Last active Aug 29, 2015
OXID Bootstrap Responsive: widget/_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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment