mirror of
https://github.com/flarum/framework.git
synced 2024-12-13 15:13:42 +08:00
f89f114fad
* Don't use body as tooltip container, allow notification area overflow Badge tooltips are using container: 'body', so they can overflow the notification area. When the user navigates back while a badge tooltip is showing, the tooltip remains visible. This commit removes the body container attribute and instead allows the notificationDropDown to overflow, so badge tooltips aren't cut off. Instead, this adds overflow: hidden to NotificationList. Fixes #2118. * Remove newline
149 lines
2.7 KiB
Plaintext
149 lines
2.7 KiB
Plaintext
|
||
.NotificationList {
|
||
overflow: hidden;
|
||
& .loading-indicator {
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
.NotificationList-header {
|
||
@media @tablet-up {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid @control-bg;
|
||
|
||
h4 {
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
margin: 0;
|
||
color: @muted-color;
|
||
}
|
||
}
|
||
.Button {
|
||
float: right;
|
||
margin-top: -11px;
|
||
margin-right: -11px;
|
||
|
||
// The NotificationList may be displayed inside of the drawer as a
|
||
// dropdown menu – but the drawer may have .light-contents() applied to
|
||
// it. In this case we will need to reset the button's styles back to
|
||
// normal.
|
||
& when (@config-colored-header = true) {
|
||
.Button--color(@control-color, @control-bg);
|
||
|
||
&:hover {
|
||
color: @link-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.NotificationList-empty {
|
||
color: @muted-color;
|
||
text-align: center;
|
||
padding: 50px 0;
|
||
font-size: 16px;
|
||
}
|
||
.NotificationGroup {
|
||
border-top: 1px solid @control-bg;
|
||
margin-top: -1px;
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.NotificationGroup-header {
|
||
font-weight: bold;
|
||
color: @heading-color !important;
|
||
padding: 6px 15px;
|
||
display: block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.NotificationGroup-badges {
|
||
margin-left: -2px;
|
||
margin-right: 18px;
|
||
vertical-align: 1px;
|
||
|
||
.Badge {
|
||
margin-right: -13px;
|
||
position: relative;
|
||
.Badge--size(21px);
|
||
}
|
||
}
|
||
.NotificationGroup-content {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.Notification {
|
||
display: block;
|
||
padding: 8px 15px 8px 70px;
|
||
color: @muted-color !important; // required to override .light-contents applied to header
|
||
overflow: hidden;
|
||
|
||
.unread& {
|
||
background: @control-bg;
|
||
}
|
||
&:hover {
|
||
text-decoration: none;
|
||
background: @control-bg;
|
||
|
||
.Notification-action {
|
||
display: block;
|
||
}
|
||
}
|
||
.Avatar {
|
||
.Avatar--size(24px);
|
||
float: left;
|
||
margin: -2px 0 -2px -55px;
|
||
}
|
||
time {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.Notification-action {
|
||
float: right;
|
||
display: none;
|
||
margin-top: -7px;
|
||
margin-right: -10px;
|
||
line-height: inherit;
|
||
padding: 5px 0;
|
||
|
||
& when (@config-colored-header = true) {
|
||
.Button--color(@control-color, @control-bg);
|
||
|
||
&:hover {
|
||
color: @link-color;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.Notification-icon {
|
||
float: left;
|
||
margin-left: -23px;
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
}
|
||
.Notification-content {
|
||
margin-right: 5px;
|
||
|
||
.username {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.Notification-excerpt {
|
||
color: @muted-more-color;
|
||
font-size: 11px;
|
||
margin-top: 3px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|