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

Merge branch 'master' into t/ckeditor5/952

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

+ 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%);

+ 1 - 1
packages/ckeditor5-theme-lark/package.json

@@ -34,7 +34,7 @@
     "lint-staged": "^7.0.0"
   },
   "engines": {
-    "node": ">=6.0.0",
+    "node": ">=6.9.0",
     "npm": ">=3.0.0"
   },
   "author": "CKSource (http://cksource.com/)",

+ 2 - 1
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -28,6 +28,7 @@ import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg
 import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
 import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
 import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
 import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
 
 import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
@@ -67,7 +68,7 @@ const icons = {
 	bold, italic, underline, code, strikethrough,
 
 	// core
-	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,
 
 	// font
 	fontFamily, fontSize,

+ 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%);

+ 11 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

@@ -7,7 +7,7 @@
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 
-	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-size: 20px;
 	--ck-image-upload-icon-width: 2px;
 }
 
@@ -20,6 +20,9 @@
 	animation-fill-mode: forwards, forwards;
 	animation-duration: 500ms, 500ms;
 
+	/* To make animation scalable. */
+	font-size: var(--ck-image-upload-icon-size);
+
 	/* Hide completed upload icon after 3 seconds. */
 	animation-delay: 0ms, 3000ms;
 
@@ -42,6 +45,9 @@
 		animation-duration: 500ms;
 		animation-delay: 500ms;
 		animation-fill-mode: forwards;
+
+		/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
+		box-sizing: border-box;
 	}
 }
 
@@ -68,28 +74,16 @@
 @keyframes ck-upload-complete-icon-check {
 	0% {
 		opacity: 1;
-		height: 0;
 		width: 0;
+		height: 0;
 	}
 	33% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-
+		width: 0.3em;
 		height: 0;
 	}
 	100% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be:
-		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
-		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-		height: 0.416em;
-
 		opacity: 1;
+		width: 0.3em;
+		height: 0.45em;
 	}
 }

+ 3 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css

@@ -17,7 +17,9 @@
 			/* Fixes the problem where surrounding cells cover the focused cell's border.
 			It does not fix the problem in all places but the UX is improved.
 			See https://github.com/ckeditor/ckeditor5-table/issues/29. */
-			border-style: double;
+			border-style: none;
+			outline: 1px solid var(--ck-color-focus-border);
+			outline-offset: -1px; /* progressive enhancement - no IE support */
 		}
 	}
 }

+ 9 - 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;
@@ -45,6 +48,12 @@ a.ck.ck-button {
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 	&.ck-disabled {
+		&:active,
+		&:focus {
+			/* The disabled button should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
+		}
+
 		& .ck-button__icon {
 			@mixin ck-disabled;
 		}

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

@@ -34,7 +34,7 @@ of the component, floating–point numbers have been used which, for the default
 		margin-left: auto;
 
 		/* Gently animate the background color of the toggle switch */
-		transition: background 500ms ease;
+		transition: background 400ms ease;
 
 		width: var(--ck-switch-button-toggle-width);
 		background: var(--ck-color-switch-button-off-background);

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

@@ -72,6 +72,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;
+			}
+		}
+	}
 }

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

@@ -23,7 +23,8 @@
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
 
-	transition-property: box-shadow,border;
+	/* Apply some smooth transition to the box-shadow and border. */
+	transition-property: box-shadow, border;
 	transition: .2s ease-in-out;
 
 	&:focus {
@@ -35,5 +36,10 @@
 		border: 1px solid var(--ck-color-input-disabled-border);
 		background: var(--ck-color-input-disabled-background);
 		color: var(--ck-color-input-disabled-text);
+
+		&:focus {
+			/* The read-only input should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
+		}
 	}
 }

+ 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;
 			}

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

@@ -16,7 +16,8 @@
 	/* -- 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-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
 	--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 +25,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%);

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

@@ -4,10 +4,20 @@
  */
 
 :root {
+	/**
+	 * The geometry of the of focused element's outer shadow.
+	 */
+	--ck-focus-outer-shadow-geometry: 0 0 0 3px;
+
 	/**
 	 * 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: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-shadow);
+
+	/**
+	 * A visual style of focused element's outer shadow (when disabled).
+	 */
+	--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-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 {