123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- $module: #{$prefix}-switch;
- .#{$prefix}-rtl,
- .#{$prefix}-portal-rtl {
- .#{$module} {
- direction: rtl;
- &-checked {
- .#{$module}-knob {
- transform: translateX(-$motion-switch_checked-translateX);
- }
- &:active {
- .#{$module}-knob {
- transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
- }
- }
- }
- &-knob {
- right: 0;
- left: auto;
- transform: translateX(-$motion-switch_unchecked-translateX);
- }
- &-native-control {
- right: 0;
- }
- &-unchecked-text {
- left: 0;
- }
- }
- .#{$module}-loading {
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_unchecked-translateX);
- }
-
- &.#{$module}-checked {
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_checked-translateX);
- }
- }
- }
-
- .#{$module}-loading.#{$module}-small {
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
- }
- &.#{$module}-checked{
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_checked_small-translateX);
- }
- }
- }
-
- .#{$module}-loading.#{$module}-large {
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
- }
-
- &.#{$module}-checked {
- .#{$module}-loading-spin {
- transform: translateX(-$motion-switch_spin_checked_large-translateX);
- }
- }
- }
- .#{$module}-large {
- .#{$module}-knob {
- transform: translateX(-$motion-switch_unchecked_large-translateX);
- }
- &.#{$module}-checked {
- .#{$module}-knob {
- transform: translateX(-$motion-switch_checked_large-translateX);
- }
- &:active {
- .#{$module}-knob {
- transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
- }
- }
- }
- }
- .#{$module}-small {
- .#{$module}-knob {
- transform: translateX(-$motion-switch_unchecked_small-translateX);
- }
- &.#{$module}-checked {
- .#{$module}-knob {
- transform: translateX(-$motion-switch_checked_small-translateX);
- }
- &:active {
- .#{$module}-knob {
- transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
- }
- }
- }
- }
- }
|