From 862b196a5d5a14617f320a5c26137d87f2e734a3 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 10 Feb 2020 14:20:25 +0100 Subject: [PATCH 01/12] Add styles for ColorInputView --- .../colorinputview/colorinputview.css | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 theme/ckeditor5-ui/components/colorinputview/colorinputview.css diff --git a/theme/ckeditor5-ui/components/colorinputview/colorinputview.css b/theme/ckeditor5-ui/components/colorinputview/colorinputview.css new file mode 100644 index 0000000..019cf1d --- /dev/null +++ b/theme/ckeditor5-ui/components/colorinputview/colorinputview.css @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/* + * 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. + */ + +@import "../../../mixins/_rounded.css"; + +.ck.ck-table-form .ck-table-form__border-row { + & > .ck-input-color-picker { + & > .ck.ck-dropdown__color-picker { + display: flex; + align-items: center; + flex-direction: row; + min-width: 100%; + + & > .ck.ck-input-text { + min-width: auto; + flex-grow: 1; + } + + & > .ck.ck-dropdown { + min-width: auto; + } + + & .ck-input-text { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:active, + &:focus { + z-index: 1; + } + } + + & .ck.ck-dropdown__color-picker-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; + + &.ck-disabled { + background: var(--ck-color-input-disabled-background); + } + } + + & .ck.ck-dropdown__color-picker-preview { + width: 20px; + height: 20px; + border: 1px solid var(--ck-color-input-border); + + @mixin ck-rounded-corners; + } + + & .ck.ck-dropdown__color-picker-remove-color { + width: 100%; + border-bottom: 1px solid var(--ck-color-input-border); + } + } + } +} From e28af38a1ddf0247d737161c0bd7df82171af8d8 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 10 Feb 2020 16:36:48 +0100 Subject: [PATCH 02/12] Code refactoring. --- .../colorinputview/colorinputview.css | 66 ++++++------------- 1 file changed, 20 insertions(+), 46 deletions(-) diff --git a/theme/ckeditor5-ui/components/colorinputview/colorinputview.css b/theme/ckeditor5-ui/components/colorinputview/colorinputview.css index 019cf1d..3ddeef2 100644 --- a/theme/ckeditor5-ui/components/colorinputview/colorinputview.css +++ b/theme/ckeditor5-ui/components/colorinputview/colorinputview.css @@ -3,63 +3,37 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* - * 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. - */ - @import "../../../mixins/_rounded.css"; -.ck.ck-table-form .ck-table-form__border-row { - & > .ck-input-color-picker { - & > .ck.ck-dropdown__color-picker { - display: flex; - align-items: center; - flex-direction: row; - min-width: 100%; - - & > .ck.ck-input-text { - min-width: auto; - flex-grow: 1; - } - - & > .ck.ck-dropdown { - min-width: auto; - } +.ck.ck-input-color-picker { + & > .ck.ck-input-text { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - & .ck-input-text { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + & .ck.ck-dropdown { + & > .ck.ck-dropdown__color-picker-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; + padding: 0; - &:active, - &:focus { - z-index: 1; - } + &.ck-disabled { + background: var(--ck-color-input-disabled-background); } - & .ck.ck-dropdown__color-picker-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - margin-left: -1px; - - &.ck-disabled { - background: var(--ck-color-input-disabled-background); - } - } + & > .ck.ck-dropdown__color-picker-preview { + @mixin ck-rounded-corners; - & .ck.ck-dropdown__color-picker-preview { width: 20px; height: 20px; border: 1px solid var(--ck-color-input-border); - - @mixin ck-rounded-corners; - } - - & .ck.ck-dropdown__color-picker-remove-color { - width: 100%; - border-bottom: 1px solid var(--ck-color-input-border); } } } + + & .ck.ck-dropdown__color-picker-remove-color { + width: 100%; + border-bottom: 1px solid var(--ck-color-input-border); + } } From 7b760f7a3e3cb660541af467b4ad0a4d6265d9a1 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 11 Feb 2020 10:58:59 +0100 Subject: [PATCH 03/12] Move colorinputview.css from ui to table theme --- .../colorinputview => ckeditor5-table}/colorinputview.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename theme/{ckeditor5-ui/components/colorinputview => ckeditor5-table}/colorinputview.css (95%) diff --git a/theme/ckeditor5-ui/components/colorinputview/colorinputview.css b/theme/ckeditor5-table/colorinputview.css similarity index 95% rename from theme/ckeditor5-ui/components/colorinputview/colorinputview.css rename to theme/ckeditor5-table/colorinputview.css index 3ddeef2..5d48371 100644 --- a/theme/ckeditor5-ui/components/colorinputview/colorinputview.css +++ b/theme/ckeditor5-table/colorinputview.css @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -@import "../../../mixins/_rounded.css"; +@import "../mixins/_rounded.css"; .ck.ck-input-color-picker { & > .ck.ck-input-text { From c69bf1496e87511bda026b749d2c013c1137da9f Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 11 Feb 2020 14:58:33 +0100 Subject: [PATCH 04/12] Increased colorinput's dropdown selector specificity to avoid style conflicts. --- theme/ckeditor5-table/colorinputview.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-table/colorinputview.css b/theme/ckeditor5-table/colorinputview.css index 5d48371..c3d45c6 100644 --- a/theme/ckeditor5-table/colorinputview.css +++ b/theme/ckeditor5-table/colorinputview.css @@ -11,7 +11,7 @@ border-bottom-right-radius: 0; } - & .ck.ck-dropdown { + & > .ck.ck-dropdown { & > .ck.ck-dropdown__color-picker-button { border-top-left-radius: 0; border-bottom-left-radius: 0; From 85517ab3d889e4d59b82788c55c29fc54b0ecf74 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 11 Feb 2020 17:39:10 +0100 Subject: [PATCH 05/12] Code refactoring: renamed CSS file. --- theme/ckeditor5-table/{colorinputview.css => colorinput.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename theme/ckeditor5-table/{colorinputview.css => colorinput.css} (100%) diff --git a/theme/ckeditor5-table/colorinputview.css b/theme/ckeditor5-table/colorinput.css similarity index 100% rename from theme/ckeditor5-table/colorinputview.css rename to theme/ckeditor5-table/colorinput.css From fe19b04463469be3e9a603a0794055d22ae60730 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 11:10:09 +0100 Subject: [PATCH 06/12] Adjusted styles. Code refactoring in styles. --- theme/ckeditor5-table/tablecellproperties.css | 20 +-------- theme/ckeditor5-table/tableform.css | 42 ++++++++++++++----- theme/ckeditor5-table/tableproperties.css | 17 -------- .../components/labeledview/labeledview.css | 6 +++ 4 files changed, 38 insertions(+), 47 deletions(-) diff --git a/theme/ckeditor5-table/tablecellproperties.css b/theme/ckeditor5-table/tablecellproperties.css index 08a8f9e..27bc2ff 100644 --- a/theme/ckeditor5-table/tablecellproperties.css +++ b/theme/ckeditor5-table/tablecellproperties.css @@ -7,9 +7,9 @@ width: 320px; & .ck-form__row { - &.ck-table-cell-properties-form__dimensions-row, &.ck-table-cell-properties-form__padding-row { padding: 0; + width: 35%; } &.ck-table-cell-properties-form__alignment-row { @@ -17,23 +17,5 @@ background: none; } } - - & .ck-table-cell-properties-form__padding-row { - width: 35%; - } - - &.ck-table-cell-properties-form__dimensions-row { - & .ck-labeled-view > .ck-label { - font-size: 10px; - } - - & .ck-table-cell-properties-form__width { - margin-right: var(--ck-spacing-small); - } - - & .ck-table-cell-properties-form__height { - margin-left: var(--ck-spacing-small); - } - } } } diff --git a/theme/ckeditor5-table/tableform.css b/theme/ckeditor5-table/tableform.css index 58efe24..b1c69de 100644 --- a/theme/ckeditor5-table/tableform.css +++ b/theme/ckeditor5-table/tableform.css @@ -11,21 +11,41 @@ } .ck.ck-table-form { - & .ck-table-form__border-row { - & .ck-labeled-view { - & > .ck-label { - font-size: var(--ck-font-size-tiny); + & .ck-form__row { + &.ck-table-form__border-row { + & .ck-labeled-view { + & > .ck-label { + font-size: var(--ck-font-size-tiny); + text-align: center; + } + } + + & .ck-table-form__border-style { + width: 80px; + min-width: 80px; } - } - & .ck-table-form__border-style { - width: 80px; - min-width: 80px; + & .ck-table-form__border-width { + width: 50px; + min-width: 50px; + } } - & .ck-table-form__border-width { - width: 80px; - min-width: 80px; + &.ck-table-properties-form__dimensions-row { + padding: 0; + + & .ck-labeled-view > .ck-label { + font-size: 10px; + text-align: center; + } + + & .ck-table-properties-form__width { + margin-right: var(--ck-spacing-small); + } + + & .ck-table-properties-form__height { + margin-left: var(--ck-spacing-small); + } } } diff --git a/theme/ckeditor5-table/tableproperties.css b/theme/ckeditor5-table/tableproperties.css index 320e68b..1cc01b3 100644 --- a/theme/ckeditor5-table/tableproperties.css +++ b/theme/ckeditor5-table/tableproperties.css @@ -7,26 +7,9 @@ width: 320px; & .ck-form__row { - &.ck-table-properties-form__dimensions-row, &.ck-table-properties-form__alignment-row { padding: 0; - } - - &.ck-table-properties-form__dimensions-row { - & .ck-labeled-view > .ck-label { - font-size: 10px; - } - - & .ck-table-properties-form__width { - margin-right: var(--ck-spacing-small); - } - & .ck-table-properties-form__height { - margin-left: var(--ck-spacing-small); - } - } - - &.ck-table-properties-form__alignment-row { & .ck.ck-toolbar { background: none; diff --git a/theme/ckeditor5-ui/components/labeledview/labeledview.css b/theme/ckeditor5-ui/components/labeledview/labeledview.css index 715a8c4..c48e06b 100644 --- a/theme/ckeditor5-ui/components/labeledview/labeledview.css +++ b/theme/ckeditor5-ui/components/labeledview/labeledview.css @@ -15,3 +15,9 @@ .ck.ck-labeled-view .ck-labeled-view__status_error { color: var(--ck-color-base-error); } + +.ck.ck-labeled-view > .ck.ck-label { + width: 100%; + text-overflow: ellipsis; + overflow: hidden; +} From 89cdf566dfebc816c4515b05c3dc77045d869099 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 13:46:36 +0100 Subject: [PATCH 07/12] Code refactoring. --- theme/ckeditor5-table/colorinput.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index c3d45c6..a8e707b 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -5,7 +5,7 @@ @import "../mixins/_rounded.css"; -.ck.ck-input-color-picker { +.ck.ck-input-color { & > .ck.ck-input-text { border-top-right-radius: 0; border-bottom-right-radius: 0; From b975fdc8cf6e881ef2f87d0a9bb8ff2c8cd0c9ea Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 12 Feb 2020 13:46:29 +0100 Subject: [PATCH 08/12] Add no-color preview styling --- theme/ckeditor5-table/colorinput.css | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index a8e707b..5f4692e 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -23,11 +23,32 @@ } & > .ck.ck-dropdown__color-picker-preview { + /* + To make sure that `color-picker-preview--no-color` positions properly, + we have to display `color-picker-preview` always as a square shape. + */ + --previewSize: 20px; + @mixin ck-rounded-corners; - width: 20px; - height: 20px; + position: relative; + width: var(--previewSize); + height: var(--previewSize); border: 1px solid var(--ck-color-input-border); + overflow: hidden; + + & > .ck.ck-dropdown__color-picker-preview--no-color { + position: absolute; + top: -30%; + left: 50%; + display: block; + height: 150%; + width: 8%; + background: red; + border-radius: 2px; + transform: rotate(45deg); + transform-origin: 50%; + } } } } From f72338bc287a8142b0f0f0ffd61b413721c15f29 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 12 Feb 2020 14:24:03 +0100 Subject: [PATCH 09/12] Rename css classes for color input --- theme/ckeditor5-table/colorinput.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index 5f4692e..f603226 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -12,7 +12,7 @@ } & > .ck.ck-dropdown { - & > .ck.ck-dropdown__color-picker-button { + & > .ck.ck-input-color__button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; @@ -22,7 +22,7 @@ background: var(--ck-color-input-disabled-background); } - & > .ck.ck-dropdown__color-picker-preview { + & > .ck.ck-input-color__button__preview { /* To make sure that `color-picker-preview--no-color` positions properly, we have to display `color-picker-preview` always as a square shape. @@ -37,7 +37,7 @@ border: 1px solid var(--ck-color-input-border); overflow: hidden; - & > .ck.ck-dropdown__color-picker-preview--no-color { + & > .ck.ck-input-color__button__preview__no-color-indicator { position: absolute; top: -30%; left: 50%; @@ -53,7 +53,7 @@ } } - & .ck.ck-dropdown__color-picker-remove-color { + & .ck.ck-input-color__remove-color { width: 100%; border-bottom: 1px solid var(--ck-color-input-border); } From 0fb6678c9542dd9ad8d467b217d62cf05894930e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 16:11:06 +0100 Subject: [PATCH 10/12] Extracted no color indicator styles to ckeditor5-table. --- theme/ckeditor5-table/colorinput.css | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index f603226..50621a7 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -23,25 +23,15 @@ } & > .ck.ck-input-color__button__preview { - /* - To make sure that `color-picker-preview--no-color` positions properly, - we have to display `color-picker-preview` always as a square shape. - */ - --previewSize: 20px; - @mixin ck-rounded-corners; - position: relative; - width: var(--previewSize); - height: var(--previewSize); + width: 20px; + height: 20px; border: 1px solid var(--ck-color-input-border); - overflow: hidden; & > .ck.ck-input-color__button__preview__no-color-indicator { - position: absolute; top: -30%; left: 50%; - display: block; height: 150%; width: 8%; background: red; From 014137c8589b8aacb1178f1960aabcf85179f976 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 16:13:06 +0100 Subject: [PATCH 11/12] Subtle style adjustments to the 'Remove color' button. --- theme/ckeditor5-table/colorinput.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index 50621a7..629f10f 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -46,5 +46,10 @@ & .ck.ck-input-color__remove-color { width: 100%; border-bottom: 1px solid var(--ck-color-input-border); + padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); + + & .ck.ck-icon { + margin-right: var(--ck-spacing-standard); + } } } From 2d2403ab4b26f679f74b350545e20b8c23adc752 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 16:50:49 +0100 Subject: [PATCH 12/12] Code refactoring in table class naming. --- theme/ckeditor5-table/tableform.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/theme/ckeditor5-table/tableform.css b/theme/ckeditor5-table/tableform.css index b1c69de..5f6c4cc 100644 --- a/theme/ckeditor5-table/tableform.css +++ b/theme/ckeditor5-table/tableform.css @@ -31,7 +31,7 @@ } } - &.ck-table-properties-form__dimensions-row { + &.ck-table-form__dimensions-row { padding: 0; & .ck-labeled-view > .ck-label { @@ -39,22 +39,22 @@ text-align: center; } - & .ck-table-properties-form__width { + & .ck-table-form__dimensions-row__width { margin-right: var(--ck-spacing-small); } - & .ck-table-properties-form__height { + & .ck-table-form__dimensions-row__height { margin-left: var(--ck-spacing-small); } - } - } - & .ck-table-form__dimension-operator { - margin: 0; - align-self: start; - display: inline-block; - height: var(--ck-ui-component-min-height); - line-height: var(--ck-ui-component-min-height); + & .ck-table-form__dimension-operator { + margin: 0; + align-self: start; + display: inline-block; + height: var(--ck-ui-component-min-height); + line-height: var(--ck-ui-component-min-height); + } + } } & .ck.ck-labeled-view {