Parcourir la source

Migrated UI components from SASS to PostCSS. Added theme support.

Aleksander Nowodzinski il y a 8 ans
Parent
commit
aba00821f6

+ 1 - 1
packages/ckeditor5-widget/src/widget.js

@@ -17,7 +17,7 @@ import RootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditabl
 import { isWidget, WIDGET_SELECTED_CLASS_NAME, getLabel } from './utils';
 import { keyCodes, getCode, parseKeystroke } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
-import '../theme/theme.scss';
+import '../theme/widget.css';
 
 const selectAllKeystrokeCode = parseKeystroke( 'Ctrl+A' );
 

+ 0 - 45
packages/ckeditor5-widget/theme/theme.scss

@@ -1,45 +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/colors';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/shadow';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/states';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/spacing';
-
-$widget-outline-thickness: 3px;
-
-@include ck-color-add( (
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $ck-color-background,
-) );
-
-.ck-widget {
-	margin: ck-spacing() 0;
-	padding: 0;
-
-	&.ck-widget_selected, &.ck-widget_selected:hover {
-		outline: $widget-outline-thickness solid ck-color( 'border-focus' );
-	}
-
-	.ck-editor__editable.ck-blurred &.ck-widget_selected {
-		outline: $widget-outline-thickness solid ck-color( 'widget-border-blurred' );
-	}
-
-	&:hover {
-		outline: $widget-outline-thickness solid ck-color( 'widget-border-hover' );
-	}
-
-	.ck-editable {
-		border: 1px solid transparent;
-
-		// The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
-		// These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.
-		&.ck-editable_focused, &:focus {
-			@include ck-focus-ring();
-			@include ck-box-shadow( $ck-inner-shadow );
-
-			background-color: ck-color( 'widget-editable-focused-background' );
-		}
-	}
-}

+ 4 - 0
packages/ckeditor5-widget/theme/widget.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */