Deprecate .hide-text mixin for .text-hide as mixin and class
This commit is contained in:
parent
e25ca1e7a9
commit
6de67c0ab6
4
css.html
4
css.html
|
@ -2294,14 +2294,14 @@ For example, <code><section></code> should be wrapped as inline.
|
||||||
|
|
||||||
|
|
||||||
<h3 id="helper-classes-image-replacement">Image replacement</h3>
|
<h3 id="helper-classes-image-replacement">Image replacement</h3>
|
||||||
<p>Utilize the <code>.hide-text</code> mixin or <code>.text-hide</code> class to help replace an element's text content with a background image.</p>
|
<p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<h1 class="text-hide">Custom heading</h1>
|
<h1 class="text-hide">Custom heading</h1>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
// Usage as a Mixin
|
// Usage as a Mixin
|
||||||
.heading {
|
.heading {
|
||||||
.hide-text();
|
.text-hide();
|
||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -69,8 +69,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// CSS image replacement
|
// CSS image replacement
|
||||||
|
//
|
||||||
|
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
|
||||||
|
// mixins being reused as classes with the same name, this doesn't hold up. As
|
||||||
|
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
|
||||||
|
//
|
||||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||||
.hide-text() {
|
|
||||||
|
.hide-text(),
|
||||||
|
.text-hide() {
|
||||||
font: ~"0/0" a;
|
font: ~"0/0" a;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
.text-hide {
|
.text-hide {
|
||||||
.hide-text();
|
.text-hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue