|
|
@@ -0,0 +1,152 @@
|
|
|
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
|
|
|
+// For licensing, see LICENSE.md or http://ckeditor.com/license
|
|
|
+
|
|
|
+$ck-tooltip-arrow-size: 5px;
|
|
|
+
|
|
|
+/**
|
|
|
+ * 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
|
|
|
+ * not yet displayed.
|
|
|
+ */
|
|
|
+@mixin ck-tooltip_enabled {
|
|
|
+ @include ck-tooltip__elements {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Disables the tooltip making it disappear from DOM.
|
|
|
+ */
|
|
|
+@mixin ck-tooltip_disabled {
|
|
|
+ @include ck-tooltip__elements {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Shows the tooltip, which is already in DOM.
|
|
|
+ * Requires `ck-tooltip_enabled` first.
|
|
|
+ */
|
|
|
+@mixin ck-tooltip_visible {
|
|
|
+ @include ck-tooltip__elements {
|
|
|
+ visibility: visible;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+[data-ck-tooltip] {
|
|
|
+ @include ck-tooltip__elements {
|
|
|
+ // Tooltip is hidden by default.
|
|
|
+ visibility: hidden;
|
|
|
+ opacity: 0;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ z-index: ck-z( 'modal' );
|
|
|
+
|
|
|
+ // Without this, hovering the tooltip could keep it visible.
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ // 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;
|
|
|
+
|
|
|
+ // 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);
|
|
|
+ border-radius: $ck-border-radius;
|
|
|
+ color: ck-color( 'background' );
|
|
|
+ font-size: ck-font-size( -2 );
|
|
|
+ background: ck-color( 'text' );
|
|
|
+ padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
|
|
|
+ }
|
|
|
+
|
|
|
+ @include ck-tooltip__arrow {
|
|
|
+ content: "";
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-style: solid;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * A class once applied displays the tooltip south of the element.
|
|
|
+ *
|
|
|
+ * [element]
|
|
|
+ * ^
|
|
|
+ * +-----------+
|
|
|
+ * | Tooltip |
|
|
|
+ * +-----------+
|
|
|
+ */
|
|
|
+.ck-tooltip_s {
|
|
|
+ @include ck-tooltip__main {
|
|
|
+ bottom: -$ck-tooltip-arrow-size + 1;
|
|
|
+ transform: translate( -50%, 100% );
|
|
|
+ }
|
|
|
+
|
|
|
+ @include ck-tooltip__arrow {
|
|
|
+ bottom: 0;
|
|
|
+ transform: translate( -50%, 100% );
|
|
|
+ border-color: transparent transparent ck-color( 'text' ) transparent;
|
|
|
+ border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * A class once applied displays the tooltip north of the element.
|
|
|
+ *
|
|
|
+ * +-----------+
|
|
|
+ * | Tooltip |
|
|
|
+ * +-----------+
|
|
|
+ * V
|
|
|
+ * [element]
|
|
|
+ */
|
|
|
+.ck-tooltip_n {
|
|
|
+ @include ck-tooltip__main {
|
|
|
+ top: -$ck-tooltip-arrow-size + 1;
|
|
|
+ transform: translate( -50%, -100% );
|
|
|
+ }
|
|
|
+
|
|
|
+ @include ck-tooltip__arrow {
|
|
|
+ top: 0;
|
|
|
+ transform: translate( -50%, -100% );
|
|
|
+ border-color: ck-color( 'text' ) transparent transparent transparent;
|
|
|
+ border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
|
|
|
+ }
|
|
|
+}
|