8
0
Pārlūkot izejas kodu

Improved character rendering in the grid by increasing specificity and adjusting styles of the label.

Aleksander Nowodzinski 6 gadi atpakaļ
vecāks
revīzija
2eff408dd6

+ 19 - 21
packages/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css

@@ -15,30 +15,28 @@
 	max-height: calc(var(--ck-character-grid-tile-size) * 6);
 	overflow-y: auto;
 	overflow-x: hidden;
-}
-
-.ck.ck-character-grid__tile {
-	width: var(--ck-character-grid-tile-size);
-	height: var(--ck-character-grid-tile-size);
-	min-width: var(--ck-character-grid-tile-size);
-	min-height: var(--ck-character-grid-tile-size);
-	padding: 0;
-	transition: .2s ease box-shadow;
-	border: 0;
 
-	&:focus:not( .ck-disabled ),
-	&:hover:not( .ck-disabled ) {
-		/* Disable the default .ck-button's border ring. */
+	& .ck-character-grid__tile {
+		width: var(--ck-character-grid-tile-size);
+		height: var(--ck-character-grid-tile-size);
+		min-width: var(--ck-character-grid-tile-size);
+		min-height: var(--ck-character-grid-tile-size);
+		padding: 0;
+		transition: .2s ease box-shadow;
 		border: 0;
-	}
 
-	&:focus:not( .ck-disabled ),
-	&:hover:not( .ck-disabled ) {
-		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
-	}
+		&:focus:not( .ck-disabled ),
+		&:hover:not( .ck-disabled ) {
+			/* Disable the default .ck-button's border ring. */
+			border: 0;
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+		}
 
-	/* Make sure the glyph is rendered in the center of the button */
-	& .ck-button__label {
-		line-height: inherit;
+		/* Make sure the glyph is rendered in the center of the button */
+		& .ck-button__label {
+			line-height: inherit;
+			width: 100%;
+			text-align: center;
+		}
 	}
 }