8
0
Pārlūkot izejas kodu

Improved button (also dropdown, input) rendering to make sure text-less buttons are square and all components share the same height.

Aleksander Nowodzinski 7 gadi atpakaļ
vecāks
revīzija
89f74ab121

+ 4 - 8
packages/ckeditor5-theme-lark/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;

+ 3 - 0
packages/ckeditor5-theme-lark/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;

+ 3 - 0
packages/ckeditor5-theme-lark/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);

+ 8 - 0
packages/ckeditor5-theme-lark/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.
  */

+ 0 - 1
packages/ckeditor5-theme-lark/theme/theme.css

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