From c9352ab8e946b0a5792687252cdb2f5d51cc7407 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 7 Nov 2017 17:18:25 +0100 Subject: [PATCH 1/4] Migrated UI components from SASS to PostCSS. Added theme support. --- src/classiceditor.js | 2 +- theme/classiceditor.css | 17 ++++++++++++++++ theme/theme.scss | 44 ----------------------------------------- 3 files changed, 18 insertions(+), 45 deletions(-) create mode 100644 theme/classiceditor.css delete mode 100644 theme/theme.scss diff --git a/src/classiceditor.js b/src/classiceditor.js index 0976e40..2b8c11a 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -13,7 +13,7 @@ import ClassicEditorUI from './classiceditorui'; import ClassicEditorUIView from './classiceditoruiview'; import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; -import '../theme/theme.scss'; +import '../theme/classiceditor.css'; /** * The {@glink builds/guides/overview#Classic-editor classic editor} implementation. diff --git a/theme/classiceditor.css b/theme/classiceditor.css new file mode 100644 index 0000000..374bbdd --- /dev/null +++ b/theme/classiceditor.css @@ -0,0 +1,17 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "@ckeditor/ckeditor5-ui/theme/helpers/zindex.css"; + +.ck-editor { + /* All the elements within `.ck-editor` are positioned relatively to it. + If any element needs to be positioned with respect to the , etc., + it must land outside of the `.ck-editor` in DOM. */ + position: relative; +} + +.ck-editor__top .ck-sticky-panel .ck-toolbar { + z-index: var(--ck-z-modal); +} diff --git a/theme/theme.scss b/theme/theme.scss deleted file mode 100644 index 80a08f8..0000000 --- a/theme/theme.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -@import '~@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; - -.ck-editor { - // All the elements within `.ck-editor` are positioned relatively to it. - // If any element needs to be positioned with respect to the , etc., - // it must land outside of the `.ck-editor` in DOM. - position: relative; -} - -.ck-editor__top .ck-sticky-panel { - .ck-toolbar { - @include ck-rounded-corners { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - // https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 - z-index: ck-z( 'modal' ); - background: ck-color( 'editor-toolbar-background' ); - border-bottom-width: 0; - } - - .ck-sticky-panel__content_sticky { - .ck-toolbar { - border-bottom-width: 1px; - - @include ck-rounded-corners { - border-radius: 0; - } - } - } -} - -.ck-editor__editable { - @include ck-rounded-corners { - border-top-left-radius: 0; - border-top-right-radius: 0; - }; - - border: 1px solid ck-color( 'editor-border' ); -} From 75839576515ee882700a0f561bfd233664a549ea Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 17 Nov 2017 11:10:02 +0100 Subject: [PATCH 2/4] Removed unnecessary style dependency. --- theme/classiceditor.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/theme/classiceditor.css b/theme/classiceditor.css index 374bbdd..f308ac2 100644 --- a/theme/classiceditor.css +++ b/theme/classiceditor.css @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "@ckeditor/ckeditor5-ui/theme/helpers/zindex.css"; - .ck-editor { /* All the elements within `.ck-editor` are positioned relatively to it. If any element needs to be positioned with respect to the , etc., From 74d406c1c658dee00e35fdc84e4dd540b7f6628e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 17 Nov 2017 15:29:22 +0100 Subject: [PATCH 3/4] Moved CSS import to the ClassicEditorUIView. --- src/classiceditor.js | 2 -- src/classiceditoruiview.js | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 2b8c11a..8ba15e5 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -13,8 +13,6 @@ import ClassicEditorUI from './classiceditorui'; import ClassicEditorUIView from './classiceditoruiview'; import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; -import '../theme/classiceditor.css'; - /** * The {@glink builds/guides/overview#Classic-editor classic editor} implementation. * It uses an inline editable and a sticky toolbar, all enclosed in a boxed UI. diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js index a99cc21..41ca570 100644 --- a/src/classiceditoruiview.js +++ b/src/classiceditoruiview.js @@ -12,6 +12,8 @@ import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/i import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; +import '../theme/classiceditor.css'; + /** * Classic editor UI view. Uses an inline editable and a sticky toolbar, all * enclosed in a boxed UI view. From 830a9f638ae3019310cb3adbe52a651294c546a3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 29 Nov 2017 17:09:22 +0100 Subject: [PATCH 4/4] Added missing comment to the package styles sheet. --- theme/classiceditor.css | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/classiceditor.css b/theme/classiceditor.css index f308ac2..37e6b36 100644 --- a/theme/classiceditor.css +++ b/theme/classiceditor.css @@ -11,5 +11,6 @@ } .ck-editor__top .ck-sticky-panel .ck-toolbar { + /* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */ z-index: var(--ck-z-modal); }