Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Unread indicator was invisible behind column header, adjusted (#3720)

Browse source 
* Unread indicator was invisible behind column header, adjusted

* Unread indicator now a CSS pseudo-element

* Adjust flex
This commit is contained in:
Eugen Rochko 2017-06-12 20:02:17 +02:00 • committed by GitHub
parent 0d23c81662
commit 37dbfa4cd7
4 changed files with 32 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/javascript/styles/components.scss
View file

@ -60,7 +60,6 @@
.column-collapsable {
position: relative;
flex: 0 0 auto;
.column-collapsable__content {
overflow: auto;
@ -2008,6 +2007,28 @@ button.icon-button.active i.fa-retweet {
}
}
.column-header__wrapper {
position: relative;
flex: 0 0 auto;
&.active {
&::before {
display: block;
content: "";
position: absolute;
top: 35px;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
pointer-events: none;
height: 28px;
z-index: 1;
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
}
}
}
.column-header {
padding: 15px;
font-size: 16px;
@ -2020,11 +2041,11 @@ button.icon-button.active i.fa-retweet {
&.active {
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
}
&.active .column-header__icon {
color: $ui-highlight-color;
text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
.column-header__icon {
color: $ui-highlight-color;
text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
}
}
&.hidden-on-mobile {
@ -2372,20 +2393,6 @@ button.icon-button.active i.fa-retweet {
}
}
.status-list__unread-indicator,
.notifications__unread-indicator {
position: absolute;
top: 35px;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
pointer-events: none;
height: 28px;
z-index: 1;
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
}
@keyframes pulse {
0% {
opacity: 1;