Browse Source

Add :hover state for restricted editiing exeption

panr 6 years ago
parent
commit
b97266b534

+ 6 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css

@@ -5,6 +5,7 @@
 
 :root {
 	--ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
+	--ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
 	--ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
 	--ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
 	--ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
@@ -13,6 +14,7 @@
 .ck-editor__editable .restricted-editing-exception {
 	transition: .2s ease-in-out background;
 	background-color: var(--ck-color-restricted-editing-exception-background);
+	padding: 0 2px;
 	border: 1px solid;
 	border-image: linear-gradient(
 		to right,
@@ -24,6 +26,10 @@
 		var(--ck-color-restricted-editing-exception-brackets) 100%
 	) 1;
 
+	&:hover {
+		background: var(--ck-color-restricted-editing-exception-hover-background);
+	}
+
 	&.restricted-editing-exception_selected {
 		background-color: var(--ck-color-restricted-editing-selected-exception-background);
 		border-image: linear-gradient(