mirror of
https://github.com/twbs/bootstrap.git
synced 2025-10-03 00:03:44 -04:00
Merge ed1dd93bdbfe4f6c99bf67076b3bdd860ce47559 into 4189b3075c003b2d5dc9335195be7b750dfc2526
This commit is contained in:
commit
6fd0eea980
@ -347,6 +347,19 @@ $utilities: map-merge(
|
||||
),
|
||||
),
|
||||
// scss-docs-end utils-flex
|
||||
// Animation direction utilities
|
||||
// scss-docs-start utils-animation-direction
|
||||
"animation-direction": (
|
||||
property: animation-direction,
|
||||
class: animation-direction,
|
||||
values: (
|
||||
normal: normal,
|
||||
reverse: reverse,
|
||||
alternate: alternate,
|
||||
alternate-reverse: alternate-reverse,
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-animation-direction
|
||||
// Margin utilities
|
||||
// scss-docs-start utils-spacing
|
||||
"margin": (
|
||||
|
30
site/content/docs/5.3/utilities/animation-direction.md
Normal file
30
site/content/docs/5.3/utilities/animation-direction.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Animation direction
|
||||
description: Control the animation direction of elements with animation-direction utilities.
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Set the `animation direction` of elements with our animation-direction utilities.
|
||||
|
||||
Add `.animation-direction-reverse`, `.animation-direction-alternate` or `.animation-direction-alternate-reverse` as needed.
|
||||
|
||||
{{< example >}}
|
||||
<div class="spinner-border animation-direction-reverse" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow animation-direction-reverse" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border animation-direction-alternate" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Utilities API
|
||||
|
||||
Animation direction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
|
||||
|
||||
{{< scss-docs name="utils-animation-direction" file="scss/_utilities.scss" >}}
|
@ -118,6 +118,7 @@
|
||||
icon: braces-asterisk
|
||||
icon_color: red
|
||||
pages:
|
||||
- title: Animation direction
|
||||
- title: API
|
||||
- title: Background
|
||||
- title: Borders
|
||||
|
Loading…
x
Reference in New Issue
Block a user