akkoma-fe/src/components/notifications/notifications.scss

71 lines
1.4 KiB
SCSS
Raw Normal View History

2016-11-27 19:00:44 +00:00
@import '../../_variables.scss';
.notifications {
2016-11-27 19:00:44 +00:00
.panel-heading {
// force the text to stay centered, while keeping
// the button in the right side of the panel heading
position: relative;
.read-button {
position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em;
right: 0.7em;
}
}
2016-11-27 19:00:44 +00:00
.notification {
// Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em,
// they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
// which does not happen with 10px vs 4px + 6px.
padding: 0.4em 0 0 10px;
display: flex;
border-bottom: 1px solid silver;
.text {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
2016-11-27 18:44:56 +00:00
.icon-retweet {
color: $green;
}
.icon-reply {
color: $blue;
}
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
}
}
2016-11-27 18:44:56 +00:00
.avatar {
padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
}
2016-11-27 18:44:56 +00:00
&:last-child {
border: none
}
2016-11-27 18:44:56 +00:00
}
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
padding-left: 6px;
}
2016-11-27 18:44:56 +00:00
}