mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-12-12 17:21:10 -05:00
28 lines
740 B
SCSS
28 lines
740 B
SCSS
|
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
|
||
|
|
///
|
||
|
|
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
||
|
|
///
|
||
|
|
/// @example scss - Usage
|
||
|
|
/// .element {
|
||
|
|
/// @include hide-text;
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// @example css - CSS Output
|
||
|
|
/// .element {
|
||
|
|
/// overflow: hidden;
|
||
|
|
/// text-indent: 101%;
|
||
|
|
/// white-space: nowrap;
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// @todo Remove height argument in v5.0.0
|
||
|
|
|
||
|
|
@mixin hide-text($height: null) {
|
||
|
|
overflow: hidden;
|
||
|
|
text-indent: 101%;
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
@if $height {
|
||
|
|
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
|
||
|
|
}
|
||
|
|
}
|