// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. // For licensing, see LICENSE.md or http://ckeditor.com/license $ck-balloon-arrow-offset: 2px; $ck-balloon-arrow-height: 15px; $ck-balloon-arrow-half-width: 10px; $ck-def-z: ( 'default': 1, 'modal': 999 // 'topmost': 9999 ); // TODO: Move it to _zindex.scss. @function ck-z( $layer: 'default', $index: 0 ) { @return map-get( $ck-def-z, $layer ) + $index; } .ck-balloon-panel { @include ck-unselectable(); @include ck-rounded-corners(); min-width: 50px; min-height: 15px; display: none; position: absolute; background: ck-color( 'background' ); border: 1px solid ck-border-color( 'foreground' ); // TODO: Create helper for shadows. box-shadow: 0 0 5px ck-color( 'foreground', -15 ); z-index: ck-z( 'modal' ); &:before, &:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; } &:before { z-index: ck-z( 'default' ); } &:after { z-index: ck-z( 'default', 1 ); } &_arrow_se, &_arrow_sw { &:before, &:after { border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width; } &:before { z-index: ck-z( 'default' ); border-color: transparent transparent ck-border-color( 'foreground' ) transparent; } &:after { z-index: ck-z( 'default', 1 ); border-color: transparent transparent ck-color( 'background' ) transparent; margin-top: $ck-balloon-arrow-offset; } } &_arrow_ne, &_arrow_nw { &:before, &:after { border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width; } &:before { z-index: ck-z( 'default' ); border-color: ck-border-color( 'foreground' ) transparent transparent; } &:after { z-index: ck-z( 'default', 1 ); border-color: ck-color( 'background' ) transparent transparent transparent; margin-bottom: $ck-balloon-arrow-offset; } } &_arrow_se { &:before, &:after { left: 2 * $ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_arrow_sw { &:before, &:after { right: 2 * $ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_arrow_ne { &:before, &:after { left: 2 * $ck-balloon-arrow-half-width; bottom: -$ck-balloon-arrow-height; } } &_arrow_nw { &:before, &:after { right: 2 * $ck-balloon-arrow-half-width; bottom: -$ck-balloon-arrow-height; } } &_visible { display: block; } // Box to accommodate buttons. .ck-box { margin-top: ck-spacing( 'medium' ); * + * { margin-left: ck-spacing( 'medium' ); } } }