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

Commit

Permalink
Merge pull request #114 from ckeditor/t/ckeditor5-ui/144
Browse files Browse the repository at this point in the history
Other: Migrated the theme from SASS to PostCSS (see ckeditor/ckeditor5-ui#144).

BREAKING CHANGE: The styles are no longer developed in SASS which means various `.scss` files (including variables, mixins, etc.) became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
  • Loading branch information
oleq authored Nov 30, 2017
2 parents 1b88ad0 + 7594cd2 commit efc6004
Show file tree
Hide file tree
Showing 66 changed files with 1,671 additions and 1,205 deletions.
123 changes: 123 additions & 0 deletions docs/_snippets/examples/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/*
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

:root {
/* Overrides the border-radius setting in the theme. */
--ck-border-radius: 4px;

/* Overrides the default font size in the theme. */
--ck-font-size-base: 14px;

/* Helper variables to avoid duplication in the colors. */
--ck-custom-background: #4A494B;
--ck-custom-foreground: #3a393d;
--ck-custom-border: #383738;
--ck-custom-white: #fff;

/* -- Overrides generic colors -------------------------------------------------------------- */

--ck-color-focus-border: #48a3f5;
--ck-color-text: #fafafa;
--ck-color-shadow-drop: rgba( 0, 0, 0, .2 );
--ck-color-shadow-inner: rgba( 0, 0, 0, .1 );

/* -- Overrides the default .ck-button class colors ----------------------------------------- */

--ck-color-button-default-background: var(--ck-custom-background);
--ck-color-button-default-border: var(--ck-custom-border);
--ck-color-button-default-focus-background: #434244;
--ck-color-button-default-focus-border: #323232;
--ck-color-button-default-active-background: #3f3e40;
--ck-color-button-default-active-border: #302f30;
--ck-color-button-default-active-shadow: #3b3a3c;
--ck-color-button-default-disabled-background: var(--ck-custom-background);
--ck-color-button-default-disabled-border: var(--ck-custom-border);

--ck-color-button-on-background: var(--ck-custom-foreground);
--ck-color-button-on-border: var(--ck-custom-border);
--ck-color-button-on-focus-background: #343337;
--ck-color-button-on-focus-border: #323232;
--ck-color-button-on-active-background: #313034;
--ck-color-button-on-active-border: #302f30;
--ck-color-button-on-active-shadow: #2e2e31;
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
--ck-color-button-on-disabled-border: var(--ck-custom-border);

--ck-color-button-action-background: #1ABC9C;
--ck-color-button-action-border: #49d2b7;
--ck-color-button-action-focus-background: #17a98c;
--ck-color-button-action-focus-border: #42bda5;
--ck-color-button-action-active-background: #16a085;
--ck-color-button-action-active-border: #3eb39c;
--ck-color-button-action-active-shadow: #15967d;
--ck-color-button-action-disabled-background: #1ABC9C;
--ck-color-button-action-disabled-border: #49d2b7;
--ck-color-button-action-text: var(--ck-custom-white);

/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */

--ck-color-dropdown-panel-background: var(--ck-custom-background);
--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
--ck-color-dropdown-symbol: #f1f1f1;

/* -- Overrides the default .ck-input class colors ------------------------------------------ */

--ck-color-input-background: var(--ck-custom-foreground);
--ck-color-input-border: #6b6970;
--ck-color-input-text: #fafafa;
--ck-color-input-disabled-background: #343337;
--ck-color-input-disabled-border: #605f65;
--ck-color-input-disabled-text: #757575;

/* -- Overrides the default .ck-list class colors ------------------------------------------- */

--ck-color-list-background: var(--ck-custom-background);
--ck-color-list-item-background-hover: var(--ck-custom-foreground);
--ck-color-list-item-background-active: #1A8BF1;
--ck-color-list-item-text-active: var(--ck-custom-white);

/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */

--ck-color-panel-background: var(--ck-custom-background);
--ck-color-panel-border: var(--ck-custom-border);

/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */

--ck-color-toolbar-background: var(--ck-custom-foreground);
--ck-color-toolbar-border: var(--ck-custom-border);

/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */

--ck-color-tooltip-background: #212025;
--ck-color-tooltip-text: #eee;

/* -- Overrides the default colors used by the editor --------------------------------------- */

--ck-color-editor-border: var(--ck-custom-background);
--ck-color-editor-toolbar-background: var(--ck-custom-background);

--ck-color-editor-toolbar-button-on-background: #3c3c3c;
--ck-color-editor-toolbar-button-on-border: transparent;
--ck-color-editor-toolbar-button-on-focus-background: #353535;
--ck-color-editor-toolbar-button-on-focus-border: transparent;
--ck-color-editor-toolbar-button-on-active-background: #272727;
--ck-color-editor-toolbar-button-on-active-border: transparent;
--ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
--ck-color-editor-toolbar-button-on-disabled-background: transparent;
--ck-color-editor-toolbar-button-on-disabled-border: transparent;

--ck-color-editor-dropdown-background: #535254;

/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */

--ck-color-image-caption-background: #f7f7f7;
--ck-color-image-caption-text: #333;

/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */

--ck-color-widget-border-blurred: #ddd;
--ck-color-widget-border-hover: #FFD25C;
--ck-color-widget-editable-focused-background: var(--ck-custom-white);
}
79 changes: 0 additions & 79 deletions docs/_snippets/examples/custom.scss

This file was deleted.

21 changes: 21 additions & 0 deletions docs/_snippets/examples/extras.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

/* Allow using Lark's ck-box-shadow() mixin. */
@import '@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css';

/* The shadow should be 10% brighter than the toolbar background. */
:root {
--ck-shadow-color: #646265;
}

.ck-editor-toolbar {
& .ck-button.ck-dropdown__button {
/* Apply a dedicated inner box-shadow to the dropdown button. */
@mixin ck-box-shadow
0 0 0 1px var(--ck-shadow-color) inset,
0 0 5px var(--ck-shadow-color) inset;
}
}
21 changes: 0 additions & 21 deletions docs/_snippets/examples/extras.scss

This file was deleted.

5 changes: 2 additions & 3 deletions docs/_snippets/examples/theme-lark.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@

/* globals console, window, document */

/* config { "sassImportPath": "./custom.scss" } */

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import './extras.scss';
import './custom.css';
import './extras.css';

ClassicEditor
.create( document.querySelector( '#snippet-classic-editor' ), {
Expand Down
Loading

0 comments on commit efc6004

Please sign in to comment.