| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- /*
- * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- @import "../../helpers/colors.css";
- @import "../../helpers/rounded.css";
- @import "../../helpers/spacing.css";
- :root {
- --ck-tooltip-arrow-size: 5px;
- }
- .ck-tooltip {
- 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);
- }
- }
- }
- .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-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;
- }
|