.notifications-container { margin-bottom: 20px; margin-top: 20px; } .notifications-header { background-color: $color-concrete; border-left: 1px solid $color-alto; border-right: 1px solid $color-alto; border-top: 1px solid $color-alto; border-top-left-radius: 10px; border-top-right-radius: 10px; color: $color-dove-gray; font-weight: bold; padding: 8px; } .notifications-list { background-color: $color-white; border: 1px solid $color-alto; list-style: none; margin-bottom: 0; padding: 0; .notification { border-bottom: 1px solid $color-alto; padding-bottom: 10px; padding-top: 10px; &:hover { background-color: $color-gainsboro; } &.no-notifications { padding-left: 15px; } } .unseen { border-left: 4px solid $brand-primary; } .text-center { margin-left: 10px; padding-top: 10px; } .assignment { background-color: $brand-primary; border-radius: 50%; color: $color-concrete; display: inline-block; height: 30px; padding-top: 5px; width: 30px; } .system-message { background-color: $brand-success; border-radius: 50%; color: $color-concrete; display: inline-block; height: 30px; padding-top: 5px; width: 30px; } .deliver { background-color: $brand-warning; border-radius: 50%; color: $color-concrete; display: inline-block; height: 30px; padding-top: 5px; width: 30px; } .deliver-error { background-color: $brand-danger; border-radius: 50%; color: $color-concrete; display: inline-block; height: 30px; padding-top: 5px; width: 30px; } } .btn-more-notifications { margin-top: 15px; }