// 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-height: 15px; background: ck-color( 'background' ); border: 1px solid ck-border-color( 'foreground' ); &.ck-balloon-panel_with-arrow { &:before, &:after { width: 0; height: 0; border-style: solid; } } &.ck-balloon-panel_arrow { &_n, &_ne, &_nw { &: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; } } &_s, &_se, &_sw { &: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; } } &_n { &:before, &:after { left: 50%; margin-left: -$ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_nw { &:before, &:after { left: 2 * $ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_ne { &:before, &:after { right: 2 * $ck-balloon-arrow-half-width; top: -$ck-balloon-arrow-height; } } &_s { &:before, &:after { left: 50%; margin-left: -$ck-balloon-arrow-half-width; bottom: -$ck-balloon-arrow-height; } } &_sw { &:before, &:after { left: 2 * $ck-balloon-arrow-half-width; bottom: -$ck-balloon-arrow-height; } } &_se { &:before, &:after { right: 2 * $ck-balloon-arrow-half-width; bottom: -$ck-balloon-arrow-height; } } } }