.list-group-item { padding: 0; border-width: 2px; border-bottom-width: 2px; border-radius: 2px; margin-bottom: 15px; margin-top: 15px; @include transition(background-color .3s ease-in-out); .list-group-item-heading, .list-inline { margin: 10px 15px 10px 15px; padding: 0px 5px 10px 5px; } .list-inline { padding-left: 0px; color: $gray; font-size: 13px; } .list-group-item-heading { border-bottom: 2px solid #eee; color: $gray-darker; .heading-helper { float: right; font-weight: 600; color: $gray-light; font-size: 14px; } } .list-bar { width: 100%; height: 20px; } &.list-link:hover { cursor: pointer; background-color: lighten($gray-background, 8%); } &.list-condensed-link:hover { cursor: pointer; background-color: lighten($gray-background, 8%); } &.list-condensed-link { border-color: $gray-background; margin-bottom: 4px; margin-top: 4px; height: 40px; font-weight: 700; .name { font-size: 15px; padding-top: 7px; small { padding-right: 8px; padding-top: 2px; font-size: 12px; color: $gray-light; } } } .list-bar-horizontal { width: 20px; float: left; height: 100%; margin-right: 10px; } &.active { @include transition(border-color .1s linear); border-color: $purple; .list-bar, .list-bar-horizontal { @include transition(background-color .1s linear); background-color: $purple; } } }