// -------------------------------------------------- // Navigation menus // -------------------------------------------------- // Base // -------------------------------------------------- %nav { margin-left: 0; list-style: none; > li > a { display: block; text-decoration: none; } } // Pill nav // -------------------------------------------------- .nav-pills { @extend %nav; @extend .clearfix; > li { float: left; margin-right: 5px; > a { border: none; padding: 5px 12px; color: $primary; font-size: 16px; line-height: 20px; &:hover { color: $danger; background-color: scale-color($danger, $lightness: 70%); } } &.active > a, > a.active { color: $secondary; background-color: $danger; } } } // Stacked nav // -------------------------------------------------- .nav-stacked { position: relative; @extend %nav; border: 1px solid scale-color($primary, $lightness: 60%); padding: 0; overflow: hidden; background-color: scale-color($primary, $lightness: 90%); @include box-shadow(0 1px 0 scale-color($primary, $lightness: 90%)); > li { border-bottom: 1px solid scale-color($primary, $lightness: 60%); &:last-of-type { border-bottom: 0; } > a { margin: 0; padding: 13px 13px 13px 30px; font-size: 16px; line-height: 20px; cursor: pointer; color: $primary; } } .active > a, .active .fa-chevron-right { color: $secondary; background-color: $danger; } .count { font-size: 12px; line-height: 16px; } .fa-chevron-right { float: right; margin: 0; color: scale-color($primary, $lightness: 60%); font-size: 14px; line-height: 20px; } .glyph { font-size: 12px; width: 30px; text-align: center; position: absolute; left: 2px; line-height: 20px; } }