/* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ @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 400ms ease; width: var(--ck-switch-button-toggle-width); background: var(--ck-color-switch-button-off-background); &:hover { background: var(--ck-color-switch-button-off-hover-background); & .ck-button__toggle__inner { box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow); } } & .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: all 300ms ease; } } &.ck-on .ck-button__toggle { background: var(--ck-color-switch-button-on-background); &:hover { background: var(--ck-color-switch-button-on-hover-background); } & .ck-button__toggle__inner { /* * Move the toggle switch to the right. It will be animated. * * Edge is not supporting calc() in the transitions and animations, we need to hardcode this value (see ckeditor5-ui#433). * It boils down to: * * calc( * var(--ck-switch-button-toggle-width) - * var(--ck-switch-button-toggle-inner-size) - * 2*var(--ck-switch-button-toggle-spacing) ) * ) */ transform: translateX( 1.3846153847em ); } } }