.dashboard-title{ font-size: $base-font-size*0.875; font-weight: normal; color: $charcoal; text-transform: uppercase; background: $white; padding: $base-padding*3; } .dashboard-title:first-child{ @extend .mt0; } .dashboard-nav{ width: 100%; background: $white; display: block; margin-top: $base-margin*2; text-transform: capitalize; padding: $base-margin*0; overflow: hidden; a{ font-family: $font-family-sans-serif; font-size: $base-font-size*1.125; color: $charcoal; text-decoration: none; display: block; width: 100%; padding: 18px; &:hover, &:active{ color: $white; } span{ margin-top: $base-margin*3; } } &:hover, &:active, &.activepage{ background: $brand-blue-light; a{ color: $white; max-height: inherit; } span.nav-icon{ color: $white; } .inner-nav{ max-height: 200px; visibility: visible; opacity: 1; margin-top: 0; } a.sub-nav.activepage{ text-decoration: underline; } } .inner-nav li:hover, .inner-nav li:active{ text-decoration: underline; } span{ display: block; font-size: $base-font-size*0.75; } } .inner-nav{ visibility: hidden; max-height: 0; -webkit-transition: max-height 0.15s ease-out; -moz-transition: max-height 0.15s ease-out; transition: max-height 0.15s ease-out; margin-left: 74px; margin-top: -$base-margin*3; list-style: none; li{ color: $white; } a{ padding: $base-margin*0; font-size: $base-font-size*0.875; } } a.activepage{ background: $brand-blue-light; color: $white; } .sidebar{ @extend .white-trans; padding: $base-padding*4; p{ margin-bottom: $base-margin*2; } } span.nav-icon{ width: 40px; height: 29px; float: left; margin: $base-margin*2; margin-top: $base-margin*4; font-size: $base-font-size*1.5; color: rgb(179, 179, 179); text-align: center; } span.activepage{ color: $white; } /* Top-Bar Styles */ .contain-to-grid .top-bar{ @extend .row; } .title-area li.name img{ padding-top: $base-padding*2; } .top-bar a{ text-decoration: none; } .dropdown-open-link{ min-width: 201px; //The 1 px accounts for the border on the dropdown } .top-bar-nav.fixed{ max-height: 50px; } ul.dropdown:not(.nested){ -webkit-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5); -moz-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5); box-shadow: 0px 8px 20px -5px rgba(50,50,50,0.5); border-left: solid 1px darken($brand-blue-light, 5%); border-right: solid 1px darken($brand-blue-light, 5%); margin-top: -5px; } .dropdown{ .nested{ margin-top: -1px; border-right: solid 1px darken($brand-blue-light, 5%); border-left: solid 1px darken($brand-blue-light, 5%); li{ background: lighten($brand-blue-light, 3%); } } .title.back a{ font-weight: bold; } } .sub-nav { margin-left: -14px; }