From 4d35e8f97df902c9b9c6689cb02cca9c1c1ce863 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Sun, 14 Jul 2024 15:33:47 +0200
Subject: [PATCH] feat(GlBadge): Add animation

---
 src/components/base/badge/badge.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/base/badge/badge.scss b/src/components/base/badge/badge.scss
index 5d8a99038b..48fb584701 100644
--- a/src/components/base/badge/badge.scss
+++ b/src/components/base/badge/badge.scss
@@ -85,6 +85,14 @@ $badge-min-width: $gl-spacing-scale-3;
   width: 100%;
   // Mitigate the effect of width: 100%
   max-width: max-content;
+  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
+              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+
+  @media (prefers-reduced-motion) {
+    transition-duration: .01ms !important;
+  }
 
   @media (forced-colors: active) {
     border: 1px solid;
-- 
GitLab