rtl.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. .@{badge-prefix-cls} {
  2. &-rtl {
  3. direction: rtl;
  4. }
  5. &:not(&-not-a-wrapper) &-count,
  6. &:not(&-not-a-wrapper) &-dot,
  7. &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
  8. .@{badge-prefix-cls}-rtl& {
  9. right: auto;
  10. left: 0;
  11. direction: ltr;
  12. transform: translate(-50%, -50%);
  13. transform-origin: 0% 0%;
  14. }
  15. }
  16. &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
  17. right: auto;
  18. left: 0;
  19. transform: translate(-50%, -50%);
  20. transform-origin: 0% 0%;
  21. }
  22. &-status {
  23. &-text {
  24. .@{badge-prefix-cls}-rtl & {
  25. margin-right: 8px;
  26. margin-left: 0;
  27. }
  28. }
  29. }
  30. &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
  31. .@{badge-prefix-cls}-zoom-appear,
  32. .@{badge-prefix-cls}-zoom-enter {
  33. animation-name: antZoomBadgeInRtl;
  34. }
  35. .@{badge-prefix-cls}-zoom-leave {
  36. animation-name: antZoomBadgeOutRtl;
  37. }
  38. }
  39. }
  40. .@{ribbon-prefix-cls}-rtl {
  41. direction: rtl;
  42. &.@{ribbon-prefix-cls}-placement-end {
  43. right: unset;
  44. left: -8px;
  45. border-bottom-right-radius: @border-radius-sm;
  46. border-bottom-left-radius: 0;
  47. .@{ribbon-prefix-cls}-corner {
  48. right: unset;
  49. left: 0;
  50. border-color: currentcolor currentcolor transparent transparent;
  51. &::after {
  52. border-color: currentcolor currentcolor transparent transparent;
  53. }
  54. }
  55. }
  56. &.@{ribbon-prefix-cls}-placement-start {
  57. right: -8px;
  58. left: unset;
  59. border-bottom-right-radius: 0;
  60. border-bottom-left-radius: @border-radius-sm;
  61. .@{ribbon-prefix-cls}-corner {
  62. right: 0;
  63. left: unset;
  64. border-color: currentcolor transparent transparent currentcolor;
  65. &::after {
  66. border-color: currentcolor transparent transparent currentcolor;
  67. }
  68. }
  69. }
  70. }
  71. @keyframes antZoomBadgeInRtl {
  72. 0% {
  73. transform: scale(0) translate(-50%, -50%);
  74. opacity: 0;
  75. }
  76. 100% {
  77. transform: scale(1) translate(-50%, -50%);
  78. }
  79. }
  80. @keyframes antZoomBadgeOutRtl {
  81. 0% {
  82. transform: scale(1) translate(-50%, -50%);
  83. }
  84. 100% {
  85. transform: scale(0) translate(-50%, -50%);
  86. opacity: 0;
  87. }
  88. }