| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- /*
- * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- @import "../../../mixins/_rounded.css";
- :root {
- --ck-tooltip-arrow-size: 5px;
- }
- .ck.ck-tooltip {
- left: 50%;
- /*
- * Prevent blurry tooltips in LoDPI environments.
- * See https://github.com/ckeditor/ckeditor5/issues/1802.
- */
- top: 0;
- /*
- * 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;
- & .ck-tooltip__text {
- @mixin ck-rounded-corners;
- font-size: .9em;
- line-height: 1.5;
- color: var(--ck-color-tooltip-text);
- padding: var(--ck-spacing-small) var(--ck-spacing-medium);
- background: var(--ck-color-tooltip-background);
- position: relative;
- left: -50%;
- &::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;
- border-style: solid;
- left: 50%;
- }
- }
- /**
- * A class once applied displays the tooltip south of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_s {
- bottom: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateY( 100% );
- & .ck-tooltip__text::after {
- top: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateX( -50% );
- border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
- border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
- }
- }
- /**
- * A class once applied displays the tooltip north of the element.
- *
- * +-----------+
- * | Tooltip |
- * +-----------+
- * V
- * [element]
- */
- &.ck-tooltip_n {
- top: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateY( -100% );
- & .ck-tooltip__text::after {
- bottom: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateX( -50% );
- border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
- border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
- }
- }
- }
|