// -------------------------------------------------- // 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: 1.143em; line-height: 20px; transition: background .15s; &:hover { color: $quaternary; background-color: $quaternary-low; } } &.active > a, > a.active { color: $secondary; background-color: $quaternary; } } } // Stacked nav // -------------------------------------------------- .nav-stacked { @extend %nav; padding: 0; overflow: hidden; background: $primary-low; li { border-bottom: 1px solid $primary-low; position: relative; &:last-of-type { border-bottom: 0; } &.indent { padding-left: 15px; } a { margin: 0; padding: 13px; font-size: 1.143em; line-height: 20px; cursor: pointer; color: $primary; } } .active > a, li > a.active { color: $secondary; background-color: $quaternary; &:after { left: 90%; top: 33%; content: " "; position: absolute; border: 8px solid transparent; border-left-color: $secondary; } } .count { font-size: 0.857em; line-height: 16px; } .glyph { font-size: 0.857em; width: 1.25em; text-align: center; margin-right: .5em; line-height: 20px; } }