Merge pull request #146 from ckeditor/t/ckeditor5/816

Other: Adjusted the `border-radius` of the various UI components (drop-down, dropdown panel, list drop-down, and split button) for a better look when placed next to one another. Closes ckeditor/ckeditor5#816.

theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -38,6 +38,12 @@
 			@mixin ck-disabled;
 		}
 
+		/* https://github.com/ckeditor/ckeditor5/issues/816 */
+		&.ck-on {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
 		/* #23 */
 		& .ck-button__label {
 			width: 7em;
@@ -51,11 +57,15 @@
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 
+	/* Disabled radius of top-left border to be consistent with .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+	}
+
 	background: var(--ck-color-dropdown-panel-background);
 	border: 1px solid var(--ck-color-dropdown-panel-border);
-
-	/* Compensate double border from button and from box when positioned below the button. */
-	bottom: 1px;
+	bottom: 0;
 
 	/* Make sure the panel is at least as wide as the dropdown's button. */
 	min-width: 100%;

theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -3,9 +3,19 @@
  * For licensing, see LICENSE.md.
  */
 
-/* Using absolute units to make sure each element has the same height and padding.
-https://github.com/ckeditor/ckeditor5-heading/issues/63 */
-.ck-dropdown .ck-dropdown__panel .ck-list__item {
-	line-height: calc(.8*var(--ck-line-height-base)*var(--ck-font-size-base));
-	padding: calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
+@import "../../../mixins/_rounded.css";
+
+.ck-dropdown .ck-dropdown__panel .ck-list {
+	/* Disabled radius of top-left border to be consistent with .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+	}
+
+	/* Using absolute units to make sure each element has the same height and padding.
+	https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+	& > .ck-list__item {
+		line-height: calc(.8*var(--ck-line-height-base)*var(--ck-font-size-base));
+		padding: calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
+	}
 }

theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -48,4 +48,18 @@
 			border-left-color: var(--ck-color-split-button-hover-border);
 		}
 	}
+
+	/* Don't round the bottom left and right corners of the buttons when "open"
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	&.ck-splitbutton_open {
+		@mixin ck-rounded-corners {
+			& > .ck-splitbutton__action {
+				border-bottom-left-radius: 0;
+			}
+
+			& > .ck-splitbutton__arrow {
+				border-bottom-right-radius: 0;
+			}
+		}
+	}
 }