// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. // For licensing, see LICENSE.md or http://ckeditor.com/license $ck-tooltip-arrow-size: 5px; [data-ck-tooltip] { @include ck-tooltip__elements { left: 50%; // 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; } @include ck-tooltip__main { border-radius: $ck-border-radius; color: ck-color( 'background' ); font-size: ck-font-size( -2 ); background: ck-color( 'text' ); padding: ck-spacing( 'small' ) ck-spacing( 'medium' ); } @include ck-tooltip__arrow { border-style: solid; } } /** * A class once applied displays the tooltip south of the element. * * [element] * ^ * +-----------+ * | Tooltip | * +-----------+ */ .ck-tooltip_s { @include ck-tooltip__main { bottom: -$ck-tooltip-arrow-size + 1; transform: translate( -50%, 100% ); } @include ck-tooltip__arrow { bottom: 0; transform: translate( -50%, 100% ); border-color: transparent transparent ck-color( 'text' ) transparent; border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size; } } /** * A class once applied displays the tooltip north of the element. * * +-----------+ * | Tooltip | * +-----------+ * V * [element] */ .ck-tooltip_n { @include ck-tooltip__main { top: -$ck-tooltip-arrow-size + 1; transform: translate( -50%, -100% ); } @include ck-tooltip__arrow { top: 0; transform: translate( -50%, -100% ); border-color: ck-color( 'text' ) transparent transparent transparent; border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size; } }