// Copyright (c) 2003-2017, 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-balloon-panel { @include ck-rounded-corners(); @include ck-drop-shadow(); min-width: 50px; min-height: 15px; background: ck-color( 'background' ); border: 1px solid ck-border-color( 'foreground' ); &:before, &:after { width: 0; height: 0; border-style: solid; } &_arrow_s, &_arrow_se, &_arrow_sw { &:before, &:after { border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width; } &:before { border-color: transparent transparent ck-border-color( 'foreground' ) transparent; } &:after { border-color: transparent transparent ck-color( 'background' ) transparent; margin-top: $ck-balloon-arrow-offset; } } &_arrow_n, &_arrow_ne, &_arrow_nw { &:before, &:after { border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width; } &:before { border-color: ck-border-color( 'foreground' ) transparent transparent; } &:after { border-color: ck-color( 'background' ) transparent transparent transparent; margin-bottom: $ck-balloon-arrow-offset; } } &_arrow_s { &:before, &:after { left: 50%; margin-left: -$ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_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_n { &:before, &:after { left: 50%; margin-left: -$ck-balloon-arrow-half-width; bottom: -$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; } } }