style: add rtl.less of Spin\Skeleton\BackTop (#22388)

* style: add rtl.less of Spin\Skeleton\BackTop

* fix: remove back top

components/skeleton/style/index.less

@@ -12,20 +12,11 @@
   display: table;
   width: 100%;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-header {
     display: table-cell;
     padding-right: 16px;
     vertical-align: top;
 
-    .@{skeleton-prefix-cls}-rtl & {
-      padding-right: 0;
-      padding-left: 16px;
-    }
-
     // Avatar
     .@{skeleton-avatar-prefix-cls} {
       .skeleton-element-avatar();
@@ -87,19 +78,11 @@
       .@{skeleton-title-prefix-cls},
       .@{skeleton-paragraph-prefix-cls} > li {
         .skeleton-color();
-
-        .@{skeleton-prefix-cls}-rtl& {
-          animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
-        }
       }
     }
 
     .@{skeleton-avatar-prefix-cls} {
       .skeleton-color();
-
-      .@{skeleton-prefix-cls}-rtl& {
-        animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
-      }
     }
 
     .@{skeleton-button-prefix-cls} {
@@ -231,11 +214,4 @@
   }
 }
 
-@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" {
-  0% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
-}
+@import './rtl.less';

components/skeleton/style/rtl.less

@@ -0,0 +1,47 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
+@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
+@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
+@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
+
+.@{skeleton-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-header {
+    .@{skeleton-prefix-cls}-rtl & {
+      padding-right: 0;
+      padding-left: 16px;
+    }
+  }
+
+  // With active animation
+  &.@{skeleton-prefix-cls}-active {
+    & .@{skeleton-prefix-cls}-content {
+      .@{skeleton-title-prefix-cls},
+      .@{skeleton-paragraph-prefix-cls} > li {
+        .@{skeleton-prefix-cls}-rtl& {
+          animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
+        }
+      }
+    }
+
+    .@{skeleton-avatar-prefix-cls} {
+      .@{skeleton-prefix-cls}-rtl& {
+        animation-name: ~'@{skeleton-prefix-cls}-loading-rtl';
+      }
+    }
+  }
+}
+
+@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}

components/spin/style/index.less

@@ -15,10 +15,6 @@
   opacity: 0;
   transition: transform 0.3s @ease-in-out-circ;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &-spinning {
     position: static;
     display: inline-block;
@@ -166,11 +162,6 @@
     &-spin {
       transform: rotate(45deg);
       animation: antRotate 1.2s infinite linear;
-
-      .@{spin-prefix-cls}-rtl & {
-        transform: rotate(-45deg);
-        animation-name: antRotateRtl;
-      }
     }
   }
 
@@ -222,8 +213,4 @@
   }
 }
 
-@keyframes antRotateRtl {
-  to {
-    transform: rotate(-405deg);
-  }
-}
+@import './rtl.less';

components/spin/style/rtl.less

@@ -0,0 +1,25 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@spin-prefix-cls: ~'@{ant-prefix}-spin';
+
+.@{spin-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-dot {
+    &-spin {
+      .@{spin-prefix-cls}-rtl & {
+        transform: rotate(-45deg);
+        animation-name: antRotateRtl;
+      }
+    }
+  }
+}
+
+@keyframes antRotateRtl {
+  to {
+    transform: rotate(-405deg);
+  }
+}