mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
v5: Drop remaining deprecated mixins (#28461)
- Deletes mixin mentions from float docs - Deletes mixin mention from visibility docs - Deletes the image-replacement page for text-hide
This commit is contained in:
parent
c16532c724
commit
837ff0cc11
@ -16,9 +16,7 @@
|
||||
@import "mixins/screen-reader";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-emphasis";
|
||||
@import "mixins/text-hide";
|
||||
@import "mixins/text-truncate";
|
||||
@import "mixins/visibility";
|
||||
|
||||
// // Components
|
||||
@import "mixins/alert";
|
||||
@ -42,4 +40,3 @@
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/float";
|
||||
|
@ -1,14 +0,0 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@mixin float-left {
|
||||
float: left !important;
|
||||
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-right {
|
||||
float: right !important;
|
||||
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-none {
|
||||
float: none !important;
|
||||
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
||||
}
|
@ -1,11 +0,0 @@
|
||||
// CSS image replacement
|
||||
@mixin text-hide($ignore-warning: false) {
|
||||
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
|
||||
}
|
@ -1,8 +0,0 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Visibility
|
||||
|
||||
@mixin invisible($visibility) {
|
||||
visibility: $visibility !important;
|
||||
@include deprecate("`invisible()`", "v4.3.0", "v5");
|
||||
}
|
@ -56,10 +56,6 @@
|
||||
|
||||
// Misc
|
||||
|
||||
.text-hide {
|
||||
@include text-hide($ignore-warning: true);
|
||||
}
|
||||
|
||||
.text-decoration-none { text-decoration: none !important; }
|
||||
|
||||
.text-break {
|
||||
|
@ -10,32 +10,12 @@ toc: true
|
||||
|
||||
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items.
|
||||
|
||||
## Classes
|
||||
|
||||
Toggle a float with a class:
|
||||
|
||||
{{< example >}}
|
||||
<div class="float-left">Float left on all viewport sizes</div><br>
|
||||
<div class="float-right">Float right on all viewport sizes</div><br>
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Mixins
|
||||
|
||||
Or by Sass mixin:
|
||||
|
||||
{{< highlight scss >}}
|
||||
.element {
|
||||
@include float-left;
|
||||
}
|
||||
.another-element {
|
||||
@include float-right;
|
||||
}
|
||||
.one-more {
|
||||
@include float-none;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `float` value.
|
||||
|
@ -1,35 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Image replacement
|
||||
description: Swap text for background images with the image replacement class.
|
||||
group: utilities
|
||||
---
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Warning
|
||||
|
||||
The `text-hide()` class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.
|
||||
{{< /callout >}}
|
||||
|
||||
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1 class="text-hide">Custom heading</h1>
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< highlight scss >}}
|
||||
// Usage as a mixin
|
||||
.heading {
|
||||
@include text-hide;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
|
||||
|
||||
<div class="bd-example">
|
||||
<h1 class="text-hide" style="background-image: url('/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>
|
||||
{{< /highlight >}}
|
@ -22,13 +22,4 @@ Apply `.visible` or `.invisible` as needed.
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Usage as a mixin
|
||||
// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
|
||||
.element {
|
||||
@include invisible(visible);
|
||||
}
|
||||
.element {
|
||||
@include invisible(hidden);
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
@ -63,7 +63,6 @@
|
||||
- title: Embed
|
||||
- title: Flex
|
||||
- title: Float
|
||||
- title: Image replacement
|
||||
- title: Overflow
|
||||
- title: Position
|
||||
- title: Screen readers
|
||||
|
Loading…
Reference in New Issue
Block a user