8
0
Quellcode durchsuchen

Added CSS styles for the list styles UI.

Aleksander Nowodzinski vor 5 Jahren
Ursprung
Commit
3f14175997

+ 12 - 0
packages/ckeditor5-list/theme/liststyles.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar > .ck-toolbar__items {
+	/*
+	 * Use the benefits of the toolbar (e.g. out-of-the-box keyboard navigation) but make it look
+	 * like panel with thumbnails (previews).
+	 */
+	display: grid;
+}

+ 45 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-list-style-button-size: 44px;
+}
+
+.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar {
+	background: none;
+	padding: 0;
+
+	& > .ck-toolbar__items {
+		grid-template-columns: repeat( 3, auto );
+		row-gap: var(--ck-spacing-medium);
+		column-gap: var(--ck-spacing-medium);
+		padding: var(--ck-spacing-medium);
+
+		& .ck-button {
+			/* Make the button look like a thumbnail (the icon "takes it all"). */
+			width: var(--ck-list-style-button-size);
+			height: var(--ck-list-style-button-size);
+			padding: 0;
+
+			/*
+			 * Buttons are aligned by the grid so disable default button margins to not collide with the
+			 * gaps in the grid.
+			 */
+			margin: 0;
+
+			/*
+			 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
+			 * from the button dimensions and, as a result, decrease the size of the icon
+			 * (which becomes blurry as it scales down).
+			 */
+			box-sizing: content-box;
+
+			& .ck-icon {
+				width: var(--ck-list-style-button-size);
+				height: var(--ck-list-style-button-size);
+			}
+		}
+	}
+}