| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- /*
- * Copyright (c) 2003-2020, 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";
- @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.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-switch-button-translation: calc(
- var(--ck-switch-button-toggle-width) -
- var(--ck-switch-button-toggle-inner-size) -
- 2 * var(--ck-switch-button-toggle-spacing)
- );
- }
- .ck.ck-button.ck-switchbutton {
- & .ck-button__label {
- @mixin ck-dir ltr {
- /* Separate the label from the switch */
- margin-right: calc(2 * var(--ck-spacing-large));
- }
- @mixin ck-dir rtl {
- /* Separate the label from the switch */
- margin-left: calc(2 * var(--ck-spacing-large));
- }
- }
- & .ck-button__toggle {
- @mixin ck-rounded-corners;
- @mixin ck-dir ltr {
- /* Make sure the toggle is always to the right as far as possible. */
- margin-left: auto;
- }
- @mixin ck-dir rtl {
- /* Make sure the toggle is always to the left as far as possible. */
- margin-right: 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);
- & .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;
- }
- &: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-disabled .ck-button__toggle {
- @mixin ck-disabled;
- }
- &.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.
- */
- @mixin ck-dir ltr {
- transform: translateX( var( --ck-switch-button-translation ) );
- }
- @mixin ck-dir rtl {
- transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
- }
- }
- }
- }
|