|
|
@@ -8,26 +8,32 @@
|
|
|
|
|
|
:root {
|
|
|
--ck-widget-outline-thickness: 3px;
|
|
|
- --ck-color-widget-border-blurred: hsl(0, 0%, 87%);
|
|
|
- --ck-color-widget-border-hover: hsl(43, 100%, 68%);
|
|
|
- --ck-color-widget-editable-focused-background: var(--ck-color-base-background),
|
|
|
+ --ck-widget-handler-icon-size: 16px;
|
|
|
+ --ck-widget-handler-animation-duration: 200ms;
|
|
|
+ --ck-widget-handler-animation-curve: ease;
|
|
|
+
|
|
|
+ --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
|
|
|
+ --ck-color-widget-hover-border: hsl(43, 100%, 62%);
|
|
|
+ --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
|
|
|
+ --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
|
|
|
}
|
|
|
|
|
|
.ck .ck-widget {
|
|
|
margin: var(--ck-spacing-standard) 0;
|
|
|
padding: 0;
|
|
|
|
|
|
+ outline-width: var(--ck-widget-outline-thickness);
|
|
|
+ outline-style: solid;
|
|
|
+ outline-color: transparent;
|
|
|
+ transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
|
|
+
|
|
|
&.ck-widget_selected,
|
|
|
&.ck-widget_selected:hover {
|
|
|
outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
|
|
|
}
|
|
|
|
|
|
- @nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
|
|
|
- outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-blurred);
|
|
|
- }
|
|
|
-
|
|
|
&:hover {
|
|
|
- outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
|
|
|
+ outline-color: var(--ck-color-widget-hover-border);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -41,6 +47,86 @@
|
|
|
@mixin ck-focus-ring;
|
|
|
@mixin ck-box-shadow var(--ck-inner-shadow);
|
|
|
|
|
|
- background-color: var(--ck-color-widget-editable-focused-background);
|
|
|
+ background-color: var(--ck-color-widget-editable-focus-background);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ck .ck-widget.ck-widget_selectable {
|
|
|
+ & .ck-widget__selection-handler {
|
|
|
+ padding: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ /* Background and opacity will be animated as the handler shows up or the widget gets selected. */
|
|
|
+ background-color: transparent;
|
|
|
+ opacity: 0;
|
|
|
+
|
|
|
+ /* Transition:
|
|
|
+ * background-color for the .ck-widget_selected state change,
|
|
|
+ * visibility for hiding the handler,
|
|
|
+ * opacity for the proper look of the icon when the handler disappears. */
|
|
|
+ transition:
|
|
|
+ background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
|
|
|
+ visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
|
|
|
+ opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
|
|
+
|
|
|
+ /* Make only top corners round. */
|
|
|
+ border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
|
|
|
+
|
|
|
+ /* Place the drag handler outside the widget wrapper. */
|
|
|
+ transform: translateY(-100%);
|
|
|
+ left: calc(0px - var(--ck-widget-outline-thickness));
|
|
|
+
|
|
|
+ /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
|
|
|
+ &:hover .ck-icon .ck-icon__selected-indicator {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .ck-icon {
|
|
|
+ /* Make sure the dimensions of the icon are independent of the fon-size of the content. */
|
|
|
+ width: var(--ck-widget-handler-icon-size);
|
|
|
+ height: var(--ck-widget-handler-icon-size);
|
|
|
+ color: var(--ck-color-widget-drag-handler-icon-color);
|
|
|
+
|
|
|
+ /* The "selected" part of the icon is invisible by default */
|
|
|
+ & .ck-icon__selected-indicator {
|
|
|
+ opacity: 0;
|
|
|
+
|
|
|
+ /* Note: The animation is longer on purpose. Simply feels better. */
|
|
|
+ transition: opacity 300ms var(--ck-widget-handler-animation-curve);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Show the selection handler when the widget is selected. */
|
|
|
+ &.ck-widget_selected,
|
|
|
+ &.ck-widget_selected:hover {
|
|
|
+ & .ck-widget__selection-handler {
|
|
|
+ opacity: 1;
|
|
|
+ background-color: var(--ck-color-focus-border);
|
|
|
+
|
|
|
+ /* When the widget is selected, notify the user using the proper look of the icon. */
|
|
|
+ & .ck-icon .ck-icon__selected-indicator {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Show the selection handler on mouse hover over the widget. */
|
|
|
+ &:hover .ck-widget__selection-handler {
|
|
|
+ opacity: 1;
|
|
|
+ background-color: var(--ck-color-widget-hover-border);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Style the widget when it's selected but the editable it belongs to lost focus. */
|
|
|
+.ck-editor__editable.ck-blurred .ck-widget {
|
|
|
+ &.ck-widget_selected,
|
|
|
+ &.ck-widget_selected:hover {
|
|
|
+ outline-color: var(--ck-color-widget-blurred-border);
|
|
|
+
|
|
|
+ & .ck-widget__selection-handler,
|
|
|
+ & .ck-widget__selection-handler:hover {
|
|
|
+ background: var(--ck-color-widget-blurred-border);
|
|
|
+ }
|
|
|
}
|
|
|
}
|