From 573db2c1f2a3356e1c6c8341088c8e51477f8213 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 7 Nov 2017 17:13:56 +0100 Subject: [PATCH 1/8] Migrated UI components from SASS to PostCSS. Added theme support. --- src/button/buttonview.js | 2 + src/dropdown/dropdownview.js | 2 + src/editorui/boxed/boxededitoruiview.js | 45 +++++++++++---- src/editorui/editoruiview.js | 2 + src/icon/iconview.js | 2 + src/inputtext/inputtextview.js | 2 + src/label/labelview.js | 2 + src/list/listview.js | 2 + src/panel/balloon/balloonpanelview.js | 2 + src/panel/sticky/stickypanelview.js | 2 + src/toolbar/toolbarview.js | 2 + src/tooltip/tooltipview.js | 2 + src/view.js | 2 + tests/dropdown/manual/dropdown.js | 1 - tests/manual/icon/icon.js | 2 - .../manual/panel/balloon/balloonpanelview.js | 1 - tests/manual/panel/sticky/stickypanelview.js | 2 - tests/manual/tickets/126/1.js | 2 - theme/components/button.css | 35 ++++++++++++ theme/components/button.scss | 30 ---------- theme/components/dropdown.css | 41 ++++++++++++++ theme/components/dropdown.scss | 37 ------------- theme/components/editor.scss | 21 ------- theme/components/editorui.css | 4 ++ theme/components/icon.css | 24 ++++++++ theme/components/icon.scss | 34 ------------ theme/components/inputtext.css | 4 ++ theme/components/label.css | 12 ++++ theme/components/label.scss | 10 ---- theme/components/list.css | 23 ++++++++ theme/components/list.scss | 10 ---- theme/components/panel/balloonpanel.css | 53 ++++++++++++++++++ theme/components/panel/balloonpanel.scss | 55 ------------------- theme/components/panel/stickypanel.css | 21 +++++++ theme/components/panel/stickypanel.scss | 17 ------ theme/components/reset.scss | 23 -------- theme/components/toolbar/toolbar.css | 19 +++++++ theme/components/toolbar/toolbar.scss | 15 ----- .../components/{tooltip.scss => tooltip.css} | 30 +++++----- theme/helpers/_editor.scss | 11 ---- theme/helpers/_states.scss | 20 ------- theme/helpers/_zindex.scss | 11 ---- theme/helpers/states.css | 22 ++++++++ theme/helpers/zindex.css | 9 +++ theme/reset.css | 15 +++++ theme/theme.scss | 18 ------ 46 files changed, 356 insertions(+), 345 deletions(-) create mode 100644 theme/components/button.css delete mode 100644 theme/components/button.scss create mode 100644 theme/components/dropdown.css delete mode 100644 theme/components/dropdown.scss delete mode 100644 theme/components/editor.scss create mode 100644 theme/components/editorui.css create mode 100644 theme/components/icon.css delete mode 100644 theme/components/icon.scss create mode 100644 theme/components/inputtext.css create mode 100644 theme/components/label.css delete mode 100644 theme/components/label.scss create mode 100644 theme/components/list.css delete mode 100644 theme/components/list.scss create mode 100644 theme/components/panel/balloonpanel.css delete mode 100644 theme/components/panel/balloonpanel.scss create mode 100644 theme/components/panel/stickypanel.css delete mode 100644 theme/components/panel/stickypanel.scss delete mode 100644 theme/components/reset.scss create mode 100644 theme/components/toolbar/toolbar.css delete mode 100644 theme/components/toolbar/toolbar.scss rename theme/components/{tooltip.scss => tooltip.css} (55%) delete mode 100644 theme/helpers/_editor.scss delete mode 100644 theme/helpers/_states.scss delete mode 100644 theme/helpers/_zindex.scss create mode 100644 theme/helpers/states.css create mode 100644 theme/helpers/zindex.css create mode 100644 theme/reset.css delete mode 100644 theme/theme.scss diff --git a/src/button/buttonview.js b/src/button/buttonview.js index 3ea95b01..89fba155 100644 --- a/src/button/buttonview.js +++ b/src/button/buttonview.js @@ -13,6 +13,8 @@ import TooltipView from '../tooltip/tooltipview'; import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard'; +import '../../theme/components/button.css'; + /** * The button view class. * diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js index 88de7f08..ac1356b4 100644 --- a/src/dropdown/dropdownview.js +++ b/src/dropdown/dropdownview.js @@ -11,6 +11,8 @@ import View from '../view'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; +import '../../theme/components/dropdown.css'; + /** * The dropdown view class. * diff --git a/src/editorui/boxed/boxededitoruiview.js b/src/editorui/boxed/boxededitoruiview.js index 40c79352..b2e30bed 100644 --- a/src/editorui/boxed/boxededitoruiview.js +++ b/src/editorui/boxed/boxededitoruiview.js @@ -8,6 +8,7 @@ */ import EditorUIView from '../../editorui/editoruiview'; +import LabelView from '../../label/labelview'; import uid from '@ckeditor/ckeditor5-utils/src/uid'; /** @@ -25,7 +26,6 @@ export default class BoxedEditorUIView extends EditorUIView { constructor( locale ) { super( locale ); - const t = this.t; const ariaLabelUid = uid(); /** @@ -46,6 +46,15 @@ export default class BoxedEditorUIView extends EditorUIView { */ this.main = this.createCollection(); + /** + * Voice label of the UI. + * + * @protected + * @readonly + * @member {module:ui/view~View} #_voiceLabelView + */ + this._voiceLabelView = this._createVoiceLabel( ariaLabelUid ); + this.setTemplate( { tag: 'div', @@ -62,17 +71,7 @@ export default class BoxedEditorUIView extends EditorUIView { }, children: [ - { - tag: 'span', - attributes: { - id: `cke-editor__aria-label_${ ariaLabelUid }`, - class: 'cke-voice-label' - }, - children: [ - // TODO: Editor name? - t( 'Rich Text Editor' ) - ] - }, + this._voiceLabelView, { tag: 'div', attributes: { @@ -92,4 +91,26 @@ export default class BoxedEditorUIView extends EditorUIView { ] } ); } + + /** + * Creates a voice label view instance. + * + * @private + * @returns {module:ui/label/labelview~LabelView} + */ + _createVoiceLabel( ariaLabelUid ) { + const t = this.t; + const voiceLabel = new LabelView(); + + voiceLabel.text = t( 'Rich Text Editor' ); + + voiceLabel.extendTemplate( { + attributes: { + id: `cke-editor__aria-label_${ ariaLabelUid }`, + class: 'cke-voice-label' + } + } ); + + return voiceLabel; + } } diff --git a/src/editorui/editoruiview.js b/src/editorui/editoruiview.js index 6c644e0d..b5ea2256 100644 --- a/src/editorui/editoruiview.js +++ b/src/editorui/editoruiview.js @@ -12,6 +12,8 @@ import View from '../view'; import Template from '../template'; +import '../../theme/components/editorui.css'; + /** * The editor UI view class. Base class for the editor main views. * diff --git a/src/icon/iconview.js b/src/icon/iconview.js index cec1c56b..ab6681ba 100644 --- a/src/icon/iconview.js +++ b/src/icon/iconview.js @@ -11,6 +11,8 @@ import View from '../view'; +import '../../theme/components/icon.css'; + /** * The icon view class. * diff --git a/src/inputtext/inputtextview.js b/src/inputtext/inputtextview.js index af1d6deb..792cadff 100644 --- a/src/inputtext/inputtextview.js +++ b/src/inputtext/inputtextview.js @@ -9,6 +9,8 @@ import View from '../view'; +import '../../theme/components/inputtext.css'; + /** * The text input view class. * diff --git a/src/label/labelview.js b/src/label/labelview.js index 18853100..6982e893 100644 --- a/src/label/labelview.js +++ b/src/label/labelview.js @@ -9,6 +9,8 @@ import View from '../view'; +import '../../theme/components/label.css'; + /** * The label view class. * diff --git a/src/list/listview.js b/src/list/listview.js index c2dbf2d8..13830986 100644 --- a/src/list/listview.js +++ b/src/list/listview.js @@ -12,6 +12,8 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '../focuscycler'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; +import '../../theme/components/list.css'; + /** * The list view class. * diff --git a/src/panel/balloon/balloonpanelview.js b/src/panel/balloon/balloonpanelview.js index 6ac8bc07..5fe3acdf 100644 --- a/src/panel/balloon/balloonpanelview.js +++ b/src/panel/balloon/balloonpanelview.js @@ -14,6 +14,8 @@ import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement'; import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit'; import global from '@ckeditor/ckeditor5-utils/src/dom/global'; +import '../../../theme/components/panel/balloonpanel.css'; + const toPx = toUnit( 'px' ); const defaultLimiterElement = global.document.body; diff --git a/src/panel/sticky/stickypanelview.js b/src/panel/sticky/stickypanelview.js index 84864f14..34ca0fcf 100644 --- a/src/panel/sticky/stickypanelview.js +++ b/src/panel/sticky/stickypanelview.js @@ -12,6 +12,8 @@ import View from '../../view'; import Template from '../../template'; import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit'; +import '../../../theme/components/panel/stickypanel.css'; + const toPx = toUnit( 'px' ); /** diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js index 18533bf8..2de25be0 100644 --- a/src/toolbar/toolbarview.js +++ b/src/toolbar/toolbarview.js @@ -15,6 +15,8 @@ import ToolbarSeparatorView from './toolbarseparatorview'; import preventDefault from '../bindings/preventdefault.js'; import log from '@ckeditor/ckeditor5-utils/src/log'; +import '../../theme/components/toolbar/toolbar.css'; + /** * The toolbar view class. * diff --git a/src/tooltip/tooltipview.js b/src/tooltip/tooltipview.js index ef524198..1ecd1472 100644 --- a/src/tooltip/tooltipview.js +++ b/src/tooltip/tooltipview.js @@ -9,6 +9,8 @@ import View from '../view'; +import '../../theme/components/tooltip.css'; + /** * The tooltip view class. * diff --git a/src/view.js b/src/view.js index 8f6c17de..a27353e4 100644 --- a/src/view.js +++ b/src/view.js @@ -16,6 +16,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable'; +import '../theme/reset.css'; + /** * The basic view class, which represents an HTML element created out of a * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle diff --git a/tests/dropdown/manual/dropdown.js b/tests/dropdown/manual/dropdown.js index b67f7a9c..f09b4269 100644 --- a/tests/dropdown/manual/dropdown.js +++ b/tests/dropdown/manual/dropdown.js @@ -11,7 +11,6 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import createDropdown from '../../../src/dropdown/createdropdown'; import createListDropdown from '../../../src/dropdown/list/createlistdropdown'; -import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; import testUtils from '../../_utils/utils'; const ui = testUtils.createTestUIView( { diff --git a/tests/manual/icon/icon.js b/tests/manual/icon/icon.js index 16eafe74..cf17605b 100644 --- a/tests/manual/icon/icon.js +++ b/tests/manual/icon/icon.js @@ -7,8 +7,6 @@ import IconView from '../../../src/icon/iconview'; -import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; - const wrapper = document.querySelector( '#inline-svg' ); const icon = ` diff --git a/tests/manual/panel/balloon/balloonpanelview.js b/tests/manual/panel/balloon/balloonpanelview.js index 6a160e37..318ab571 100644 --- a/tests/manual/panel/balloon/balloonpanelview.js +++ b/tests/manual/panel/balloon/balloonpanelview.js @@ -6,7 +6,6 @@ /* globals document */ import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview'; -import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; const defaultPositions = BalloonPanelView.defaultPositions; const container = document.querySelector( '#container' ); diff --git a/tests/manual/panel/sticky/stickypanelview.js b/tests/manual/panel/sticky/stickypanelview.js index b63e7be4..a1e3e216 100644 --- a/tests/manual/panel/sticky/stickypanelview.js +++ b/tests/manual/panel/sticky/stickypanelview.js @@ -6,8 +6,6 @@ import testUtils from '../../../_utils/utils'; import StickyPanelView from '../../../../src/panel/sticky/stickypanelview'; -import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; - const ui = testUtils.createTestUIView( { stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top', stickyToTheBox: '.ck-sticky_to-the-box .ck-editor__top' diff --git a/tests/manual/tickets/126/1.js b/tests/manual/tickets/126/1.js index 854fa8bb..dde2610b 100644 --- a/tests/manual/tickets/126/1.js +++ b/tests/manual/tickets/126/1.js @@ -7,8 +7,6 @@ import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview'; -import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss'; - window.createPanel = selector => { const view = new BalloonPanelView(); diff --git a/theme/components/button.css b/theme/components/button.css new file mode 100644 index 00000000..d566a0b0 --- /dev/null +++ b/theme/components/button.css @@ -0,0 +1,35 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../helpers/states.css"; +@import "./tooltip.css"; + +.ck-button, +a.ck-button { + @mixin ck-unselectable; + @mixin ck-tooltip_enabled; + + display: inline-block; + position: relative; + + &.ck-button_with-text { + & .ck-button__label { + display: block; + } + } + + &:hover { + @mixin ck-tooltip_visible; + } + + /* Get rid of the native focus outline around the tooltip when focused (but not :hover). */ + &:focus:not(:hover) { + @mixin ck-tooltip_disabled; + } + + & .ck-button__label { + display: none; + } +} diff --git a/theme/components/button.scss b/theme/components/button.scss deleted file mode 100644 index 282341e1..00000000 --- a/theme/components/button.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-button, -a.ck-button { - display: inline-block; - position: relative; - - @include ck-unselectable(); - @include ck-tooltip_enabled(); - - &.ck-button_with-text { - .ck-button__label { - display: block; - } - } - - &:hover { - @include ck-tooltip_visible(); - } - - // Get rid of the native focus outline around the tooltip when focused (but not :hover). - &:focus:not(:hover) { - @include ck-tooltip_disabled(); - } - - .ck-button__label { - display: none; - } -} diff --git a/theme/components/dropdown.css b/theme/components/dropdown.css new file mode 100644 index 00000000..575ee397 --- /dev/null +++ b/theme/components/dropdown.css @@ -0,0 +1,41 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../helpers/zindex.css"; + +.ck-dropdown { + display: inline-block; + position: relative; + + /* A triangle displayed to indicate this is actually a dropdown. */ + &::after { + content: ''; + width: 0; + height: 0; + pointer-events: none; + z-index: var(--ck-z-default); + + position: absolute; + top: 50%; + transform: translate( 0, -50% ); + } +} + +.ck-dropdown__panel { + /* This is to get rid of flickering when the tooltip is shown under the panel, + which looks like the panel moves vertically a pixel down and up. */ + -webkit-backface-visibility: hidden; + + display: none; + z-index: var(--ck-z-modal); + + position: absolute; + left: 0px; + transform: translateY( 100% ); +} + +.ck-dropdown__panel-visible { + display: inline-block; +} diff --git a/theme/components/dropdown.scss b/theme/components/dropdown.scss deleted file mode 100644 index 21d96682..00000000 --- a/theme/components/dropdown.scss +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-dropdown { - display: inline-block; - position: relative; - - // A triangle displayed to indicate this is actually a dropdown. - &::after { - content: ''; - width: 0; - height: 0; - pointer-events: none; - z-index: ck-z(); - - position: absolute; - top: 50%; - transform: translate( 0, -50% ); - } -} - -.ck-dropdown__panel { - // This is to get rid of flickering when the tooltip is shown under the panel, - // which looks like the panel moves vertically a pixel down and up. - -webkit-backface-visibility: hidden; - - display: none; - z-index: ck-z( 'modal' ); - - position: absolute; - left: 0px; - transform: translateY( 100% ); - - &-visible { - display: inline-block; - } -} diff --git a/theme/components/editor.scss b/theme/components/editor.scss deleted file mode 100644 index 5cbcf642..00000000 --- a/theme/components/editor.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -@mixin ck-editor-toolbar { - .ck-button { - // Make sure the next button does not overlap focused one. - &:focus { - z-index: ck-z(); - } - - // Tooltip tweaks: - // 1. Don't display tooltips for disabled buttons in the toolbar, - // they're unavailable anyway. - // 2. Don't display tooltips for buttons with text; text explains - // the button anyway. - &.ck-button_with-text:not(.ck-dropdown__button), - &.ck-disabled { - @include ck-tooltip_disabled(); - } - } -} diff --git a/theme/components/editorui.css b/theme/components/editorui.css new file mode 100644 index 00000000..b4ad3787 --- /dev/null +++ b/theme/components/editorui.css @@ -0,0 +1,4 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ diff --git a/theme/components/icon.css b/theme/components/icon.css new file mode 100644 index 00000000..156a8b17 --- /dev/null +++ b/theme/components/icon.css @@ -0,0 +1,24 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +svg.ck-icon { + font-size: 1em; + vertical-align: middle; + color: inherit; + + /* Inherit cursor style (#5). */ + cursor: inherit; + + & * { + /* Inherit cursor style (#5). */ + cursor: inherit; + + /* Allows dynamic coloring of the icons. */ + color: inherit; + + /* Needed by FF. */ + fill: currentColor; + } +} diff --git a/theme/components/icon.scss b/theme/components/icon.scss deleted file mode 100644 index bf4e80b3..00000000 --- a/theme/components/icon.scss +++ /dev/null @@ -1,34 +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/helpers/_fonts'; - -/** - * Default width/height of an icon. Note that it equals the default - * height of the line of text, so e.g. it matches the height of the - * button's label. - */ -$ck-icon-min-size: round( $ck-font-size-base * $ck-line-height-base ); - -svg.ck-icon { - min-width: $ck-icon-min-size; - min-height: $ck-icon-min-size; - - font-size: 1em; - vertical-align: middle; - color: inherit; - - // Inherit cursor style (#5). - cursor: inherit; - - * { - // Inherit cursor style (#5). - cursor: inherit; - - // Allows dynamic coloring of the icons. - color: inherit; - - // Needed by FF. - fill: currentColor; - } -} diff --git a/theme/components/inputtext.css b/theme/components/inputtext.css new file mode 100644 index 00000000..b4ad3787 --- /dev/null +++ b/theme/components/inputtext.css @@ -0,0 +1,4 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ diff --git a/theme/components/label.css b/theme/components/label.css new file mode 100644 index 00000000..05e8e77d --- /dev/null +++ b/theme/components/label.css @@ -0,0 +1,12 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +.ck-label { + display: block; +} + +.cke-voice-label { + display: none; +} diff --git a/theme/components/label.scss b/theme/components/label.scss deleted file mode 100644 index e0811fda..00000000 --- a/theme/components/label.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-label { - display: block; -} - -.cke-voice-label { - display: none; -} diff --git a/theme/components/list.css b/theme/components/list.css new file mode 100644 index 00000000..b99c53ca --- /dev/null +++ b/theme/components/list.css @@ -0,0 +1,23 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../helpers/states.css"; +@import "../helpers/zindex.css"; + +.ck-list { + @mixin ck-unselectable; + + /* Crop the the items when the list has huge border-radius. */ + overflow: hidden; +} + +.ck-list__item { + display: block; + + &:focus { + position: relative; + z-index: var(--ck-z-default); + } +} diff --git a/theme/components/list.scss b/theme/components/list.scss deleted file mode 100644 index 24f68441..00000000 --- a/theme/components/list.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-list { - @include ck-unselectable(); - - &__item { - display: block; - } -} diff --git a/theme/components/panel/balloonpanel.css b/theme/components/panel/balloonpanel.css new file mode 100644 index 00000000..688b17f1 --- /dev/null +++ b/theme/components/panel/balloonpanel.css @@ -0,0 +1,53 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../../helpers/zindex.css"; + +.ck-balloon-panel { + display: none; + position: absolute; + + z-index: var(--ck-z-modal); + + &.ck-balloon-panel_with-arrow { + &:before, + &:after { + content: ""; + position: absolute; + } + + &:before { + z-index: var(--ck-z-default); + } + + &:after { + z-index: calc(var(--ck-z-default) + 1 ); + } + } + + &[class*="arrow_n"] { + &:before { + z-index: var(--ck-z-default); + } + + &:after { + z-index: calc(var(--ck-z-default) + 1); + } + } + + &[class*="arrow_s"] { + &:before { + z-index: var(--ck-z-default); + } + + &:after { + z-index: calc(var(--ck-z-default) + 1); + } + } +} + +.ck-balloon-panel_visible { + display: block; +} diff --git a/theme/components/panel/balloonpanel.scss b/theme/components/panel/balloonpanel.scss deleted file mode 100644 index f3d4f622..00000000 --- a/theme/components/panel/balloonpanel.scss +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-balloon-panel { - display: none; - position: absolute; - - z-index: ck-z( 'modal' ); - - &.ck-balloon-panel_with-arrow { - &:before, - &:after { - content: ""; - position: absolute; - } - - &:before { - z-index: ck-z(); - } - - &:after { - z-index: ck-z( 'default', 1 ); - } - } - - &.ck-balloon-panel_arrow { - &_n, - &_ne, - &_nw { - &:before { - z-index: ck-z( 'default' ); - } - - &:after { - z-index: ck-z( 'default', 1 ); - } - } - - &_s, - &_se, - &_sw { - &:before { - z-index: ck-z( 'default' ); - } - - &:after { - z-index: ck-z( 'default', 1 ); - } - } - } - - &_visible { - display: block; - } -} diff --git a/theme/components/panel/stickypanel.css b/theme/components/panel/stickypanel.css new file mode 100644 index 00000000..749eccba --- /dev/null +++ b/theme/components/panel/stickypanel.css @@ -0,0 +1,21 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../../helpers/zindex.css"; + +.ck-editor { + & .ck-sticky-panel { + & .ck-sticky-panel__content_sticky { + z-index: var(--ck-z-modal); /*#315*/ + position: fixed; + top: 0; + } + + & .ck-sticky-panel__content_sticky_bottom-limit { + top: auto; + position: absolute; + } + } +} diff --git a/theme/components/panel/stickypanel.scss b/theme/components/panel/stickypanel.scss deleted file mode 100644 index f20f0d38..00000000 --- a/theme/components/panel/stickypanel.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -@include ck-editor { - .ck-sticky-panel { - .ck-sticky-panel__content_sticky { - z-index: ck-z( 'modal' ); // #315 - position: fixed; - top: 0; - - &_bottom-limit { - top: auto; - position: absolute; - } - } - } -} diff --git a/theme/components/reset.scss b/theme/components/reset.scss deleted file mode 100644 index 25f0a019..00000000 --- a/theme/components/reset.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -/** - * Resets an element, ignoring its children. - */ -.ck-reset { - // Do not include inheritable rules here. - box-sizing: border-box; - width: auto; - height: auto; - position: static; -} - -/** - * Resets an element AND its children. - */ -.ck-reset_all { - &, *, a, textarea { - // The following must be identical to .ck-reset. - @extend .ck-reset; - } -} diff --git a/theme/components/toolbar/toolbar.css b/theme/components/toolbar/toolbar.css new file mode 100644 index 00000000..4c53091f --- /dev/null +++ b/theme/components/toolbar/toolbar.css @@ -0,0 +1,19 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../../helpers/states.css"; + +.ck-toolbar { + @mixin ck-unselectable; +} + +.ck-toolbar__separator { + display: inline-block; +} + +.ck-toolbar__newline { + display: block; + clear: left; +} diff --git a/theme/components/toolbar/toolbar.scss b/theme/components/toolbar/toolbar.scss deleted file mode 100644 index f0eaa16e..00000000 --- a/theme/components/toolbar/toolbar.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -.ck-toolbar { - @include ck-unselectable(); - - &__separator { - display: inline-block; - } - - &__newline { - display: block; - clear: left; - } -} diff --git a/theme/components/tooltip.scss b/theme/components/tooltip.css similarity index 55% rename from theme/components/tooltip.scss rename to theme/components/tooltip.css index 8f1a1022..8de7a5ec 100644 --- a/theme/components/tooltip.scss +++ b/theme/components/tooltip.css @@ -1,12 +1,16 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "../helpers/zindex.css"; /** * Enables the tooltip, which is the tooltip is in DOM but * not yet displayed. */ -@mixin ck-tooltip_enabled { - .ck-tooltip { +@define-mixin ck-tooltip_enabled { + & .ck-tooltip { display: block; } } @@ -14,8 +18,8 @@ /** * Disables the tooltip making it disappear from DOM. */ -@mixin ck-tooltip_disabled { - .ck-tooltip { +@define-mixin ck-tooltip_disabled { + & .ck-tooltip { display: none; } } @@ -24,8 +28,8 @@ * Shows the tooltip, which is already in DOM. * Requires `ck-tooltip_enabled` first. */ -@mixin ck-tooltip_visible { - .ck-tooltip { +@define-mixin ck-tooltip_visible { + & .ck-tooltip { visibility: visible; opacity: 1; } @@ -35,20 +39,20 @@ .ck-tooltip__text::after { position: absolute; - // Without this, hovering the tooltip could keep it visible. + /*Without this, hovering the tooltip could keep it visible.*/ pointer-events: none; - // This is to get rid of flickering when transitioning opacity in Chrome. - // It's weird but it works. + /*This is to get rid of flickering when transitioning opacity in Chrome. + It's weird but it works.*/ -webkit-backface-visibility: hidden; } .ck-tooltip { - // Tooltip is hidden by default. + /*Tooltip is hidden by default.*/ visibility: hidden; opacity: 0; display: none; - z-index: ck-z( 'modal' ); + z-index: var(--ck-z-modal); } .ck-tooltip__text { diff --git a/theme/helpers/_editor.scss b/theme/helpers/_editor.scss deleted file mode 100644 index 85b33381..00000000 --- a/theme/helpers/_editor.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -/** - * Wraps (S)CSS into .ck-editor namespace. - */ -@mixin ck-editor { - .ck-editor { - @content; - } -} diff --git a/theme/helpers/_states.scss b/theme/helpers/_states.scss deleted file mode 100644 index 0ee19dfa..00000000 --- a/theme/helpers/_states.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -/** - * Makes element unselectable. - */ -@mixin ck-unselectable() { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -/** - * A class which hides an element in DOM. - */ -.ck-hidden { - // Override selector specificity. Otherwise, all elements with some display - // style defined will override this one, which is not a desired result. - display: none !important; -} diff --git a/theme/helpers/_zindex.scss b/theme/helpers/_zindex.scss deleted file mode 100644 index b4cbc686..00000000 --- a/theme/helpers/_zindex.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -$ck-def-z: ( - 'default': 1, - 'modal': 999 -); - -@function ck-z( $layer: 'default', $index: 0 ) { - @return map-get( $ck-def-z, $layer ) + $index; -} diff --git a/theme/helpers/states.css b/theme/helpers/states.css new file mode 100644 index 00000000..3e108922 --- /dev/null +++ b/theme/helpers/states.css @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * Makes element unselectable. + */ +@define-mixin ck-unselectable { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +/** + * A class which hides an element in DOM. + */ +.ck-hidden { + /* Override selector specificity. Otherwise, all elements with some display + style defined will override this one, which is not a desired result. */ + display: none !important; +} diff --git a/theme/helpers/zindex.css b/theme/helpers/zindex.css new file mode 100644 index 00000000..997bd418 --- /dev/null +++ b/theme/helpers/zindex.css @@ -0,0 +1,9 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +:root { + --ck-z-default: 1; + --ck-z-modal: 999; +} diff --git a/theme/reset.css b/theme/reset.css new file mode 100644 index 00000000..d002a7f9 --- /dev/null +++ b/theme/reset.css @@ -0,0 +1,15 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +.ck-reset, +.ck-reset_all, +.ck-reset_all *, +.ck-reset_all a, +.ck-reset_all textarea { + box-sizing: border-box; + width: auto; + height: auto; + position: static; +} diff --git a/theme/theme.scss b/theme/theme.scss deleted file mode 100644 index aee36297..00000000 --- a/theme/theme.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -@import 'helpers/states'; -@import 'helpers/zindex'; -@import 'helpers/editor'; - -@import 'components/reset'; -@import 'components/icon'; -@import 'components/tooltip'; -@import 'components/button'; -@import 'components/toolbar/toolbar'; -@import 'components/dropdown'; -@import 'components/list'; -@import 'components/label'; -@import 'components/editor'; -@import 'components/panel/balloonpanel'; -@import 'components/panel/stickypanel'; From 0445a2e894e0d0f5c171cc96d1fc8bfdc14afdd0 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 15 Nov 2017 15:56:24 +0100 Subject: [PATCH 2/8] TMP. --- src/tooltip/tooltipview.js | 2 +- src/view.js | 4 ++- theme/components/button.css | 4 +-- theme/components/dropdown.css | 2 -- theme/components/list.css | 3 +- theme/components/panel/balloonpanel.css | 2 -- theme/components/panel/stickypanel.css | 2 -- theme/components/toolbar/toolbar.css | 2 +- theme/components/tooltip/mixins/_tooltip.css | 34 +++++++++++++++++++ theme/components/{ => tooltip}/tooltip.css | 32 ----------------- .../states.css => globals/_hidden.css} | 9 ----- theme/{reset.css => globals/_reset.css} | 0 .../zindex.css => globals/_zindex.css} | 0 theme/mixins/_unselectable.css | 13 +++++++ 14 files changed, 55 insertions(+), 54 deletions(-) create mode 100644 theme/components/tooltip/mixins/_tooltip.css rename theme/components/{ => tooltip}/tooltip.css (55%) rename theme/{helpers/states.css => globals/_hidden.css} (70%) rename theme/{reset.css => globals/_reset.css} (100%) rename theme/{helpers/zindex.css => globals/_zindex.css} (100%) create mode 100644 theme/mixins/_unselectable.css diff --git a/src/tooltip/tooltipview.js b/src/tooltip/tooltipview.js index 1ecd1472..98d031b1 100644 --- a/src/tooltip/tooltipview.js +++ b/src/tooltip/tooltipview.js @@ -9,7 +9,7 @@ import View from '../view'; -import '../../theme/components/tooltip.css'; +import '../../theme/components/tooltip/tooltip.css'; /** * The tooltip view class. diff --git a/src/view.js b/src/view.js index a27353e4..3703365c 100644 --- a/src/view.js +++ b/src/view.js @@ -16,7 +16,9 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable'; -import '../theme/reset.css'; +import '../theme/globals/_reset.css'; +import '../theme/globals/_hidden.css'; +import '../theme/globals/_zindex.css'; /** * The basic view class, which represents an HTML element created out of a diff --git a/theme/components/button.css b/theme/components/button.css index d566a0b0..564da4e0 100644 --- a/theme/components/button.css +++ b/theme/components/button.css @@ -3,8 +3,8 @@ * For licensing, see LICENSE.md. */ -@import "../helpers/states.css"; -@import "./tooltip.css"; +@import "../mixins/_unselectable.css"; +@import "./tooltip/mixins/_tooltip.css"; .ck-button, a.ck-button { diff --git a/theme/components/dropdown.css b/theme/components/dropdown.css index 575ee397..be4c1b76 100644 --- a/theme/components/dropdown.css +++ b/theme/components/dropdown.css @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "../helpers/zindex.css"; - .ck-dropdown { display: inline-block; position: relative; diff --git a/theme/components/list.css b/theme/components/list.css index b99c53ca..e801c2a9 100644 --- a/theme/components/list.css +++ b/theme/components/list.css @@ -3,8 +3,7 @@ * For licensing, see LICENSE.md. */ -@import "../helpers/states.css"; -@import "../helpers/zindex.css"; +@import "../mixins/_unselectable.css"; .ck-list { @mixin ck-unselectable; diff --git a/theme/components/panel/balloonpanel.css b/theme/components/panel/balloonpanel.css index 688b17f1..f4a92b58 100644 --- a/theme/components/panel/balloonpanel.css +++ b/theme/components/panel/balloonpanel.css @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "../../helpers/zindex.css"; - .ck-balloon-panel { display: none; position: absolute; diff --git a/theme/components/panel/stickypanel.css b/theme/components/panel/stickypanel.css index 749eccba..97d4ea95 100644 --- a/theme/components/panel/stickypanel.css +++ b/theme/components/panel/stickypanel.css @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "../../helpers/zindex.css"; - .ck-editor { & .ck-sticky-panel { & .ck-sticky-panel__content_sticky { diff --git a/theme/components/toolbar/toolbar.css b/theme/components/toolbar/toolbar.css index 4c53091f..c780db36 100644 --- a/theme/components/toolbar/toolbar.css +++ b/theme/components/toolbar/toolbar.css @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md. */ -@import "../../helpers/states.css"; +@import "../../mixins/_unselectable.css"; .ck-toolbar { @mixin ck-unselectable; diff --git a/theme/components/tooltip/mixins/_tooltip.css b/theme/components/tooltip/mixins/_tooltip.css new file mode 100644 index 00000000..d1b4cb3f --- /dev/null +++ b/theme/components/tooltip/mixins/_tooltip.css @@ -0,0 +1,34 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * Enables the tooltip, which is the tooltip is in DOM but + * not yet displayed. + */ +@define-mixin ck-tooltip_enabled { + & .ck-tooltip { + display: block; + } +} + +/** + * Disables the tooltip making it disappear from DOM. + */ +@define-mixin ck-tooltip_disabled { + & .ck-tooltip { + display: none; + } +} + +/** + * Shows the tooltip, which is already in DOM. + * Requires `ck-tooltip_enabled` first. + */ +@define-mixin ck-tooltip_visible { + & .ck-tooltip { + visibility: visible; + opacity: 1; + } +} diff --git a/theme/components/tooltip.css b/theme/components/tooltip/tooltip.css similarity index 55% rename from theme/components/tooltip.css rename to theme/components/tooltip/tooltip.css index 8de7a5ec..5396472d 100644 --- a/theme/components/tooltip.css +++ b/theme/components/tooltip/tooltip.css @@ -3,38 +3,6 @@ * For licensing, see LICENSE.md. */ -@import "../helpers/zindex.css"; - -/** - * Enables the tooltip, which is the tooltip is in DOM but - * not yet displayed. - */ -@define-mixin ck-tooltip_enabled { - & .ck-tooltip { - display: block; - } -} - -/** - * Disables the tooltip making it disappear from DOM. - */ -@define-mixin ck-tooltip_disabled { - & .ck-tooltip { - display: none; - } -} - -/** - * Shows the tooltip, which is already in DOM. - * Requires `ck-tooltip_enabled` first. - */ -@define-mixin ck-tooltip_visible { - & .ck-tooltip { - visibility: visible; - opacity: 1; - } -} - .ck-tooltip, .ck-tooltip__text::after { position: absolute; diff --git a/theme/helpers/states.css b/theme/globals/_hidden.css similarity index 70% rename from theme/helpers/states.css rename to theme/globals/_hidden.css index 3e108922..b8d434e2 100644 --- a/theme/helpers/states.css +++ b/theme/globals/_hidden.css @@ -3,15 +3,6 @@ * For licensing, see LICENSE.md. */ -/** - * Makes element unselectable. - */ -@define-mixin ck-unselectable { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - /** * A class which hides an element in DOM. */ diff --git a/theme/reset.css b/theme/globals/_reset.css similarity index 100% rename from theme/reset.css rename to theme/globals/_reset.css diff --git a/theme/helpers/zindex.css b/theme/globals/_zindex.css similarity index 100% rename from theme/helpers/zindex.css rename to theme/globals/_zindex.css diff --git a/theme/mixins/_unselectable.css b/theme/mixins/_unselectable.css new file mode 100644 index 00000000..6a9c8bdd --- /dev/null +++ b/theme/mixins/_unselectable.css @@ -0,0 +1,13 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/** + * Makes element unselectable. + */ +@define-mixin ck-unselectable { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} From a6da9b0fe3ac098bb11f855c352bebea4beea88a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 16 Nov 2017 17:56:13 +0100 Subject: [PATCH 3/8] Simplified CSS loading in the View class. --- src/view.js | 4 +--- theme/globals/globals.css | 8 ++++++++ 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 theme/globals/globals.css diff --git a/src/view.js b/src/view.js index 3703365c..044e12ec 100644 --- a/src/view.js +++ b/src/view.js @@ -16,9 +16,7 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable'; -import '../theme/globals/_reset.css'; -import '../theme/globals/_hidden.css'; -import '../theme/globals/_zindex.css'; +import '../theme/globals/globals.css'; /** * The basic view class, which represents an HTML element created out of a diff --git a/theme/globals/globals.css b/theme/globals/globals.css new file mode 100644 index 00000000..4dd8ca2f --- /dev/null +++ b/theme/globals/globals.css @@ -0,0 +1,8 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +@import "./_hidden.css"; +@import "./_reset.css"; +@import "./_zindex.css"; From 0bdfd7d29ee7a03cf8eed08ecaf45c59ca85de66 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 29 Nov 2017 17:09:46 +0100 Subject: [PATCH 4/8] Code refactoring in various styles sheets. --- theme/components/panel/balloonpanel.css | 16 ++++++++-------- theme/components/panel/stickypanel.css | 2 +- theme/components/tooltip/tooltip.css | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/theme/components/panel/balloonpanel.css b/theme/components/panel/balloonpanel.css index f4a92b58..c10bd2c7 100644 --- a/theme/components/panel/balloonpanel.css +++ b/theme/components/panel/balloonpanel.css @@ -10,37 +10,37 @@ z-index: var(--ck-z-modal); &.ck-balloon-panel_with-arrow { - &:before, - &:after { + &::before, + &::after { content: ""; position: absolute; } - &:before { + &::before { z-index: var(--ck-z-default); } - &:after { + &::after { z-index: calc(var(--ck-z-default) + 1 ); } } &[class*="arrow_n"] { - &:before { + &::before { z-index: var(--ck-z-default); } - &:after { + &::after { z-index: calc(var(--ck-z-default) + 1); } } &[class*="arrow_s"] { - &:before { + &::before { z-index: var(--ck-z-default); } - &:after { + &::after { z-index: calc(var(--ck-z-default) + 1); } } diff --git a/theme/components/panel/stickypanel.css b/theme/components/panel/stickypanel.css index 97d4ea95..0ce07c52 100644 --- a/theme/components/panel/stickypanel.css +++ b/theme/components/panel/stickypanel.css @@ -6,7 +6,7 @@ .ck-editor { & .ck-sticky-panel { & .ck-sticky-panel__content_sticky { - z-index: var(--ck-z-modal); /*#315*/ + z-index: var(--ck-z-modal); /* #315 */ position: fixed; top: 0; } diff --git a/theme/components/tooltip/tooltip.css b/theme/components/tooltip/tooltip.css index 5396472d..655a7d4d 100644 --- a/theme/components/tooltip/tooltip.css +++ b/theme/components/tooltip/tooltip.css @@ -7,16 +7,16 @@ .ck-tooltip__text::after { position: absolute; - /*Without this, hovering the tooltip could keep it visible.*/ + /* Without this, hovering the tooltip could keep it visible. */ pointer-events: none; - /*This is to get rid of flickering when transitioning opacity in Chrome. - It's weird but it works.*/ + /* This is to get rid of flickering when transitioning opacity in Chrome. + It's weird but it works. */ -webkit-backface-visibility: hidden; } .ck-tooltip { - /*Tooltip is hidden by default.*/ + /* Tooltip is hidden by default. */ visibility: hidden; opacity: 0; display: none; From 328062125b27c49b13bb7211d4a082e76a1202ae Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 29 Nov 2017 17:10:59 +0100 Subject: [PATCH 5/8] Simplified tooltip styles sheet. --- theme/components/tooltip/tooltip.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/theme/components/tooltip/tooltip.css b/theme/components/tooltip/tooltip.css index 655a7d4d..7a7a0b47 100644 --- a/theme/components/tooltip/tooltip.css +++ b/theme/components/tooltip/tooltip.css @@ -25,10 +25,11 @@ .ck-tooltip__text { display: inline-block; -} -.ck-tooltip__text::after { - content: ""; - width: 0; - height: 0; + &::after { + content: ""; + width: 0; + height: 0; + } } + From b32699d58ab979617dca1b833943987cc6c4464f Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 29 Nov 2017 17:11:36 +0100 Subject: [PATCH 6/8] Simplified reset by removing rules for 'a' and 'textarea'. --- theme/globals/_reset.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/theme/globals/_reset.css b/theme/globals/_reset.css index d002a7f9..c32fbb44 100644 --- a/theme/globals/_reset.css +++ b/theme/globals/_reset.css @@ -5,9 +5,7 @@ .ck-reset, .ck-reset_all, -.ck-reset_all *, -.ck-reset_all a, -.ck-reset_all textarea { +.ck-reset_all * { box-sizing: border-box; width: auto; height: auto; From c10bded4bcd1751116bc0566bf360fa237f05102 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 29 Nov 2017 17:12:10 +0100 Subject: [PATCH 7/8] Added missing default property in the ck-unselectable mixin. --- theme/mixins/_unselectable.css | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/mixins/_unselectable.css b/theme/mixins/_unselectable.css index 6a9c8bdd..48227560 100644 --- a/theme/mixins/_unselectable.css +++ b/theme/mixins/_unselectable.css @@ -10,4 +10,5 @@ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; + user-select: none } From 874009b4d143a01f8c104b1e89cc454ea21ddbe1 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 30 Nov 2017 11:24:37 +0100 Subject: [PATCH 8/8] Moved component styles to own directories to avoid such migration in the future. --- src/button/buttonview.js | 2 +- src/dropdown/dropdownview.js | 2 +- src/editorui/editoruiview.js | 2 +- src/icon/iconview.js | 2 +- src/inputtext/inputtextview.js | 2 +- src/label/labelview.js | 2 +- src/list/listview.js | 2 +- theme/components/{ => button}/button.css | 4 ++-- theme/components/{ => dropdown}/dropdown.css | 0 theme/components/editorui.css | 4 ---- theme/components/editorui/editorui.css | 10 ++++++++++ theme/components/{ => icon}/icon.css | 0 theme/components/inputtext.css | 4 ---- theme/components/inputtext/inputtext.css | 10 ++++++++++ theme/components/{ => label}/label.css | 0 theme/components/{ => list}/list.css | 2 +- 16 files changed, 30 insertions(+), 18 deletions(-) rename theme/components/{ => button}/button.css (87%) rename theme/components/{ => dropdown}/dropdown.css (100%) delete mode 100644 theme/components/editorui.css create mode 100644 theme/components/editorui/editorui.css rename theme/components/{ => icon}/icon.css (100%) delete mode 100644 theme/components/inputtext.css create mode 100644 theme/components/inputtext/inputtext.css rename theme/components/{ => label}/label.css (100%) rename theme/components/{ => list}/list.css (89%) diff --git a/src/button/buttonview.js b/src/button/buttonview.js index 89fba155..1d532025 100644 --- a/src/button/buttonview.js +++ b/src/button/buttonview.js @@ -13,7 +13,7 @@ import TooltipView from '../tooltip/tooltipview'; import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard'; -import '../../theme/components/button.css'; +import '../../theme/components/button/button.css'; /** * The button view class. diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js index ac1356b4..04840c28 100644 --- a/src/dropdown/dropdownview.js +++ b/src/dropdown/dropdownview.js @@ -11,7 +11,7 @@ import View from '../view'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; -import '../../theme/components/dropdown.css'; +import '../../theme/components/dropdown/dropdown.css'; /** * The dropdown view class. diff --git a/src/editorui/editoruiview.js b/src/editorui/editoruiview.js index b5ea2256..dc087de8 100644 --- a/src/editorui/editoruiview.js +++ b/src/editorui/editoruiview.js @@ -12,7 +12,7 @@ import View from '../view'; import Template from '../template'; -import '../../theme/components/editorui.css'; +import '../../theme/components/editorui/editorui.css'; /** * The editor UI view class. Base class for the editor main views. diff --git a/src/icon/iconview.js b/src/icon/iconview.js index ab6681ba..4e8aea85 100644 --- a/src/icon/iconview.js +++ b/src/icon/iconview.js @@ -11,7 +11,7 @@ import View from '../view'; -import '../../theme/components/icon.css'; +import '../../theme/components/icon/icon.css'; /** * The icon view class. diff --git a/src/inputtext/inputtextview.js b/src/inputtext/inputtextview.js index f169accf..bafa39e4 100644 --- a/src/inputtext/inputtextview.js +++ b/src/inputtext/inputtextview.js @@ -9,7 +9,7 @@ import View from '../view'; -import '../../theme/components/inputtext.css'; +import '../../theme/components/inputtext/inputtext.css'; /** * The text input view class. diff --git a/src/label/labelview.js b/src/label/labelview.js index 6982e893..7fc95297 100644 --- a/src/label/labelview.js +++ b/src/label/labelview.js @@ -9,7 +9,7 @@ import View from '../view'; -import '../../theme/components/label.css'; +import '../../theme/components/label/label.css'; /** * The label view class. diff --git a/src/list/listview.js b/src/list/listview.js index 13830986..4ded8185 100644 --- a/src/list/listview.js +++ b/src/list/listview.js @@ -12,7 +12,7 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '../focuscycler'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; -import '../../theme/components/list.css'; +import '../../theme/components/list/list.css'; /** * The list view class. diff --git a/theme/components/button.css b/theme/components/button/button.css similarity index 87% rename from theme/components/button.css rename to theme/components/button/button.css index 564da4e0..383da6c1 100644 --- a/theme/components/button.css +++ b/theme/components/button/button.css @@ -3,8 +3,8 @@ * For licensing, see LICENSE.md. */ -@import "../mixins/_unselectable.css"; -@import "./tooltip/mixins/_tooltip.css"; +@import "../../mixins/_unselectable.css"; +@import "../tooltip/mixins/_tooltip.css"; .ck-button, a.ck-button { diff --git a/theme/components/dropdown.css b/theme/components/dropdown/dropdown.css similarity index 100% rename from theme/components/dropdown.css rename to theme/components/dropdown/dropdown.css diff --git a/theme/components/editorui.css b/theme/components/editorui.css deleted file mode 100644 index b4ad3787..00000000 --- a/theme/components/editorui.css +++ /dev/null @@ -1,4 +0,0 @@ -/* - * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ diff --git a/theme/components/editorui/editorui.css b/theme/components/editorui/editorui.css new file mode 100644 index 00000000..3ebbb9b1 --- /dev/null +++ b/theme/components/editorui/editorui.css @@ -0,0 +1,10 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* + * Note: This file should contain the wireframe styles only. But since there are no such styles, + * it acts as a message to the builder telling that it should look for the corresponding styles + * **in the theme** when compiling the editor. + */ diff --git a/theme/components/icon.css b/theme/components/icon/icon.css similarity index 100% rename from theme/components/icon.css rename to theme/components/icon/icon.css diff --git a/theme/components/inputtext.css b/theme/components/inputtext.css deleted file mode 100644 index b4ad3787..00000000 --- a/theme/components/inputtext.css +++ /dev/null @@ -1,4 +0,0 @@ -/* - * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ diff --git a/theme/components/inputtext/inputtext.css b/theme/components/inputtext/inputtext.css new file mode 100644 index 00000000..3ebbb9b1 --- /dev/null +++ b/theme/components/inputtext/inputtext.css @@ -0,0 +1,10 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* + * Note: This file should contain the wireframe styles only. But since there are no such styles, + * it acts as a message to the builder telling that it should look for the corresponding styles + * **in the theme** when compiling the editor. + */ diff --git a/theme/components/label.css b/theme/components/label/label.css similarity index 100% rename from theme/components/label.css rename to theme/components/label/label.css diff --git a/theme/components/list.css b/theme/components/list/list.css similarity index 89% rename from theme/components/list.css rename to theme/components/list/list.css index e801c2a9..7862f162 100644 --- a/theme/components/list.css +++ b/theme/components/list/list.css @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md. */ -@import "../mixins/_unselectable.css"; +@import "../../mixins/_unselectable.css"; .ck-list { @mixin ck-unselectable;