switches.less 884 B

1234567891011121314151617181920212223242526272829303132
  1. // Switch variants
  2. .switch-variant(@handle-color, @handle-bg, @label-border, @label-bg) {
  3. color: @handle-color;
  4. background-color: @handle-bg;
  5. // second handler "label"
  6. ~ .@{switch-name}-handle-off:before {
  7. background-color: @label-bg;
  8. border-color: @label-border;
  9. }
  10. // second handler inset shadow
  11. .@{switch-name}-on & {
  12. ~ .@{switch-name}-handle-off {
  13. box-shadow: inset 16px 0 0 @handle-bg;
  14. }
  15. }
  16. }
  17. // Switch handle-off variant
  18. .switch-handle-off-variant(@handle-name, @handle-border, @handle-bg) {
  19. // second heandler outset shadow
  20. & ~ .@{switch-name}-handle-off.@{switch-name}-@{handle-name} {
  21. box-shadow: ~"inset 0 0 transparent, -16px 0 0 @{handle-border}";
  22. }
  23. // second heandler "label"
  24. ~ .@{switch-name}-handle-off.@{switch-name}-@{handle-name}:before {
  25. border-color: @handle-border;
  26. background-color: @handle-bg;
  27. }
  28. }