Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

I/6106: Added styles for the color input #266

Merged
merged 13 commits into from
Feb 13, 2020
Merged

I/6106: Added styles for the color input #266

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
862b196
Add styles for ColorInputView
panr Feb 10, 2020
b488ba3
Merge branch 'master' into i/6106
oleq Feb 10, 2020
e28af38
Code refactoring.
oleq Feb 10, 2020
7b760f7
Move colorinputview.css from ui to table theme
panr Feb 11, 2020
c69bf14
Increased colorinput's dropdown selector specificity to avoid style c…
oleq Feb 11, 2020
85517ab
Code refactoring: renamed CSS file.
oleq Feb 11, 2020
fe19b04
Adjusted styles. Code refactoring in styles.
oleq Feb 12, 2020
89cdf56
Code refactoring.
oleq Feb 12, 2020
b975fdc
Add no-color preview styling
panr Feb 12, 2020
f72338b
Rename css classes for color input
panr Feb 12, 2020
0fb6678
Extracted no color indicator styles to ckeditor5-table.
oleq Feb 12, 2020
014137c
Subtle style adjustments to the 'Remove color' button.
oleq Feb 12, 2020
2d2403a
Code refactoring in table class naming.
oleq Feb 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions theme/ckeditor5-table/colorinput.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

@import "../mixins/_rounded.css";

.ck.ck-input-color {
& > .ck.ck-input-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

& > .ck.ck-dropdown {
& > .ck.ck-input-color__button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
padding: 0;

&.ck-disabled {
background: var(--ck-color-input-disabled-background);
}

& > .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);
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;
border-radius: 2px;
transform: rotate(45deg);
transform-origin: 50%;
}
}
}
}

& .ck.ck-input-color__remove-color {
width: 100%;
border-bottom: 1px solid var(--ck-color-input-border);
}
}
20 changes: 1 addition & 19 deletions theme/ckeditor5-table/tablecellproperties.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,15 @@
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 {
& .ck.ck-toolbar {
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);
}
}
}
}
42 changes: 31 additions & 11 deletions theme/ckeditor5-table/tableform.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand Down
17 changes: 0 additions & 17 deletions theme/ckeditor5-table/tableproperties.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
6 changes: 6 additions & 0 deletions theme/ckeditor5-ui/components/labeledview/labeledview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}