| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- /*
- * Copyright (c) 2003-2019, 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;
- /**
- * 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);
- }
- }
- & .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 {
- border-style: solid;
- left: 50%;
- }
- }
- }
- .ck.ck-tooltip,
- .ck.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;
- }
|