Merge pull request #422 from ckeditor/t/394

Other: Allowed list item's buttons to have an outer, visible box-shadow. Ensured the balloon panel's arrow does not cover panel's children. Closes #394.

Author: dkonopka

theme/components/list/list.css

@@ -8,8 +8,6 @@
 .ck.ck-list {
 	@mixin ck-unselectable;
 
-	/* Crop the the items when the list has huge border-radius. */
-	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 
@@ -18,7 +16,10 @@
 		display: block;
 	}
 
-	& .ck-list__item:focus {
+	/* Make sure that whatever child of the list item gets focus, it remains on the
+	top. Thanks to that, styles like box-shadow, outline, etc. are not masked by
+	adjacent list items. */
+	& .ck-list__item > *:focus {
 		position: relative;
 		z-index: var(--ck-z-default);
 	}

theme/components/panel/balloonpanel.css

@@ -3,6 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
+:root {
+	/* Make sure the balloon arrow does not float over its children. */
+	--ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3);
+}
+
 .ck.ck-balloon-panel {
 	display: none;
 	position: absolute;
@@ -17,31 +22,31 @@
 		}
 
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1 );
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}
 
 	&[class*="arrow_n"] {
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1);
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}
 
 	&[class*="arrow_s"] {
 		&::before {
-			z-index: var(--ck-z-default);
+			z-index: var(--ck-balloon-panel-arrow-z-index);
 		}
 
 		&::after {
-			z-index: calc(var(--ck-z-default) + 1);
+			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
 		}
 	}