| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- .nut-switch {
- cursor: pointer;
- display: inline-flex;
- align-items: center;
- background-color: $primary-color;
- border-radius: $switch-border-radius;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- background-position: center center;
- flex: 0 0 auto; // 防止被压缩
- .nut-icon-loading1 {
- width: 12px;
- height: 12px;
- font-size: 12px;
- }
- &.nut-switch-close {
- background-color: $switch-close-bg-color;
- }
- .nut-switch-button {
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- background: $white;
- transition: transform 0.3s;
- .nut-switch-label {
- color: $white;
- font-size: $font-size-1;
- &.open {
- transform: translateX(-16px);
- }
- &.close {
- transform: translateX(16px);
- }
- }
- }
- &.nut-switch-disable {
- opacity: 0.6;
- }
- &.nut-switch-base {
- min-width: $switch-width;
- height: $switch-height;
- line-height: $switch-line-height;
- overflow: hidden;
- .nut-switch-button {
- height: $switch-inside-height;
- width: $switch-inside-width;
- transform: $switch-inside-close-transform;
- }
- &.nut-switch-open {
- .nut-switch-button {
- transform: $switch-inside-open-transform;
- }
- }
- }
- }
|