Bladeren bron

Added styles for ColorGrid component and font color features in ckeditor5-font.

Aleksander Nowodzinski 6 jaren geleden
bovenliggende
commit
3b958cc83b

+ 14 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck .ck-button.ck-color-table__remove-color {
+	border-bottom: 1px solid var(--ck-color-base-border);
+	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+
+	& .ck.ck-icon {
+		margin-right: var(--ck-spacing-standard);
+	}
+}
+

+ 41 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+:root {
+	--ck-color-grid-tile-size: 20px;
+	--ck-color-color-grid-tile-border: hsl(0, 0%, 90%);
+	--ck-color-color-grid-tile-border-active: hsl(184, 80%, 50%);
+}
+
+.ck.ck-color-grid {
+	grid-gap: calc( var(--ck-spacing-standard) / 2 );
+	padding: var(--ck-spacing-standard);
+}
+
+.ck.ck-color-grid__tile {
+	@mixin ck-rounded-corners;
+
+	width: var(--ck-color-grid-tile-size);
+	height: var(--ck-color-grid-tile-size);
+	min-width: var(--ck-color-grid-tile-size);
+	min-height: var(--ck-color-grid-tile-size);
+	transition: 200ms ease box-shadow;
+
+	&.ck-disabled {
+		cursor: unset;
+		transition: unset;
+	}
+
+	&.ck-color-table__color-tile_bordered {
+		box-shadow: 0 0 0 1px var(--ck-color-color-grid-tile-border);
+	}
+
+	&:hover:not( .ck-disabled ) {
+		box-shadow: 0 0 0 2px var(--ck-color-color-grid-tile-border-active);
+	}
+}
+