|
@@ -1,43 +1,12 @@
|
|
|
// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
|
|
// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
|
|
|
// For licensing, see LICENSE.md or http://ckeditor.com/license
|
|
// For licensing, see LICENSE.md or http://ckeditor.com/license
|
|
|
|
|
|
|
|
-/**
|
|
|
|
|
- * Applies styles to the main part of the tooltip.
|
|
|
|
|
- */
|
|
|
|
|
-@mixin ck-tooltip__main {
|
|
|
|
|
- &::after {
|
|
|
|
|
- @content;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/**
|
|
|
|
|
- * Applies styles to the arrow part of the tooltip.
|
|
|
|
|
- */
|
|
|
|
|
-@mixin ck-tooltip__arrow {
|
|
|
|
|
- &::before {
|
|
|
|
|
- @content;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/**
|
|
|
|
|
- * Applies styles to both arrow and main part of the tooltip.
|
|
|
|
|
- */
|
|
|
|
|
-@mixin ck-tooltip__elements {
|
|
|
|
|
- @include ck-tooltip__main {
|
|
|
|
|
- @content;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- @include ck-tooltip__arrow {
|
|
|
|
|
- @content;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
/**
|
|
/**
|
|
|
* Enables the tooltip, which is the tooltip is in DOM but
|
|
* Enables the tooltip, which is the tooltip is in DOM but
|
|
|
* not yet displayed.
|
|
* not yet displayed.
|
|
|
*/
|
|
*/
|
|
|
@mixin ck-tooltip_enabled {
|
|
@mixin ck-tooltip_enabled {
|
|
|
- @include ck-tooltip__elements {
|
|
|
|
|
|
|
+ .ck-tooltip {
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -46,7 +15,7 @@
|
|
|
* Disables the tooltip making it disappear from DOM.
|
|
* Disables the tooltip making it disappear from DOM.
|
|
|
*/
|
|
*/
|
|
|
@mixin ck-tooltip_disabled {
|
|
@mixin ck-tooltip_disabled {
|
|
|
- @include ck-tooltip__elements {
|
|
|
|
|
|
|
+ .ck-tooltip {
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -56,37 +25,34 @@
|
|
|
* Requires `ck-tooltip_enabled` first.
|
|
* Requires `ck-tooltip_enabled` first.
|
|
|
*/
|
|
*/
|
|
|
@mixin ck-tooltip_visible {
|
|
@mixin ck-tooltip_visible {
|
|
|
- @include ck-tooltip__elements {
|
|
|
|
|
|
|
+ .ck-tooltip {
|
|
|
visibility: visible;
|
|
visibility: visible;
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-[data-ck-tooltip] {
|
|
|
|
|
- @include ck-tooltip__elements {
|
|
|
|
|
- // Tooltip is hidden by default.
|
|
|
|
|
- visibility: hidden;
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- display: none;
|
|
|
|
|
-
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- z-index: ck-z( 'modal' );
|
|
|
|
|
|
|
+.ck-tooltip,
|
|
|
|
|
+.ck-tooltip__text::after {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
|
|
|
- // Without this, hovering the tooltip could keep it visible.
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
|
|
+ // Without this, hovering the tooltip could keep it visible.
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
|
|
|
- // This is to get rid of flickering when transitioning opacity in Chrome.
|
|
|
|
|
- // It's weird but it works.
|
|
|
|
|
- -webkit-backface-visibility: hidden;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // This is to get rid of flickering when transitioning opacity in Chrome.
|
|
|
|
|
+ // It's weird but it works.
|
|
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- @include ck-tooltip__main {
|
|
|
|
|
- content: attr(data-ck-tooltip);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.ck-tooltip {
|
|
|
|
|
+ // Tooltip is hidden by default.
|
|
|
|
|
+ visibility: hidden;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ z-index: ck-z( 'modal' );
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- @include ck-tooltip__arrow {
|
|
|
|
|
- content: "";
|
|
|
|
|
- width: 0;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.ck-tooltip__text::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
}
|
|
}
|