Merge pull request #118 from ckeditor/t/ckeditor5-ui/333

Feature: Implemented styles for the ButtonDropdown (see: ckeditor/ckeditor5-ui#333). Fixed spacing issues with toolbar items wrapped to the new line. Closes ckeditor/ckeditor5#682.

Also:
* Various improvements to visual styles of the dropdowns.
* Migrated toolbar to CSS `flex`.
* Allowed vertical toolbars.

Author: oleq

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

@@ -20,6 +20,7 @@ a.ck-button {
 	cursor: default;
 	vertical-align: middle;
 	padding: var(--ck-spacing-small);
+	text-align: center;
 
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
@@ -29,10 +30,6 @@ a.ck-button {
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 	}
 
-	@mixin ck-button-icon {
-		float: left;
-	}
-
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	&.ck-disabled {
 		@mixin ck-button-icon {
@@ -52,10 +49,6 @@ a.ck-button {
 			margin-left: calc(-1 * var(--ck-spacing-small));
 			margin-right: var(--ck-spacing-small);
 		}
-
-		& .ck-button__label {
-			display: block;
-		}
 	}
 
 	/* A style of the button which is currently on, e.g. its feature is active. */
@@ -74,7 +67,6 @@ a.ck-button {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;
 
-		float: left;
 		height: var(--ck-line-height-base)em;
 		line-height: inherit;
 		font-weight: inherit;

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

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-buttondropdown .ck-toolbar {
+	border: 0;
+	padding: 0;
+
+	& .ck-button {
+		border-radius: 0;
+		border: 0;
+		margin: 0;
+	}
+}

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

@@ -14,14 +14,18 @@
 	/* A triangle displayed to indicate this is actually a dropdown. */
 	&::after {
 		border-style: solid;
-		border-width: .4em .4em 0 .4em;
+		border-width: .4em .35em 0 .35em;
 		border-color: var(--ck-color-dropdown-symbol) transparent;
 		right: var(--ck-spacing-standard);
 	}
 
+	&.ck-disabled::after {
+		border-color: var(--ck-color-dropdown-symbol-disabled) transparent;
+	}
+
 	& .ck-button.ck-dropdown__button {
 		/* A space to accommodate the triangle. */
-		padding-right: calc(2 * var(--ck-spacing-standard));
+		padding-right: calc(2.5 * var(--ck-spacing-standard));
 
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		&.ck-disabled .ck-button__label {
@@ -46,4 +50,7 @@
 
 	/* Compensate double border from button and from box when positioned below the button. */
 	bottom: 1px;
+
+	/* Make sure the panel is at least as wide as the dropdown's button. */
+	min-width: 100%;
 }

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

@@ -30,7 +30,8 @@
 		border-width: 0;
 	}
 
-	& .ck-button {
+	& > .ck-button,
+	& .ck-buttondropdown .ck-dropdown__button {
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
 			background: var(--ck-color-editor-toolbar-background);
@@ -41,7 +42,8 @@
 		}
 	}
 
-	& .ck-button.ck-dropdown__button {
+	/* Exclude main button dropdown button */
+	& .ck-dropdown:not(.ck-buttondropdown) .ck-dropdown__button {
 		border-width: 1px;
 
 		&:not(:hover):not(:focus):not(.ck-on) {

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

@@ -8,15 +8,25 @@
 .ck-toolbar {
 	@mixin ck-rounded-corners;
 
-	padding: var(--ck-spacing-small);
+	padding: 0 var(--ck-spacing-small) var(--ck-spacing-small);
 	border: 1px solid var(--ck-color-toolbar-border);
 
-	/* Allow wrapping toolbar items to the new line. */
-	white-space: initial;
-
-	/* (#11) Separate toolbar items. */
 	& > * {
+		/* (#11) Separate toolbar items. */
 		margin-right: var(--ck-spacing-small);
+
+		/* Make sure items wrapped to the next line have v-spacing */
+		margin-top: var(--ck-spacing-small);
+	}
+
+	&.ck-toolbar_vertical {
+		& > * {
+			/* Items in a vertical toolbar should have no horizontal margin */
+			margin-right: 0;
+
+			/* Items in a vertical toolbar should span the horizontal space */
+			width: 100%;
+		}
 	}
 
 	& > *:last-child {
@@ -28,13 +38,6 @@
 	}
 }
 
-.ck-toolbar_floating {
-	/* Disallow wrapping toolbar items to the new line when the toolbar is floating,
-	resulting in an toolbar shapes when the horizontal space is limited.
-	https://github.com/ckeditor/ckeditor5-theme-lark/issues/93 */
-	white-space: nowrap;
-}
-
 .ck-toolbar__separator {
 	width: 1px;
 	height: calc(1em + 2 * var(--ck-spacing-medium));
@@ -43,5 +46,5 @@
 }
 
 .ck-toolbar__newline {
-	height: var(--ck-spacing-small);
+	margin: 0;
 }

theme/ckeditor5-ui/globals/_colors.css

@@ -58,7 +58,8 @@
 
 	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
 	--ck-color-dropdown-panel-border: 							var(--ck-color-base-border);
-	--ck-color-dropdown-symbol: 								hsl(0, 0%, 44%);
+	--ck-color-dropdown-symbol: 								hsl(0, 0%, 30%);
+	--ck-color-dropdown-symbol-disabled: 						hsl(0, 0%, 50%);
 
 	/* -- Input --------------------------------------------------------------------------------- */