8
0
Просмотр исходного кода

Other: Used a solid box-shadow to indicate the :focus state of the .ck-button (also .ck-input). Obsoleted the background color change on .ck-button:focus to avoid situations when a focused button looks like an active one (see ckeditor/ckeditor5-ui#394).

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
f6b85b788d

+ 3 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -27,19 +27,19 @@
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
-	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
-	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

+ 3 - 3
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -93,19 +93,19 @@ The file containing custom variables will be named `custom.css` and it will look
 	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
 
 	--ck-color-button-default-background: var(--ck-custom-background);
-	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
-	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

+ 3 - 3
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -21,19 +21,19 @@
 		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 
 		--ck-color-button-default-background: var(--ck-custom-background);
-		--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+		--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
 		--ck-color-button-default-active-background: hsl(270, 2%, 20%);
 		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
 		--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
 		--ck-color-button-on-background: var(--ck-custom-foreground);
-		--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+		--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
 		--ck-color-button-on-active-background: hsl(255, 4%, 14%);
 		--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
 		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
 		--ck-color-button-action-background: hsl(168, 76%, 42%);
-		--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+		--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
 		--ck-color-button-action-active-background: hsl(168, 76%, 36%);
 		--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
 		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);

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

@@ -34,6 +34,9 @@ a.ck.ck-button {
 	/* Avoid flickering when the foucs border shows up. */
 	border: 1px solid transparent;
 
+	/* Apply some smooth transition to the box-shadow. */
+	transition: box-shadow 200ms ease-in-out;
+
 	&:active,
 	&:focus {
 		@mixin ck-focus-ring;

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

@@ -67,6 +67,6 @@
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	bottom: 0;
 
-	/* Make sure the panel is at least as wide as the dropdown's button. */
+	/* Make sure the panel is at least as wide as the drop-down's button. */
 	min-width: 100%;
 }

+ 19 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -11,4 +11,23 @@
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 	}
+
+	/* Make sure the button belonging to the first/last child of the list goes well with the
+	border radius of the entire panel. */
+	& .ck-list__item {
+		&:first-child .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+
+		&:last-child .ck-button {
+			@mixin ck-rounded-corners {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
+		}
+	}
 }

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

@@ -23,6 +23,7 @@
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
 
+	/* Apply some smooth transition to the box-shadow and border. */
 	transition-property: box-shadow,border;
 	transition: .2s ease-in-out;
 

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

@@ -45,8 +45,7 @@
 			background: var(--ck-color-list-button-on-background);
 			color: var(--ck-color-list-button-on-text);
 
-			&:hover:not(ck-disabled),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-on-background-focus);
 			}
 
@@ -55,8 +54,7 @@
 			}
 		}
 
-		&:hover:not(.ck-disabled),
-		&:focus {
+		&:hover:not(.ck-disabled) {
 			background: var(--ck-color-list-button-hover-background);
 		}
 	}
@@ -68,8 +66,7 @@
 			background: var(--ck-color-list-background);
 			color: inherit;
 
-			&:hover:not(ck-disabled),
-			&:focus {
+			&:hover:not(ck-disabled) {
 				background: var(--ck-color-list-button-hover-background);
 				color: inherit;
 			}

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

@@ -16,7 +16,7 @@
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
 	--ck-color-focus-border: 									hsl(208, 90%, 62%);
-	--ck-color-focus-shadow:									hsl(209, 90%, 72%);
+	--ck-color-focus-shadow:									hsla(209, 90%, 72%,.5);
 	--ck-color-text: 											var(--ck-color-base-text);
 	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
 	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
@@ -24,19 +24,19 @@
 	/* -- Buttons ------------------------------------------------------------------------------- */
 
 	--ck-color-button-default-background: 						transparent;
-	--ck-color-button-default-focus-background: 				hsl(0, 0%, 90%);
+	--ck-color-button-default-hover-background: 				hsl(0, 0%, 90%);
 	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
 	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
 	--ck-color-button-default-disabled-background: 				transparent;
 
 	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
-	--ck-color-button-on-focus-background: 						hsl(0, 0%, 77%);
+	--ck-color-button-on-hover-background: 						hsl(0, 0%, 77%);
 	--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
 	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
 	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
+	--ck-color-button-action-hover-background: 					hsl(104, 44%, 43%);
 	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
 	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
 	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -7,7 +7,7 @@
 	/**
 	 * A visual style of focused element's outer shadow.
 	 */
-	--ck-focus-outer-shadow: 0 0 3px var(--ck-color-focus-shadow);
+	--ck-focus-outer-shadow: 0 0 0 3px var(--ck-color-focus-shadow);
 
 	/**
 	 * A visual style of focused element's border or outline.

+ 2 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -13,9 +13,8 @@
 	background: var($(prefix)-background);
 
 	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: var($(prefix)-focus-background);
+		&:hover {
+			background: var($(prefix)-hover-background);
 		}
 
 		&:active {