Explorar o código

Visually improved the :hover state of the toggle switch button. Added background colors and shadows as a visual feedback.

Aleksander Nowodzinski %!s(int64=6) %!d(string=hai) anos
pai
achega
fb5b19a040

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

@@ -39,6 +39,14 @@ of the component, floating–point numbers have been used which, for the default
 		width: var(--ck-switch-button-toggle-width);
 		background: var(--ck-color-switch-button-off-background);
 
+		&:hover {
+			background: var(--ck-color-switch-button-off-hover-background);
+
+			& .ck-button__toggle__inner {
+				box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
+			}
+		}
+
 		& .ck-button__toggle__inner {
 			@mixin ck-rounded-corners {
 				border-radius: calc(.5*var(--ck-border-radius));
@@ -51,13 +59,17 @@ of the component, floating–point numbers have been used which, for the default
 			background: var(--ck-color-switch-button-inner-background);
 
 			/* Gently animate the inner part of the toggle switch */
-			transition: transform 300ms ease;
+			transition: all 300ms ease;
 		}
 	}
 
 	&.ck-on .ck-button__toggle {
 		background: var(--ck-color-switch-button-on-background);
 
+		&:hover {
+			background: var(--ck-color-switch-button-on-hover-background);
+		}
+
 		& .ck-button__toggle__inner {
 			/*
 			 * Move the toggle switch to the right. It will be animated.

+ 3 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -50,8 +50,11 @@
 	--ck-color-button-cancel: 									hsl(15, 100%, 43%);
 
 	--ck-color-switch-button-off-background:					hsl(0, 0%, 69%);
+	--ck-color-switch-button-off-hover-background:				hsl(0, 0%, 64%);
 	--ck-color-switch-button-on-background:						var(--ck-color-button-action-background);
+	--ck-color-switch-button-on-hover-background:				hsl(104, 44%, 43%);
 	--ck-color-switch-button-inner-background:					var(--ck-color-base-background);
+	--ck-color-switch-button-inner-shadow:						hsla(0, 0%, 0%, 0.1);
 
 	/* -- Dropdown ------------------------------------------------------------------------------ */