+@import '_variables';
+@import '_mixins';
+
.no-notification {
display: flex;
justify-content: center;
.notification {
display: flex;
- justify-content: space-between;
align-items: center;
font-size: inherit;
- padding: 15px 10px;
- border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+ padding: 15px 5px 15px 10px;
+ border-bottom: 1px solid $separator-border-color;
+ word-break: break-word;
+
+ &.unread {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
- .mark-as-read {
- min-width: 35px;
+ my-global-icon {
+ width: 24px;
+ margin-right: 11px;
+ margin-left: 3px;
- .glyphicon {
- display: none;
- cursor: pointer;
- color: rgba(20, 20, 20, 0.5)
- }
+ @include apply-svg-color(#333);
}
- &.unread {
- background-color: rgba(0, 0, 0, 0.05);
+ .avatar {
+ @include avatar(30px);
+
+ margin-right: 10px;
+ }
- &:hover .mark-as-read .glyphicon {
- display: block;
+ .message {
+ flex-grow: 1;
- &:hover {
- color: rgba(20, 20, 20, 0.8);
- }
+ a {
+ font-weight: $font-semibold;
}
}
+
+ .from-date {
+ font-size: 0.85em;
+ color: $grey-foreground-color;
+ padding-left: 5px;
+ min-width: 70px;
+ text-align: right;
+ }
}