Przeglądaj źródła

Merge pull request #34 from ckeditor/t/33

Introduced styles for BalloonPanel and related to LinkBalloonPanel components
Aleksander Nowodzinski 9 lat temu
rodzic
commit
9a0bc184b9

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

@@ -0,0 +1,114 @@
+// 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();
+	@include ck-dropshadow();
+
+	min-width: 50px;
+	min-height: 15px;
+
+	display: none;
+	position: absolute;
+	background: ck-color( 'background' );
+	border: 1px solid ck-border-color( 'foreground' );
+
+	z-index: ck-z( 'modal' );
+
+	&:before,
+	&:after {
+		content: "";
+		position: absolute;
+
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+
+	&:before {
+		z-index: ck-z();
+	}
+
+	&: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;
+	}
+}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -30,7 +30,6 @@
 .ck-dropdown__panel {
 	border: 1px solid ck-border-color( 'foreground' );
 	display: none;
-	box-shadow: 0 0 5px ck-color( 'foreground', -15 );
 	position: absolute;
 	left: 0px;
 
@@ -42,6 +41,7 @@
 	z-index: ck-z();
 
 	@include ck-rounded-corners();
+	@include ck-dropshadow();
 
 	&-visible {
 		display: inline-block;

+ 14 - 0
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -0,0 +1,14 @@
+// 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();
+		@include ck-focus-shadow();
+
+		border: 1px solid ck-border-color( 'foreground' );
+		padding: ck-spacing( 'medium' );
+		min-width: 250px;
+		box-shadow: 0 2px 3px ck-color( 'foreground', -7 ) inset;
+	}
+}

+ 7 - 0
packages/ckeditor5-theme-lark/theme/components/label.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-label {
+	display: block;
+	font-weight: bold;
+}

+ 6 - 0
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -0,0 +1,6 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@mixin ck-dropshadow() {
+	box-shadow: 0 0 5px ck-color( 'foreground', -15 );
+}

+ 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;
 }

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

@@ -7,6 +7,7 @@
 @import 'helpers/spacing';
 @import 'helpers/states';
 @import 'helpers/zindex';
+@import 'helpers/shadow';
 @import 'helpers/editor';
 
 @import 'components/reset';
@@ -15,4 +16,7 @@
 @import 'components/toolbar';
 @import 'components/dropdown';
 @import 'components/list';
+@import 'components/label';
+@import 'components/inputtext';
+@import 'components/balloonpanel';
 @import 'components/editor';