switchbutton.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. @import "../../../mixins/_disabled.css";
  7. @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
  8. /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
  9. of the component, floating–point numbers have been used which, for the default font size
  10. (see: --ck-font-size-base), will generate simple integers. */
  11. :root {
  12. /* 34px at 13px font-size */
  13. --ck-switch-button-toggle-width: 2.6153846154em;
  14. /* 14px at 13px font-size */
  15. --ck-switch-button-toggle-inner-size: 1.0769230769em;
  16. --ck-switch-button-toggle-spacing: 1px;
  17. --ck-switch-button-translation: calc(
  18. var(--ck-switch-button-toggle-width) -
  19. var(--ck-switch-button-toggle-inner-size) -
  20. 2 * var(--ck-switch-button-toggle-spacing)
  21. );
  22. }
  23. .ck.ck-button.ck-switchbutton {
  24. & .ck-button__label {
  25. @mixin ck-dir ltr {
  26. /* Separate the label from the switch */
  27. margin-right: calc(2 * var(--ck-spacing-large));
  28. }
  29. @mixin ck-dir rtl {
  30. /* Separate the label from the switch */
  31. margin-left: calc(2 * var(--ck-spacing-large));
  32. }
  33. }
  34. & .ck-button__toggle {
  35. @mixin ck-rounded-corners;
  36. @mixin ck-dir ltr {
  37. /* Make sure the toggle is always to the right as far as possible. */
  38. margin-left: auto;
  39. }
  40. @mixin ck-dir rtl {
  41. /* Make sure the toggle is always to the left as far as possible. */
  42. margin-right: auto;
  43. }
  44. /* Gently animate the background color of the toggle switch */
  45. transition: background 400ms ease;
  46. width: var(--ck-switch-button-toggle-width);
  47. background: var(--ck-color-switch-button-off-background);
  48. & .ck-button__toggle__inner {
  49. @mixin ck-rounded-corners {
  50. border-radius: calc(.5 * var(--ck-border-radius));
  51. }
  52. /* Leave some tiny bit of space around the inner part of the switch */
  53. margin: var(--ck-switch-button-toggle-spacing);
  54. width: var(--ck-switch-button-toggle-inner-size);
  55. height: var(--ck-switch-button-toggle-inner-size);
  56. background: var(--ck-color-switch-button-inner-background);
  57. /* Gently animate the inner part of the toggle switch */
  58. transition: all 300ms ease;
  59. }
  60. &:hover {
  61. background: var(--ck-color-switch-button-off-hover-background);
  62. & .ck-button__toggle__inner {
  63. box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
  64. }
  65. }
  66. }
  67. &.ck-disabled .ck-button__toggle {
  68. @mixin ck-disabled;
  69. }
  70. &.ck-on .ck-button__toggle {
  71. background: var(--ck-color-switch-button-on-background);
  72. &:hover {
  73. background: var(--ck-color-switch-button-on-hover-background);
  74. }
  75. & .ck-button__toggle__inner {
  76. /*
  77. * Move the toggle switch to the right. It will be animated.
  78. */
  79. @mixin ck-dir ltr {
  80. transform: translateX( var( --ck-switch-button-translation ) );
  81. }
  82. @mixin ck-dir rtl {
  83. transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
  84. }
  85. }
  86. }
  87. }