8
0

switchbutton.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. --ck-switch-button-toggle-width: 2.6em;
  9. --ck-switch-button-toggle-height: 1.1em;
  10. }
  11. .ck.ck-button.ck-switchbutton {
  12. & .ck-button__label {
  13. /* Separate the label from the switch */
  14. margin-right: calc(2*var(--ck-spacing-large));
  15. }
  16. &.ck-disabled .ck-button__toggle {
  17. @mixin ck-disabled;
  18. }
  19. & .ck-button__toggle {
  20. @mixin ck-rounded-corners;
  21. /* Make sure the toggle is always to the right as far as possible. */
  22. margin-left: auto;
  23. /* Leave some tiny bit of space around the inner part of the switch */
  24. padding: 1px;
  25. width: var(--ck-switch-button-toggle-width);
  26. background: var(--ck-color-switch-button-off-background);
  27. & .ck-button__toggle__inner {
  28. @mixin ck-rounded-corners {
  29. border-radius: calc(.5*var(--ck-border-radius));
  30. }
  31. width: var(--ck-switch-button-toggle-height);
  32. height: var(--ck-switch-button-toggle-height);
  33. background: var(--ck-color-switch-button-inner-background);
  34. }
  35. }
  36. &.ck-on .ck-button__toggle {
  37. background: var(--ck-color-switch-button-on-background);
  38. }
  39. }