| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- /*
- * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- @import "../../../mixins/_rounded.css";
- @import "../../../mixins/_shadow.css";
- :root {
- --ck-balloon-arrow-offset: 2px;
- --ck-balloon-arrow-height: 10px;
- --ck-balloon-arrow-half-width: 8px;
- }
- .ck.ck-balloon-panel {
- @mixin ck-rounded-corners;
- @mixin ck-drop-shadow;
- min-height: 15px;
- background: var(--ck-color-panel-background);
- border: 1px solid var(--ck-color-panel-border);
- &.ck-balloon-panel_with-arrow {
- &::before,
- &::after {
- width: 0;
- height: 0;
- border-style: solid;
- }
- }
- &[class*="arrow_n"] {
- &::before,
- &::after {
- border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
- }
- &::before {
- border-color: transparent transparent var(--ck-color-panel-border) transparent;
- }
- &::after {
- border-color: transparent transparent var(--ck-color-panel-background) transparent;
- margin-top: var(--ck-balloon-arrow-offset);
- }
- }
- &[class*="arrow_s"] {
- &::before,
- &::after {
- border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
- }
- &::before {
- border-color: var(--ck-color-panel-border) transparent transparent;
- }
- &::after {
- border-color: var(--ck-color-panel-background) transparent transparent transparent;
- margin-bottom: var(--ck-balloon-arrow-offset);
- }
- }
- &.ck-balloon-panel_arrow_n {
- &::before,
- &::after {
- left: 50%;
- margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
- top: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- &.ck-balloon-panel_arrow_nw {
- &::before,
- &::after {
- left: calc(2 * var(--ck-balloon-arrow-half-width));
- top: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- &.ck-balloon-panel_arrow_ne {
- &::before,
- &::after {
- right: calc(2 * var(--ck-balloon-arrow-half-width));
- top: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- &.ck-balloon-panel_arrow_s {
- &::before,
- &::after {
- left: 50%;
- margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
- bottom: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- &.ck-balloon-panel_arrow_sw {
- &::before,
- &::after {
- left: calc(2 * var(--ck-balloon-arrow-half-width));
- bottom: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- &.ck-balloon-panel_arrow_se {
- &::before,
- &::after {
- right: calc(2 * var(--ck-balloon-arrow-half-width));
- bottom: calc(-1 * var(--ck-balloon-arrow-height));
- }
- }
- }
|