|
|
@@ -22,8 +22,8 @@
|
|
|
border: 1px solid var(--ck-color-panel-border);
|
|
|
|
|
|
&.ck-balloon-panel_with-arrow {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border-style: solid;
|
|
|
@@ -31,40 +31,40 @@
|
|
|
}
|
|
|
|
|
|
&[class*="arrow_n"] {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
|
|
|
}
|
|
|
|
|
|
- &:before {
|
|
|
+ &::before {
|
|
|
border-color: transparent transparent var(--ck-color-panel-border) transparent;
|
|
|
}
|
|
|
|
|
|
- &:after {
|
|
|
+ &::after {
|
|
|
border-color: transparent transparent var(--ck-color-panel-background) transparent;
|
|
|
margin-top: var(--ck-balloon-arrow-offset);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&[class*="arrow_s"] {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
|
|
|
}
|
|
|
|
|
|
- &:before {
|
|
|
+ &::before {
|
|
|
border-color: var(--ck-color-panel-border) transparent transparent;
|
|
|
}
|
|
|
|
|
|
- &:after {
|
|
|
+ &::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 {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
left: 50%;
|
|
|
margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
|
|
|
top: calc(-1 * var(--ck-balloon-arrow-height));
|
|
|
@@ -72,24 +72,24 @@
|
|
|
}
|
|
|
|
|
|
&.ck-balloon-panel_arrow_nw {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
+ &::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 {
|
|
|
+ &::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 {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
left: 50%;
|
|
|
margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
|
|
|
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
|
|
@@ -97,16 +97,16 @@
|
|
|
}
|
|
|
|
|
|
&.ck-balloon-panel_arrow_sw {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
+ &::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 {
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
right: calc(2 * var(--ck-balloon-arrow-half-width));
|
|
|
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
|
|
}
|