feat(Skeleton): support RTL (#1136)

gravity-ui · Nov 28, 2023 · 91cb9ac · 91cb9ac
1 parent b5d7ed9
commit 91cb9ac
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss
@@ -3,6 +3,10 @@
 $block: '.#{variables.$ns}skeleton';
 
 #{$block} {
+    --_--animation-from: -100%;
+    --_--animation-to: 100%;
+    --_--gradient-deg: 90deg;
+
     display: inline-block;
     position: relative;
     z-index: 0;
@@ -12,22 +16,32 @@ $block: '.#{variables.$ns}skeleton';
 
     background-color: var(--g-color-base-generic);
 
+    [dir='rtl'] & {
+        --_--animation-from: 100%;
+        --_--animation-to: -100%;
+        --_--gradient-deg: -90deg;
+    }
+
     &::after {
         position: absolute;
         inset: 0;
 
-        background-image: linear-gradient(90deg, transparent, var(--g-color-base-generic));
+        background-image: linear-gradient(
+            var(--_--gradient-deg),
+            transparent,
+            var(--g-color-base-generic)
+        );
         animation: #{variables.$ns}skeleton 1.2s ease-out infinite;
         content: '';
     }
 }
 
 @keyframes #{variables.$ns}skeleton {
     0% {
-        transform: translateX(-100%);
+        transform: translateX(var(--_--animation-from));
     }
 
     100% {
-        transform: translateX(100%);
+        transform: translateX(var(--_--animation-to));
     }
 }