Merge pull request #138 from ckeditor/t/ckeditor5/820

Other: Increased the spacing in the toolbar by making the buttons bigger. Unified rendering of several components. Closes ckeditor/ckeditor5#820.

theme/ckeditor5-link/linkactions.css

@@ -16,7 +16,8 @@
 	}
 
 	& .ck-button.ck-link-actions__preview {
-		padding: 0;
+		padding-left: 0;
+		padding-right: 0;
 
 		&,
 		&:hover,

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

@@ -22,6 +22,10 @@ a.ck-button {
 	padding: var(--ck-spacing-tiny);
 	text-align: center;
 
+	/* A very important piece of styling. Go to variable declaration to learn more. */
+	min-width: var(--ck-ui-component-min-height);
+	min-height: var(--ck-ui-component-min-height);
+
 	/* Normalize the height of the line. Removing this will break consistent height
 	among text and text-less buttons (with icons). */
 	line-height: 1;
@@ -67,14 +71,6 @@ a.ck-button {
 		}
 	}
 
-	&:not(.ck-button_with-text) .ck-button__icon {
-		/* This margin is neccessary for icons in label-less buttons to stretch
-		the button properly. When there's no text in the button, browsers render
-		them too small. It's a really tricky topic, when browsers render svg as an inline
-		content and line size (character width) measurement and alignment kicks in. */
-		margin: var(--ck-spacing-tiny);
-	}
-
 	& .ck-button__label {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;

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

@@ -18,6 +18,9 @@
 		/* Disable a double border between the button and the arrow button. */
 		border-left: 0;
 
+		/* It's a text-less button but still, it should not be square. */
+		min-width: unset;
+
 		/* Don't round the arrow button on the right side */
 		@mixin ck-rounded-corners {
 			border-top-left-radius: unset;

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

@@ -20,6 +20,9 @@
 	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
 	min-width: var(--ck-input-text-width);
 
+	/* This is important to stay of the same height as surrounding buttons */
+	min-height: var(--ck-ui-component-min-height);
+
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);

theme/ckeditor5-ui/globals/_reset.css

@@ -3,6 +3,14 @@
  * For licensing, see LICENSE.md.
  */
 
+:root {
+	/* This is super-important. This is **manually** adjusted so a button without an icon
+	is never smaller than a button with icon, additionally making sure that text-less buttons
+	are perfect squares. The value is also shared by other components which should stay "in-line"
+	with buttons. */
+	--ck-ui-component-min-height: 2.3em;
+}
+
 /**
  * Resets an element, ignoring its children.
  */

theme/ckeditor5-ui/globals/_spacing.css

@@ -9,6 +9,6 @@
 	--ck-spacing-standard: 					var(--ck-spacing-unit);
 	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
 	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
+	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.3);
 	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
 }

theme/theme.css

@@ -2,4 +2,3 @@
  * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
-