// -------------------------------------------------- // 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: dark-light-diff($quaternary, $secondary, 70%, -70%); } } &.active > a, > a.active { color: $secondary; background-color: $quaternary; } } } // Stacked nav // -------------------------------------------------- .nav-stacked { @extend %nav; padding: 0; overflow: hidden; background: dark-light-diff($primary, $secondary, 90%, -75%); li { border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -60%); position: relative; &:last-of-type { border-bottom: 0; } a { margin: 0; padding: 13px 13px 13px 30px; font-size: 1.143em; line-height: 20px; cursor: pointer; color: $primary; } } .active > a, & li > a.active { color: $secondary; background-color: $quaternary; } .active > a::after, & li > a.active::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: 30px; text-align: center; position: absolute; left: 2px; line-height: 20px; } }