From 4b6b3a38bd8c526131bb10071ef82f7ded9055fd Mon Sep 17 00:00:00 2001 From: oraliahdz Date: Fri, 3 Mar 2023 15:51:30 -0600 Subject: [PATCH 1/2] implementes animation direction in utilities --- scss/_utilities.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 6f1b306b34..5ea5c817a3 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -349,6 +349,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": ( From 7fa99a0a87f5e85b06cbc9e17a4623a8b3bd7440 Mon Sep 17 00:00:00 2001 From: oraliahdz Date: Fri, 3 Mar 2023 15:52:05 -0600 Subject: [PATCH 2/2] added animation direction documentation to site --- .../docs/5.3/utilities/animation-direction.md | 30 +++++++++++++++++++ site/data/sidebar.yml | 1 + 2 files changed, 31 insertions(+) create mode 100644 site/content/docs/5.3/utilities/animation-direction.md diff --git a/site/content/docs/5.3/utilities/animation-direction.md b/site/content/docs/5.3/utilities/animation-direction.md new file mode 100644 index 0000000000..5419e9f7b3 --- /dev/null +++ b/site/content/docs/5.3/utilities/animation-direction.md @@ -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 >}} +
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+{{< /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" >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index dea26b401a..e9f8807925 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -118,6 +118,7 @@ icon: braces-asterisk icon_color: red pages: + - title: Animation direction - title: API - title: Background - title: Borders