| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- /*
- * 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 that displays the tooltip south of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_s,
- &.ck-tooltip_sw {
- bottom: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateY( 100% );
- & .ck-tooltip__text::after {
- /* 1px addresses gliches in rendering causing gap between the triangle and the text */
- top: calc(-1 * var(--ck-tooltip-arrow-size) + 1px);
- 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 that displays the tooltip south-west of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_sw {
- right: 50%;
- left: auto;
- & .ck-tooltip__text {
- left: auto;
- right: calc( -2 * var(--ck-tooltip-arrow-size));
- }
- & .ck-tooltip__text::after {
- left: auto;
- right: 0;
- }
- }
- /**
- * A class that 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);
- }
- }
- }
|