|
|
@@ -13,6 +13,16 @@
|
|
|
--ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
|
|
|
}
|
|
|
|
|
|
+@define-mixin ck-widget-type-around-button-visible {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+
|
|
|
+@define-mixin ck-widget-type-around-button-hidden {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
.ck .ck-widget {
|
|
|
/*
|
|
|
* Styles of the type around buttons
|
|
|
@@ -22,11 +32,10 @@
|
|
|
height: var(--ck-widget-type-around-button-size);
|
|
|
background: var(--ck-color-widget-type-around-button);
|
|
|
border-radius: 100px;
|
|
|
-
|
|
|
- pointer-events: none;
|
|
|
- opacity: 0;
|
|
|
transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
|
|
|
|
|
+ @mixin ck-widget-type-around-button-hidden;
|
|
|
+
|
|
|
& svg {
|
|
|
width: 10px;
|
|
|
height: 8px;
|
|
|
@@ -77,8 +86,7 @@
|
|
|
&.ck-widget_selected,
|
|
|
&:hover {
|
|
|
& > .ck-widget__type-around > .ck-widget__type-around__button {
|
|
|
- pointer-events: auto;
|
|
|
- opacity: 1;
|
|
|
+ @mixin ck-widget-type-around-button-visible;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -115,35 +123,50 @@
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
|
|
|
- & .ck-widget__type-around__line {
|
|
|
+ /*
|
|
|
+ * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
|
|
|
+ */
|
|
|
+ & .ck-widget__type-around__fake-caret {
|
|
|
pointer-events: none;
|
|
|
height: 1px;
|
|
|
- animation: ck-widget-type-around-line-pulse linear 1s infinite normal forwards;
|
|
|
+ animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
|
|
|
+
|
|
|
+ /*
|
|
|
+ * The semit-transparent-outline+background combo improves the contrast
|
|
|
+ * when the background underneath the fake caret is dark.
|
|
|
+ */
|
|
|
outline: solid 1px hsla(0, 0%, 100%, .5);
|
|
|
background: var(--ck-color-base-text);
|
|
|
}
|
|
|
|
|
|
+ /*
|
|
|
+ * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
|
|
|
+ * Despite the widget being physically selected in the model, its outline should disappear.
|
|
|
+ */
|
|
|
&.ck-widget_selected,
|
|
|
&.ck-widget.ck-widget_selected:hover {
|
|
|
- &.ck-widget_type-around_active_before,
|
|
|
- &.ck-widget_type-around_active_after {
|
|
|
+ &.ck-widget_type-around_show-fake-caret_before,
|
|
|
+ &.ck-widget_type-around_show-fake-caret_after {
|
|
|
outline-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.ck-widget_type-around_active_before,
|
|
|
- &.ck-widget_type-around_active_after {
|
|
|
+ /*
|
|
|
+ * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
|
|
|
+ * In this state, the type around buttons would collide with the fake carets so they should disappear.
|
|
|
+ */
|
|
|
+ &.ck-widget_type-around_show-fake-caret_before,
|
|
|
+ &.ck-widget_type-around_show-fake-caret_after {
|
|
|
& > .ck-widget__type-around > .ck-widget__type-around__button {
|
|
|
- pointer-events: none;
|
|
|
- opacity: 0;
|
|
|
+ @mixin ck-widget-type-around-button-hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Fake horizontal caret integration with the selection handle. When the caret is visible, simply
|
|
|
- * hide the handle because it makes no sense and intersects with the caret.
|
|
|
+ * hide the handle because it intersects with the caret (and does not make much sense anyway).
|
|
|
*/
|
|
|
- &.ck-widget_type-around_active_before.ck-widget_with-selection-handle > .ck-widget__selection-handle {
|
|
|
+ &.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle > .ck-widget__selection-handle {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
@@ -159,8 +182,7 @@
|
|
|
&.ck-widget_selected,
|
|
|
&:hover {
|
|
|
& > .ck-widget__type-around > .ck-widget__type-around__button {
|
|
|
- pointer-events: none;
|
|
|
- opacity: 0;
|
|
|
+ @mixin ck-widget-type-around-button-hidden;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -207,7 +229,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-@keyframes ck-widget-type-around-line-pulse {
|
|
|
+@keyframes ck-widget-type-around-fake-caret-pulse {
|
|
|
0% {
|
|
|
opacity: 1;
|
|
|
}
|