| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- // 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;
- [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;
- }
- }
|