_form-switch.scss 884 B

12345678910111213141516171819202122232425262728293031
  1. .form-switch{
  2. .form-check-input{
  3. border: 1px solid $gray-200;
  4. position: relative;
  5. background-color: rgba($dark-gradient-state, .1);
  6. height: $form-check-input-width + .02;
  7. &:after {
  8. transition: transform $form-check-transition-time ease-in-out, background-color $form-check-transition-time ease-in-out;
  9. content: "";
  10. width: $form-switch-check-after-width;
  11. height: $form-switch-check-after-width;
  12. border-radius: 50%;
  13. position: absolute;
  14. background-color: $white;
  15. transform: translateX($form-switch-translate-x-start);
  16. box-shadow: $form-switch-round-box-shadow;
  17. top: 1px;
  18. }
  19. &:checked:after {
  20. transform: translateX($form-switch-translate-x-end);
  21. }
  22. &:checked {
  23. border-color: rgba($dark-gradient-state, .95);
  24. background-color: rgba($dark-gradient-state, .95);
  25. }
  26. }
  27. }