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

Improved bracket styles. Moved styles to a separate file.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
4916d03104

+ 2 - 0
packages/ckeditor5-restricted-editing/src/restrictedediting.js

@@ -11,6 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Matcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
 import RestrictedEditingUI from './restrictededitingui';
 
+import '../theme/restrictedediting.css';
+
 /**
  * @extends module:core/plugin~Plugin
  */

+ 2 - 0
packages/ckeditor5-restricted-editing/src/restrictededitingexception.js

@@ -12,6 +12,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import RestrictedEditingExceptionEditing from './restrictededitingexceptionediting';
 import RestrictedEditingExceptionUI from './restrictededitingexceptionui';
 
+import '../theme/restrictedediting.css';
+
 /**
  * @extends module:core/plugin~Plugin
  */

+ 0 - 32
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.html

@@ -32,38 +32,6 @@
 </div>
 
 <style>
-	.ck-restricted-editing-exception {
-		background-color: hsla(31, 100%, 65%, .3);
-	}
-
-	.ck-restricted-editing-exception::before,
-	.ck-restricted-editing-exception::after {
-		content: "​";
-		pointer-events: none;
-		width: 5px;
-		display: inline-block;
-		border: 1px solid;
-		height: 100%;
-	}
-
-	.ck-restricted-editing-exception::before {
-		border-right: 0;
-		border-image: linear-gradient(
-			to right,
-			hsla(0, 0%, 0%, .3) 0%,
-			hsla(0, 0%, 0%, .3) 5px,
-			hsla(0, 0%, 100%, 0) 6px ) 1;
-	}
-
-	.ck-restricted-editing-exception::after {
-		border-left: 0;
-		border-image: linear-gradient(
-			to left,
-			hsla(0, 0%, 0%, .3) 0%,
-			hsla(0, 0%, 0%, .3) 5px,
-			hsla(0, 0%, 100%, 0) 6px ) 1;
-	}
-
 	#current-mode {
 		/*text-align: center;*/
 		padding: 1em 0;

+ 30 - 0
packages/ckeditor5-restricted-editing/theme/restrictedediting.css

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ *                                     !! IMPORTANT & TODO !!
+ *
+ * This file contains all kinds of style and some of them should land in theme-lark before going to prod.
+ *                  For now, let's keep them here to avoid additional branch and PR.
+ */
+
+:root {
+	--ck-restricted-editing-color-exception-background: hsla(31, 100%, 65%, .3);
+	--ck-restricted-editing-color-exception-brackets: hsla(31, 100%, 40%, .4);
+}
+
+.ck-editor__editable .ck-restricted-editing-exception {
+	background-color: var(--ck-restricted-editing-color-exception-background);
+	border: 1px solid;
+	border-image: linear-gradient(
+		to right,
+		var(--ck-restricted-editing-color-exception-brackets) 0%,
+		var(--ck-restricted-editing-color-exception-brackets) 5px,
+		hsla(0, 0%, 0%, 0) 6px,
+		hsla(0, 0%, 0%, 0) calc(100% - 6px),
+		var(--ck-restricted-editing-color-exception-brackets) calc(100% - 5px),
+		var(--ck-restricted-editing-color-exception-brackets) 100%
+	) 1;
+}