Explorar el Código

Improved ButtonView, DropdownView and ListView compatibility with flex and the new SwitchButtonView component.

Aleksander Nowodzinski hace 7 años
padre
commit
b321d26d2c

+ 1 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -77,6 +77,7 @@ a.ck.ck-button {
 		color: var(--ck-color-button-cancel);
 	}
 
+	/* Allow icon coloring using the text "color" property. */
 	& .ck-button__icon {
 		& use,
 		& use * {

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -18,6 +18,9 @@
 	& .ck-dropdown__arrow {
 		right: var(--ck-spacing-standard);
 		width: var(--ck-dropdown-arrow-size);
+
+		/* A space to accommodate the triangle. */
+		margin-left: var(--ck-spacing-small);
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {
@@ -25,9 +28,6 @@
 	}
 
 	& .ck-button.ck-dropdown__button {
-		/* A space to accommodate the triangle. */
-		padding-right: calc(2.5 * var(--ck-spacing-standard));
-
 		&:not(.ck-button_with-text) {
 			/* Make sure dropdowns with just an icon have the right inner spacing */
 			padding-left: var(--ck-spacing-small);

+ 2 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -20,7 +20,8 @@
 	}
 
 	& > .ck-splitbutton__arrow {
-		/* It's a text-less button but still, it should not be square. */
+		/* It's a text-less button and since the icon is positioned absolutely in such situation,
+		it must get some arbitrary min-width. */
 		min-width: unset;
 
 		/* Don't round the arrow button on the right side */

+ 15 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -56,6 +56,21 @@
 			background: var(--ck-color-list-button-hover-background);
 		}
 	}
+
+	/* It's unnecessary to change the background/text of a switch toggle; it has different ways
+	of conveying its state (like the switcher) */
+	& .ck-switchbutton {
+		&.ck-on {
+			background: var(--ck-color-list-background);
+			color: inherit;
+
+			&:hover:not(ck-disabled),
+			&:focus {
+				background: var(--ck-color-list-button-hover-background);
+				color: inherit;
+			}
+		}
+	}
 }
 
 .ck.ck-list__separator {