switchbutton.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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: 1.3846153847em;
  18. }
  19. .ck.ck-button.ck-switchbutton {
  20. & .ck-button__label {
  21. @mixin ck-dir ltr {
  22. /* Separate the label from the switch */
  23. margin-right: calc(2 * var(--ck-spacing-large));
  24. }
  25. @mixin ck-dir rtl {
  26. /* Separate the label from the switch */
  27. margin-left: calc(2 * var(--ck-spacing-large));
  28. }
  29. }
  30. & .ck-button__toggle {
  31. @mixin ck-rounded-corners;
  32. @mixin ck-dir ltr {
  33. /* Make sure the toggle is always to the right as far as possible. */
  34. margin-left: auto;
  35. }
  36. @mixin ck-dir rtl {
  37. /* Make sure the toggle is always to the left as far as possible. */
  38. margin-right: auto;
  39. }
  40. /* Gently animate the background color of the toggle switch */
  41. transition: background 400ms ease;
  42. width: var(--ck-switch-button-toggle-width);
  43. background: var(--ck-color-switch-button-off-background);
  44. & .ck-button__toggle__inner {
  45. @mixin ck-rounded-corners {
  46. border-radius: calc(.5 * var(--ck-border-radius));
  47. }
  48. /* Leave some tiny bit of space around the inner part of the switch */
  49. margin: var(--ck-switch-button-toggle-spacing);
  50. width: var(--ck-switch-button-toggle-inner-size);
  51. height: var(--ck-switch-button-toggle-inner-size);
  52. background: var(--ck-color-switch-button-inner-background);
  53. /* Gently animate the inner part of the toggle switch */
  54. transition: all 300ms ease;
  55. }
  56. &:hover {
  57. background: var(--ck-color-switch-button-off-hover-background);
  58. & .ck-button__toggle__inner {
  59. box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
  60. }
  61. }
  62. }
  63. &.ck-disabled .ck-button__toggle {
  64. @mixin ck-disabled;
  65. }
  66. &.ck-on .ck-button__toggle {
  67. background: var(--ck-color-switch-button-on-background);
  68. &:hover {
  69. background: var(--ck-color-switch-button-on-hover-background);
  70. }
  71. & .ck-button__toggle__inner {
  72. /*
  73. * Move the toggle switch to the right. It will be animated.
  74. *
  75. * Edge is not supporting calc() in the transitions and animations, we need to hardcode this value (see ckeditor5-ui#433).
  76. * It boils down to:
  77. *
  78. * calc(
  79. * var(--ck-switch-button-toggle-width) -
  80. * var(--ck-switch-button-toggle-inner-size) -
  81. * 2 * var(--ck-switch-button-toggle-spacing) )
  82. * )
  83. */
  84. @mixin ck-dir ltr {
  85. transform: translateX( var( --ck-switch-button-translation ) );
  86. }
  87. @mixin ck-dir rtl {
  88. transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
  89. }
  90. }
  91. }
  92. }