Sha256: b43be70af58d5dd8add2beb32203920adbb845dbafc2006db603027b5ee90d1d
Contents?: true
Size: 1.28 KB
Versions: 12
Compression:
Stored size: 1.28 KB
Contents
.play {
@extend .overlay;
// ## Play Button
//
// - the image is centered
// - and the height is 40% of the parent elem height
// - the width is set by the browser automatically
// - because the height is set to a percentage of the parent elem,
// the parent elem height must match if you want the play button
// size to match.
// - NOTE the .play class is added to a parent element of the <img>,
// not the <img> itself, because <img>s do not allow psuedo elements.
&::after {
// This url will not work from an app autogen/ file.
background: transparent url(#{$imghost}playbutton@2x.png) no-repeat center;
-webkit-background-size: auto 50%;
background-size: auto 50%;
}
// Add a class of `tl, tr, bl, br` to position the play btn in the top left, etc.
// The image will also be sized at 30% of the height instead of 40%.
&.tl::after, &.tr::after, &.bl::after, &.br::after {
-webkit-background-size: auto 30%;
background-size: auto 30%;
}
&.tl::after {
background-position: 10% 10%;
}
&.tr::after {
background-position: 90% 10%;
}
&.bl::after {
background-position: 10% 90%;
}
&.br::after {
background-position: 90% 90%;
}
}
Version data entries
12 entries across 12 versions & 1 rubygems