| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- // 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;
- }
- }
|