Merge pull request #233 from ckeditor/t/ckeditor5-link/186

Feature: Introduced styles for the decorators UI of the `LinkFormView` component (see ckeditor/ckeditor5-link#186).

theme/ckeditor5-link/linkform.css

@@ -46,3 +46,47 @@
 	}
 }
 
+/*
+ * Style link form differently when manual decorators are available.
+ * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
+ */
+.ck.ck-link-form_layout-vertical {
+	padding: 0;
+	min-width: var(--ck-input-text-width);
+
+	& .ck-labeled-input {
+		margin: var(--ck-spacing-standard) var(--ck-spacing-standard) var(--ck-spacing-small);
+
+		& .ck-input-text {
+			min-width: 0;
+			width: 100%;
+		}
+	}
+
+	& .ck-button {
+		padding: var(--ck-spacing-standard);
+		margin: 0;
+		border-radius: 0;
+		border: 0;
+		border-top: 1px solid var(--ck-color-base-border);
+		width: 50%;
+
+		&:first-of-type {
+			border-right: 1px solid var(--ck-color-base-border);
+		}
+	}
+
+	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
+	& .ck.ck-list {
+		margin-left: 0;
+	}
+
+	& .ck-list .ck-button.ck-switchbutton {
+		border: 0;
+
+		&:hover {
+			background: none;
+		}
+	}
+}
+

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.

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 ------------------------------------------------------------------------------ */