| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- // 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;
- .ck-tooltip {
- left: 50%;
- &__text {
- @include ck-rounded-corners();
- font-size: .9em;
- line-height: 1.5;
- color: ck-color( 'tooltip-text' );
- padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
- background: ck-color( 'tooltip-background' );
- position: relative;
- left: -50%;
- &::after {
- border-style: solid;
- left: 50%;
- }
- }
- /**
- * A class once applied displays the tooltip south of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_s {
- bottom: - $ck-tooltip-arrow-size;
- transform: translateY( 100% );
- .ck-tooltip__text::after {
- top: -$ck-tooltip-arrow-size;
- transform: translateX( -50% );
- border-color: transparent transparent ck-color( 'tooltip-background' ) 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 {
- top: -$ck-tooltip-arrow-size;
- transform: translateY( -100% );
- .ck-tooltip__text::after {
- bottom: -$ck-tooltip-arrow-size;
- transform: translateX( -50% );
- border-color: ck-color( 'tooltip-background' ) transparent transparent transparent;
- border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
- }
- }
- }
- .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;
- }
|