/* * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @import "../../helpers/colors.css"; @import "../../helpers/rounded.css"; @import "../../helpers/spacing.css"; :root { --ck-tooltip-arrow-size: 5px; } .ck-tooltip { left: 50%; /** * A class once applied displays the tooltip south of the element. * * [element] * ^ * +-----------+ * | Tooltip | * +-----------+ */ &.ck-tooltip_s { bottom: calc(-1 * var(--ck-tooltip-arrow-size)); transform: translateY( 100% ); & .ck-tooltip__text::after { top: calc(-1 * var(--ck-tooltip-arrow-size)); transform: translateX( -50% ); border-color: transparent transparent var(--ck-color-tooltip-background) transparent; border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size); } } /** * A class once applied displays the tooltip north of the element. * * +-----------+ * | Tooltip | * +-----------+ * V * [element] */ &.ck-tooltip_n { top: calc(-1 * var(--ck-tooltip-arrow-size)); transform: translateY( -100% ); & .ck-tooltip__text::after { bottom: calc(-1 * var(--ck-tooltip-arrow-size)); transform: translateX( -50% ); border-color: var(--ck-color-tooltip-background) transparent transparent transparent; border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size); } } } .ck-tooltip__text { @mixin ck-rounded-corners; font-size: .9em; line-height: 1.5; color: var(--ck-color-tooltip-text); padding: var(--ck-spacing-small) var(--ck-spacing-medium); background: var(--ck-color-tooltip-background); position: relative; left: -50%; &::after { border-style: solid; left: 50%; } } .ck-tooltip, .ck-tooltip__text::after { /*For the transition to work, the tooltip must be controlled using visibility+opacity. A delay prevents a "tooltip avalanche" i.e. when scanning the toolbar with mouse cursor.*/ transition: opacity .2s ease-in-out .2s; }