Sha256: 2e7750e1a308fc0716619d78e03f7deceeacdb0d5e8457ff00e6a10c6867c41c
Contents?: true
Size: 1.61 KB
Versions: 5
Compression:
Stored size: 1.61 KB
Contents
// Overlay an element with a psuedo-element.
//
// Add this to an element via @extend
// .your_class {
// @extend .overlay;
//
// &::after {
// /* custom */
// }
// }
.overlay {
position: relative;
&::after {
content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
}
.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 {
background-repeat: no-repeat;
background-image: url(#{$imghost}playbutton@2x.png);
background-position: 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
5 entries across 5 versions & 1 rubygems