diff --git a/src/classiceditor.js b/src/classiceditor.js index 0976e40..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/theme.scss'; - /** * 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. diff --git a/theme/classiceditor.css b/theme/classiceditor.css new file mode 100644 index 0000000..37e6b36 --- /dev/null +++ b/theme/classiceditor.css @@ -0,0 +1,16 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +.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 { + /* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */ + 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' ); -}