switchbutton.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
  8. of the component, floating–point numbers have been used which, for the default font size
  9. (see: --ck-font-size-base), will generate simple integers. */
  10. :root {
  11. /* 34px at 13px font-size */
  12. --ck-switch-button-toggle-width: 2.6153846154em;
  13. /* 14px at 13px font-size */
  14. --ck-switch-button-toggle-inner-size: 1.0769230769em;
  15. --ck-switch-button-toggle-spacing: 1px;
  16. }
  17. .ck.ck-button.ck-switchbutton {
  18. & .ck-button__label {
  19. /* Separate the label from the switch */
  20. margin-right: calc(2*var(--ck-spacing-large));
  21. }
  22. &.ck-disabled .ck-button__toggle {
  23. @mixin ck-disabled;
  24. }
  25. & .ck-button__toggle {
  26. @mixin ck-rounded-corners;
  27. /* Make sure the toggle is always to the right as far as possible. */
  28. margin-left: auto;
  29. /* Gently animate the background color of the toggle switch */
  30. transition: background 400ms ease;
  31. width: var(--ck-switch-button-toggle-width);
  32. background: var(--ck-color-switch-button-off-background);
  33. & .ck-button__toggle__inner {
  34. @mixin ck-rounded-corners {
  35. border-radius: calc(.5*var(--ck-border-radius));
  36. }
  37. /* Leave some tiny bit of space around the inner part of the switch */
  38. margin: var(--ck-switch-button-toggle-spacing);
  39. width: var(--ck-switch-button-toggle-inner-size);
  40. height: var(--ck-switch-button-toggle-inner-size);
  41. background: var(--ck-color-switch-button-inner-background);
  42. /* Gently animate the inner part of the toggle switch */
  43. transition: transform 300ms ease;
  44. }
  45. }
  46. &.ck-on .ck-button__toggle {
  47. background: var(--ck-color-switch-button-on-background);
  48. & .ck-button__toggle__inner {
  49. /*
  50. * Move the toggle switch to the right. It will be animated.
  51. * ckeditor5-ui#433. Edge is not supporting calc() in the transitions and animations, we need to hardcode this value.
  52. * translateX( calc(
  53. var(--ck-switch-button-toggle-width) -
  54. var(--ck-switch-button-toggle-inner-size) -
  55. 2*var(--ck-switch-button-toggle-spacing) )
  56. );
  57. */
  58. transform: translateX( 1.3846153847em );
  59. }
  60. }
  61. }