scratch-www/src/components/social-message/social-message.scss
2023-05-22 15:32:37 -04:00

82 lines
1.3 KiB
SCSS

@import "../../colors";
@import "../../frameless";
.social-message {
margin: 0;
border-bottom: 1px solid $ui-border;
padding: 1rem;
list-style-type: none;
}
.social-message-icon {
opacity: .25;
}
.social-message.mod-unread {
background-color: $ui-blue-10percent;
}
.social-message.mod-unread .social-message-icon {
opacity: 1;
}
.flex-row.mod-social-message {
justify-content: space-between;
align-items: flex-start;
}
.social-message-content {
display: flex;
max-width: 38.75rem;
text-align: left;
align-items: flex-start;
}
.social-message-icon {
margin: .2rem 1rem 0 0;
min-width: 1.25rem;
}
a.social-messages-profile-link {
color: $type-gray;
&:hover {
color: $link-purple;
}
}
.flex-row.mod-comment-message {
justify-content: flex-start;
}
.comment-text {
margin-left: 1.5rem;
}
@media #{$small} {
.social-message {
text-align: left;
}
.social-message-date {
align-self: flex-end;
}
.social-message-content {
max-width: 100%;
}
}
@media #{$medium} {
.social-message {
text-align: left;
}
.social-message-date {
align-self: flex-end;
}
.social-message-content {
max-width: 100%;
}
}