| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- // 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( 'panel-background' );
- border: 1px solid ck-color( 'panel-border' );
- &.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-color( 'panel-border' ) transparent;
- }
- &:after {
- border-color: transparent transparent ck-color( 'panel-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-color( 'panel-border' ) transparent transparent;
- }
- &:after {
- border-color: ck-color( 'panel-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;
- }
- }
- }
- }
|