/* * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @import "../../../mixins/_rounded.css"; @import "../../../mixins/_disabled.css"; /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature of the component, floating–point numbers have been used which, for the default font size (see: --ck-font-size-base), will generate simple integers. */ :root { /* 34px at 13px font-size */ --ck-switch-button-toggle-width: 2.6153846154em; /* 14px at 13px font-size */ --ck-switch-button-toggle-inner-size: 1.0769230769em; --ck-switch-button-toggle-spacing: 1px; } .ck.ck-button.ck-switchbutton { & .ck-button__label { /* Separate the label from the switch */ margin-right: calc(2*var(--ck-spacing-large)); } &.ck-disabled .ck-button__toggle { @mixin ck-disabled; } & .ck-button__toggle { @mixin ck-rounded-corners; /* Make sure the toggle is always to the right as far as possible. */ margin-left: auto; /* Gently animate the background color of the toggle switch */ transition: background 500ms ease; width: var(--ck-switch-button-toggle-width); background: var(--ck-color-switch-button-off-background); & .ck-button__toggle__inner { @mixin ck-rounded-corners { border-radius: calc(.5*var(--ck-border-radius)); } /* Leave some tiny bit of space around the inner part of the switch */ margin: var(--ck-switch-button-toggle-spacing); width: var(--ck-switch-button-toggle-inner-size); height: var(--ck-switch-button-toggle-inner-size); background: var(--ck-color-switch-button-inner-background); /* Gently animate the inner part of the toggle switch */ transition: transform 300ms ease; } } &.ck-on .ck-button__toggle { background: var(--ck-color-switch-button-on-background); & .ck-button__toggle__inner { /* Move the toggle switch to the right. It will be animated. */ transform: translateX(calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2*var(--ck-switch-button-toggle-spacing))); } } }