Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !38167

Animation direction utilities

  • Review changes

  • Download
  • Email patches
  • Plain diff
Open Oralia Hernandez requested to merge github/fork/oraliahdz/animation-utilities into main 2 years ago
  • Overview 1
  • Commits 9
  • Pipelines 1
  • Changes 3

Description

Implemented animation-direction in utilities folder

Motivation & Context

Change animation behavior to elements with animation like spinners by controlling it's direction

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

  • https://deploy-preview-38167--twbs-bootstrap.netlify.app/docs/5.3/utilities/animation-direction/

Related issues

Issue #38150

Compare
  • version 1
    2f9b4e77
    2 years ago

  • main (HEAD)

and
  • latest version
    2f9b4e77
    9 commits, 2 years ago

  • version 1
    2f9b4e77
    9 commits, 2 years ago

3 files
+ 44
- 0

    Preferences

    File browser
    Compare changes
sc‎ss‎
_utilit‎ies.scss‎ +13 -0
si‎te‎
content/docs/‎5.3/utilities‎
animation-d‎irection.md‎ +30 -0
da‎ta‎
sideb‎ar.yml‎ +1 -0
scss/_utilities.scss
+ 13
- 0
  • View file @ 0e81ba71

  • Edit in single-file editor

  • Open in Web IDE


@@ -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": (
site/content/docs/5.3/utilities/animation-direction.md 0 → 100644
+ 30
- 0
  • View file @ 0e81ba71

  • Edit in single-file editor

  • Open in Web IDE

---
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" >}}
site/data/sidebar.yml
+ 1
- 0
  • View file @ 0e81ba71

  • Edit in single-file editor

  • Open in Web IDE


@@ -118,6 +118,7 @@
icon: braces-asterisk
icon_color: red
pages:
- title: Animation direction
- title: API
- title: Background
- title: Borders
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: primer/design!282
Source branch: github/fork/oraliahdz/animation-utilities

Menu

Explore Projects Groups Snippets