Browse Source

Update styles of the fake visual selection.

Maciej Gołaszewski 5 years ago
parent
commit
87a12f8047

+ 2 - 2
packages/ckeditor5-link/src/linkui.js

@@ -88,7 +88,7 @@ export default class LinkUI extends Plugin {
 		editor.conversion.for( 'downcast' ).markerToHighlight( {
 			model: VISUAL_SELECTION_MARKER_NAME,
 			view: {
-				classes: [ 'ck-link_selected' ]
+				classes: [ 'ck-link_fake-selection' ]
 			}
 		} );
 
@@ -97,7 +97,7 @@ export default class LinkUI extends Plugin {
 			model: VISUAL_SELECTION_MARKER_NAME,
 			view: {
 				name: 'span',
-				classes: [ 'ck-link-text-selection', 'ck-link-text-selection_collapsed' ]
+				classes: [ 'ck-link_fake-selection', 'ck-link_fake-selection_collapsed' ]
 			}
 		} );
 	}

+ 13 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css

@@ -4,14 +4,21 @@
  */
 
 /* Class added to span element surrounding currently selected link. */
-.ck .ck-link-text-selection {
-	background: var(--ck-color-link-default);
+.ck .ck-link_selected {
+	background: var(--ck-color-link-selected-background);
 }
 
-.ck .ck-link-text-selection_collapsed {
-	border: 1px solid var(--ck-color-link-text-selection);
+/* Classes for fake visual selection displayed on text when LinkUI has focus. */
+.ck .ck-link_fake-selection {
+	background: var(--ck-color-link-fake-selection);
 }
 
-.ck .ck-link_selected {
-	background: var(--ck-color-link-text-selection);
+/* Collapsed fake visual selection. */
+.ck .ck-link_fake-selection_collapsed {
+	display: inline-block;
+	height: .8em;
+	border-left: 1px solid var(--ck-color-base-text);
+	margin-left: -1px;
+	outline: solid 1px hsla(0, 0%, 100%, .5);
+	animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -107,5 +107,5 @@
 
 	--ck-color-link-default:									hsl(240, 100%, 47%);
 	--ck-color-link-selected-background:						hsla(201, 100%, 56%, 0.1);
-	--ck-color-link-text-selection:								hsla(201, 100%, 56%, 0.3);
+	--ck-color-link-fake-selection:								hsla(201, 100%, 56%, 0.3);
 }