Create StillImage component
This commit is contained in:
parent
6de623127c
commit
2da584b5ee
3 changed files with 29 additions and 0 deletions
BIN
app/soapbox/components/still_image.js
Normal file
BIN
app/soapbox/components/still_image.js
Normal file
Binary file not shown.
|
@ -58,6 +58,7 @@
|
||||||
@import 'components/navigation-bar';
|
@import 'components/navigation-bar';
|
||||||
@import 'components/promo-panel';
|
@import 'components/promo-panel';
|
||||||
@import 'components/drawer';
|
@import 'components/drawer';
|
||||||
|
@import 'components/still-image';
|
||||||
@import 'components/timeline-queue-header';
|
@import 'components/timeline-queue-header';
|
||||||
@import 'components/badge';
|
@import 'components/badge';
|
||||||
@import 'components/trends';
|
@import 'components/trends';
|
||||||
|
|
28
app/styles/components/still-image.scss
Normal file
28
app/styles/components/still-image.scss
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
.still-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img,
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--play-on-hover {
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover canvas {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue