switchbutton.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. @import "../../../mixins/_disabled.css";
  7. :root {
  8. /* 34px at 13px font-size */
  9. --ck-switch-button-toggle-width: 2.6153846154em;
  10. /* 14px at 13px font-size */
  11. --ck-switch-button-toggle-inner-size: 1.0769230769em;
  12. --ck-switch-button-toggle-spacing: 1px;
  13. }
  14. .ck.ck-button.ck-switchbutton {
  15. & .ck-button__label {
  16. /* Separate the label from the switch */
  17. margin-right: calc(2*var(--ck-spacing-large));
  18. }
  19. &.ck-disabled .ck-button__toggle {
  20. @mixin ck-disabled;
  21. }
  22. & .ck-button__toggle {
  23. @mixin ck-rounded-corners;
  24. /* Make sure the toggle is always to the right as far as possible. */
  25. margin-left: auto;
  26. /* Gently animate the background color of the toggle switch */
  27. transition: background 500ms ease;
  28. width: var(--ck-switch-button-toggle-width);
  29. background: var(--ck-color-switch-button-off-background);
  30. & .ck-button__toggle__inner {
  31. @mixin ck-rounded-corners {
  32. border-radius: calc(.5*var(--ck-border-radius));
  33. }
  34. /* Leave some tiny bit of space around the inner part of the switch */
  35. margin: var(--ck-switch-button-toggle-spacing);
  36. width: var(--ck-switch-button-toggle-inner-size);
  37. height: var(--ck-switch-button-toggle-inner-size);
  38. background: var(--ck-color-switch-button-inner-background);
  39. /* Gently animate the inner part of the toggle switch */
  40. transition: transform 300ms ease;
  41. }
  42. }
  43. &.ck-on .ck-button__toggle {
  44. background: var(--ck-color-switch-button-on-background);
  45. & .ck-button__toggle__inner {
  46. /* Move the toggle siwtch to the right. It will be animated. */
  47. transform: translateX(calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2*var(--ck-switch-button-toggle-spacing)));
  48. }
  49. }
  50. }