Sha256: f2438d073a0d0a8b69ada909db72864fee04f5c2ea660d18178a2ac1cad84feb
Contents?: true
Size: 1.38 KB
Versions: 3
Compression:
Stored size: 1.38 KB
Contents
// Hides html text and replaces it with an image.
// If you use this on an inline element, you will need to change the display to block or inline-block.
// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
//
// Parameters:
//
// * `img` -- the relative path from the project image directory to the image.
// * `x` -- the x position of the background image.
// * `y` -- the y position of the background image.
@mixin replace-text($img, $x: 50%, $y: 50%) {
@include hide-text;
background: {
image: image-url($img);
repeat: no-repeat;
position: $x $y;
};
}
// Like the `replace-text` mixin, but also sets the width
// and height of the element according the dimensions of the image.
@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%) {
@include replace-text($img, $x, $y);
width: image-width($img);
height: image-height($img);
}
// Hides text in an element so you can see the background.
@mixin hide-text {
// slightly wider than the box prevents issues with inline-block elements
text-indent: 110%;
white-space: nowrap;
overflow: hidden;
}
// Hides text in an element by squishing the text into oblivion.
// Use this if you need to hide text contained in an inline element
// but still have it read by a screen reader.
@mixin squish-text {
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
Version data entries
3 entries across 3 versions & 1 rubygems