8
0
Просмотр исходного кода

Selected widget's handler should have proper background in read-only mode.

Aleksander Nowodzinski 5 лет назад
Родитель
Сommit
d4bf8f3440
1 измененных файлов с 26 добавлено и 18 удалено
  1. 26 18
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

+ 26 - 18
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -115,16 +115,6 @@
 	}
 }
 
-.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
-.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
-	/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
-	In fact, anything with overflow: hidden.
-	https://github.com/ckeditor/ckeditor5-block-quote/issues/28
-	https://github.com/ckeditor/ckeditor5-widget/issues/44
-	https://github.com/ckeditor/ckeditor5-widget/issues/66 */
-	margin-top: calc(1em + var(--ck-widget-handler-icon-size));
-}
-
 /* In a RTL environment, align the selection handler to the right side of the widget */
 /* stylelint-disable-next-line no-descending-specificity */
 .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
@@ -132,8 +122,25 @@
 	right: calc(0px - var(--ck-widget-outline-thickness));
 }
 
+/* https://github.com/ckeditor/ckeditor5/issues/6415 */
+.ck.ck-editor__editable.ck-read-only .ck-widget {
+	&:not(.ck-widget_selected) {
+		/* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
+		See: https://github.com/ckeditor/ckeditor5/issues/1261 */
+		--ck-widget-outline-thickness: 0;
+	}
+
+	&.ck-widget_with-selection-handle {
+		& .ck-widget__selection-handle,
+		& .ck-widget__selection-handle:hover {
+			background: var(--ck-color-widget-blurred-border);
+		}
+	}
+}
+
 /* Style the widget when it's selected but the editable it belongs to lost focus. */
-.ck-editor__editable.ck-blurred .ck-widget {
+/* stylelint-disable-next-line no-descending-specificity */
+.ck.ck-editor__editable.ck-blurred .ck-widget {
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
 		outline-color: var(--ck-color-widget-blurred-border);
@@ -147,11 +154,12 @@
 	}
 }
 
-/* https://github.com/ckeditor/ckeditor5/issues/6415 */
-.ck-editor__editable.ck-read-only .ck-widget {
-	&:not(.ck-widget_selected) {
-		/* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
-		See: https://github.com/ckeditor/ckeditor5/issues/1261 */
-		--ck-widget-outline-thickness: 0;
-	}
+.ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
+.ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
+	/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
+	In fact, anything with overflow: hidden.
+	https://github.com/ckeditor/ckeditor5-block-quote/issues/28
+	https://github.com/ckeditor/ckeditor5-widget/issues/44
+	https://github.com/ckeditor/ckeditor5-widget/issues/66 */
+	margin-top: calc(1em + var(--ck-widget-handler-icon-size));
 }