rtl.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. $module: #{$prefix}-switch;
  2. .#{$prefix}-rtl,
  3. .#{$prefix}-portal-rtl {
  4. .#{$module} {
  5. direction: rtl;
  6. &-checked {
  7. .#{$module}-knob {
  8. transform: translateX(-$motion-switch_checked-translateX);
  9. }
  10. &:active {
  11. .#{$module}-knob {
  12. transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
  13. }
  14. }
  15. }
  16. &-knob {
  17. right: 0;
  18. left: auto;
  19. transform: translateX(-$motion-switch_unchecked-translateX);
  20. }
  21. &-native-control {
  22. right: 0;
  23. }
  24. &-unchecked-text {
  25. left: 0;
  26. }
  27. }
  28. .#{$module}-loading {
  29. .#{$module}-loading-spin {
  30. transform: translateX(-$motion-switch_spin_unchecked-translateX);
  31. }
  32. &.#{$module}-checked {
  33. .#{$module}-loading-spin {
  34. transform: translateX(-$motion-switch_spin_checked-translateX);
  35. }
  36. }
  37. }
  38. .#{$module}-loading.#{$module}-small {
  39. .#{$module}-loading-spin {
  40. transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
  41. }
  42. &.#{$module}-checked{
  43. .#{$module}-loading-spin {
  44. transform: translateX(-$motion-switch_spin_checked_small-translateX);
  45. }
  46. }
  47. }
  48. .#{$module}-loading.#{$module}-large {
  49. .#{$module}-loading-spin {
  50. transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
  51. }
  52. &.#{$module}-checked {
  53. .#{$module}-loading-spin {
  54. transform: translateX(-$motion-switch_spin_checked_large-translateX);
  55. }
  56. }
  57. }
  58. .#{$module}-large {
  59. .#{$module}-knob {
  60. transform: translateX(-$motion-switch_unchecked_large-translateX);
  61. }
  62. &.#{$module}-checked {
  63. .#{$module}-knob {
  64. transform: translateX(-$motion-switch_checked_large-translateX);
  65. }
  66. &:active {
  67. .#{$module}-knob {
  68. transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
  69. }
  70. }
  71. }
  72. }
  73. .#{$module}-small {
  74. .#{$module}-knob {
  75. transform: translateX(-$motion-switch_unchecked_small-translateX);
  76. }
  77. &.#{$module}-checked {
  78. .#{$module}-knob {
  79. transform: translateX(-$motion-switch_checked_small-translateX);
  80. }
  81. &:active {
  82. .#{$module}-knob {
  83. transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
  84. }
  85. }
  86. }
  87. }
  88. }