PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #2544 from matrix-org/matthew/gradients

Browse source 
make overflow gradients much smaller and turn bottom into drop shadow
This commit is contained in:
Matthew Hodgson 2019-01-31 20:18:35 +01:00 committed by GitHub
commit 786e725f5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/structures/_RoomSubList.scss
View file

@ -134,7 +134,7 @@ limitations under the License.
position: sticky;
left: 0;
right: 0;
height: 35px;
height: 8px;
content: "";
display: block;
z-index: 100;
@ -142,21 +142,30 @@ limitations under the License.
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -35px;
margin-top: -8px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -35px;
margin-bottom: -8px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
transition: background-image 0.1s ease-in;
background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
}
/*
// for now, we remove the bottomOverflow entirely as we don't want to
// lose the screen real-estate due to a bg-colored gradient, but we also
// don't want to use drop shadows and risk a confusing hierarchy of cards.
// so, instead, we hard-clip at the bottom but soft-clip at the top.
&.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
background: linear-gradient(to bottom, rgba(242,245,248,0), rgba(242,245,248,1));
transition: background-image 0.1s ease-in;
margin: 0px -8px;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
}
*/
}
.collapsed {