8
0
Просмотр исходного кода

Decoupled styles for various components.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
ef7d3008d4

+ 1 - 1
packages/ckeditor5-link/src/ui/inputlabelview.js

@@ -27,7 +27,7 @@ export default class InputLabelView extends View {
 			tag: 'label',
 			attributes: {
 				class: [
-					'ck-labeled-input__label'
+					'ck-input__label'
 				],
 				for: bind.to( 'for' )
 			},

+ 1 - 19
packages/ckeditor5-link/src/ui/labeledinputview.js

@@ -21,31 +21,13 @@ export default class LabeledInputView extends View {
 	constructor( locale ) {
 		super( locale );
 
-		const bind = this.bind;
-
 		this.template = new Template( {
 			tag: 'div',
 			attributes: {
 				class: [
 					'ck-labeled-input',
 				]
-			},
-			children: [
-				{
-					tag: 'label',
-					attributes: {
-						class: [
-							'ck-labeled-input__label'
-						],
-						for: bind.to( 'uid' )
-					},
-					children: [
-						{
-							text: bind.to( 'label' )
-						}
-					]
-				},
-			]
+			}
 		} );
 
 		this.register( 'content', el => el );

+ 135 - 0
packages/ckeditor5-link/theme/components/balloonpanel.scss

@@ -0,0 +1,135 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+$ck-balloon-arrow-offset: 2px;
+$ck-balloon-arrow-height: 15px;
+$ck-balloon-arrow-half-width: 10px;
+
+$ck-def-z: (
+	'default': 1,
+	'modal': 999
+	// 'topmost': 9999
+);
+
+// TODO: Move it to _zindex.scss.
+@function ck-z( $layer: 'default', $index: 0 ) {
+	@return map-get( $ck-def-z, $layer ) + $index;
+}
+
+.ck-balloon-panel {
+	@include ck-unselectable();
+	@include ck-rounded-corners();
+
+	min-width: 50px;
+	min-height: 15px;
+
+	display: none;
+	position: absolute;
+	background: ck-color( 'background' );
+	border: 1px solid ck-border-color( 'foreground' );
+
+	// TODO: Create helper for shadows.
+	box-shadow: 0 0 5px ck-color( 'foreground', -15 );
+	z-index: ck-z( 'modal' );
+
+	&:before,
+	&:after {
+		content: "";
+		position: absolute;
+
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+
+	&:before {
+		z-index: ck-z( 'default' );
+	}
+
+	&:after {
+		z-index: ck-z( 'default', 1 );
+	}
+
+	&_arrow_se,
+	&_arrow_sw {
+		&:before,
+		&:after {
+			border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
+		}
+
+		&:before {
+			z-index: ck-z( 'default' );
+			border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
+		}
+
+		&:after {
+			z-index: ck-z( 'default', 1 );
+			border-color: transparent transparent ck-color( 'background' ) transparent;
+			margin-top: $ck-balloon-arrow-offset;
+		}
+	}
+
+	&_arrow_ne,
+	&_arrow_nw {
+		&:before,
+		&:after {
+			border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
+		}
+
+		&:before {
+			z-index: ck-z( 'default' );
+			border-color: ck-border-color( 'foreground' ) transparent  transparent;
+		}
+
+		&:after {
+			z-index: ck-z( 'default', 1 );
+			border-color: ck-color( 'background' ) transparent transparent transparent;
+			margin-bottom: $ck-balloon-arrow-offset;
+		}
+	}
+
+	&_arrow_se {
+		&:before,
+		&:after {
+			left: 2 * $ck-balloon-arrow-half-width;
+			top: -$ck-balloon-arrow-height;
+		}
+	}
+
+	&_arrow_sw {
+		&:before,
+		&:after {
+			right: 2 * $ck-balloon-arrow-half-width;
+			top: -$ck-balloon-arrow-height;
+		}
+	}
+
+	&_arrow_ne {
+		&:before,
+		&:after {
+			left: 2 * $ck-balloon-arrow-half-width;
+			bottom: -$ck-balloon-arrow-height;
+		}
+	}
+
+	&_arrow_nw {
+		&:before,
+		&:after {
+			right: 2 * $ck-balloon-arrow-half-width;
+			bottom: -$ck-balloon-arrow-height;
+		}
+	}
+
+	&_visible {
+		display: block;
+	}
+
+	// Box to accommodate buttons.
+	.ck-box {
+		margin-top: ck-spacing( 'medium' );
+
+		* + * {
+			margin-left: ck-spacing( 'medium' );
+		}
+	}
+}

+ 7 - 0
packages/ckeditor5-link/theme/components/inputlabel.scss

@@ -0,0 +1,7 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-input__label {
+	display: block;
+	font-weight: bold;
+}

+ 12 - 0
packages/ckeditor5-link/theme/components/inputtext.scss

@@ -0,0 +1,12 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-input {
+	&-text {
+		@include ck-rounded-corners();
+
+		border: 1px solid ck-border-color( 'foreground' );
+		padding: ck-spacing( 'small' );
+		min-width: 200px;
+	}
+}

+ 0 - 14
packages/ckeditor5-link/theme/components/labeledinput.scss

@@ -2,18 +2,4 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .ck-labeled-input {
-	.ck-input {
-		&-text {
-			@include ck-rounded-corners();
-
-			border: 1px solid ck-border-color( 'foreground' );
-			padding: ck-spacing( 'small' );
-			min-width: 200px;
-		}
-	}
-
-	&__label {
-		display: block;
-		font-weight: bold;
-	}
 }

+ 2 - 133
packages/ckeditor5-link/theme/components/linkballoonpanel.scss

@@ -1,137 +1,6 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-$ck-balloon-arrow-offset: 2px;
-$ck-balloon-arrow-height: 15px;
-$ck-balloon-arrow-half-width: 10px;
-
-$ck-def-z: (
-	'default': 1,
-	'modal': 999
-	// 'topmost': 9999
-);
-
-// TODO: Move it to _zindex.scss.
-@function ck-z( $layer: 'default', $index: 0 ) {
-	@return map-get( $ck-def-z, $layer ) + $index;
-}
-
-// TODO: This will become BalloonPanel component stylesheet.
-.ck-balloon-panel {
-	@include ck-unselectable();
-	@include ck-rounded-corners();
-
-	min-width: 50px;
-	min-height: 15px;
-
-	display: none;
-	position: absolute;
-	background: ck-color( 'background' );
-	border: 1px solid ck-border-color( 'foreground' );
-
-	// TODO: Create helper for shadows.
-	box-shadow: 0 0 5px ck-color( 'foreground', -15 );
-
-	padding: 1em;
-	z-index: ck-z( 'modal' );
-
-	&:before,
-	&:after {
-		content: "";
-		position: absolute;
-
-		width: 0;
-		height: 0;
-		border-style: solid;
-	}
-
-	&:before {
-		z-index: ck-z( 'default' );
-	}
-
-	&:after {
-		z-index: ck-z( 'default', 1 );
-	}
-
-	&_arrow_se,
-	&_arrow_sw {
-		&:before,
-		&:after {
-			border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
-		}
-
-		&:before {
-			z-index: ck-z( 'default' );
-			border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
-		}
-
-		&:after {
-			z-index: ck-z( 'default', 1 );
-			border-color: transparent transparent ck-color( 'background' ) transparent;
-			margin-top: $ck-balloon-arrow-offset;
-		}
-	}
-
-	&_arrow_ne,
-	&_arrow_nw {
-		&:before,
-		&:after {
-			border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
-		}
-
-		&:before {
-			z-index: ck-z( 'default' );
-			border-color: ck-border-color( 'foreground' ) transparent  transparent;
-		}
-
-		&:after {
-			z-index: ck-z( 'default', 1 );
-			border-color: ck-color( 'background' ) transparent transparent transparent;
-			margin-bottom: $ck-balloon-arrow-offset;
-		}
-	}
-
-	&_arrow_se {
-		&:before,
-		&:after {
-			left: 2 * $ck-balloon-arrow-half-width;
-			top: -$ck-balloon-arrow-height;
-		}
-	}
-
-	&_arrow_sw {
-		&:before,
-		&:after {
-			right: 2 * $ck-balloon-arrow-half-width;
-			top: -$ck-balloon-arrow-height;
-		}
-	}
-
-	&_arrow_ne {
-		&:before,
-		&:after {
-			left: 2 * $ck-balloon-arrow-half-width;
-			bottom: -$ck-balloon-arrow-height;
-		}
-	}
-
-	&_arrow_nw {
-		&:before,
-		&:after {
-			right: 2 * $ck-balloon-arrow-half-width;
-			bottom: -$ck-balloon-arrow-height;
-		}
-	}
-
-	&_visible {
-		display: block;
-	}
-
-	.ck-box {
-		margin-top: ck-spacing( 'medium' );
-
-		* + * {
-			margin-left: ck-spacing( 'medium' );
-		}
-	}
+.ck-link-balloon-panel {
+	padding: ck-spacing();
 }

+ 4 - 1
packages/ckeditor5-link/theme/theme.scss

@@ -1,6 +1,9 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@import 'components/labeledinput';
 @import 'components/box';
+@import 'components/inputtext';
+@import 'components/inputlabel';
+@import 'components/labeledinput';
+@import 'components/balloonpanel';
 @import 'components/linkballoonpanel';