瀏覽代碼

Introduced styles for BalloonPanel and related to LinkBalloonPanel components.

Oskar Wrobel 9 年之前
父節點
當前提交
c5542bcd1b

+ 115 - 0
packages/ckeditor5-theme-lark/theme/components/balloonpanel.scss

@@ -0,0 +1,115 @@
+// 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-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;
+	}
+}

+ 8 - 0
packages/ckeditor5-theme-lark/theme/components/box.scss

@@ -0,0 +1,8 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-box {
+	&_align_right {
+		text-align: right;
+	}
+}

+ 7 - 0
packages/ckeditor5-theme-lark/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-theme-lark/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;
+	}
+}

+ 5 - 0
packages/ckeditor5-theme-lark/theme/components/labeledinput.scss

@@ -0,0 +1,5 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-labeled-input {
+}

+ 4 - 5
packages/ckeditor5-theme-lark/theme/helpers/_zindex.scss

@@ -2,11 +2,10 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 $ck-def-z: (
-	'default': 1
-	// 'modal': 10
-	// 'topmost': 9999
+	'default': 1,
+	'modal': 999
 );
 
-@function ck-z( $index: 'default' ) {
-	@return map-get( $ck-def-z, $index );
+@function ck-z( $layer: 'default', $index: 0 ) {
+	@return map-get( $ck-def-z, $layer ) + $index;
 }

+ 5 - 0
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -15,4 +15,9 @@
 @import 'components/toolbar';
 @import 'components/dropdown';
 @import 'components/list';
+@import 'components/box';
+@import 'components/inputlabel';
+@import 'components/inputtext';
+@import 'components/labeledinput';
+@import 'components/balloonpanel';
 @import 'components/editor';