// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. // For licensing, see LICENSE.md or http://ckeditor.com/license $ck-tooltip-arrow-size: 5px; /** * Applies styles to the main part of the tooltip. */ @mixin ck-tooltip__main { &::after { @content; } } /** * Applies styles to the arrow part of the tooltip. */ @mixin ck-tooltip__arrow { &::before { @content; } } /** * Applies styles to both arrow and main part of the tooltip. */ @mixin ck-tooltip__elements { @include ck-tooltip__main { @content; } @include ck-tooltip__arrow { @content; } } /** * Enables the tooltip, which is the tooltip is in DOM but * not yet displayed. */ @mixin ck-tooltip_enabled { @include ck-tooltip__elements { display: block; } } /** * Disables the tooltip making it disappear from DOM. */ @mixin ck-tooltip_disabled { @include ck-tooltip__elements { display: none; } } /** * Shows the tooltip, which is already in DOM. * Requires `ck-tooltip_enabled` first. */ @mixin ck-tooltip_visible { @include ck-tooltip__elements { visibility: visible; opacity: 1; } } [data-ck-tooltip] { @include ck-tooltip__elements { // Tooltip is hidden by default. visibility: hidden; opacity: 0; display: none; position: absolute; left: 50%; z-index: ck-z( 'modal' ); // Without this, hovering the tooltip could keep it visible. pointer-events: none; // 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; // This is to get rid of flickering when transitioning opacity in Chrome. // It's weird but it works. -webkit-backface-visibility: hidden; } @include ck-tooltip__main { content: attr(data-ck-tooltip); 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 { content: ""; width: 0; height: 0; 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; } }