bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'placeholder-ios' into 'develop'

Browse source 
Placeholder gradient fixes

See merge request soapbox-pub/soapbox-fe!807
This commit is contained in:
Alex Gleason 2021-10-20 16:38:38 +00:00
commit 244525ae3c
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/styles/placeholder.scss
View file

@ -14,11 +14,11 @@
height: 100%;
background-image: linear-gradient(
90deg,
transparent 0%,
transparent 25%,
hsla(var(--foreground-color_hsl), 0) 0%,
hsla(var(--foreground-color_hsl), 0) 25%,
var(--foreground-color) 50%,
transparent 70%,
transparent 100%
hsla(var(--foreground-color_hsl), 0) 70%,
hsla(var(--foreground-color_hsl), 0) 100%
);
background-size: 200%;
animation: placeholder-pulse 2s infinite;
@ -74,11 +74,28 @@
width: 100%;
height: 100%;
z-index: 1;
background-image: linear-gradient(0deg, var(--background-color) 0%, transparent 50%, transparent 100%);
// On mobile, extend the gradient up to the ThumbNavigation height
background-image: linear-gradient(
0deg,
var(--background-color) 0%,
var(--background-color) var(--thumb-navigation-height),
hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100%
);
top: 0;
left: 0;
right: 0;
bottom: 0;
@media (min-width: 895px) {
// On desktop, fade into the bottom of the page
background-image: linear-gradient(
0deg,
var(--background-color) 0%,
hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100%
);
}
}
}
}