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

Extended styles for dropdown component.

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

+ 16 - 6
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -11,18 +11,18 @@
 		width: 0;
 		height: 0;
 		border-style: solid;
-		border-width: .5em .5em 0 .5em;
-		border-color: ck-color( 'text' ) transparent;
+		border-width: .4em .4em 0 .4em;
+		border-color: ck-color( 'text', 30 ) transparent;
 		position: relative;
 		top: .9em;
-		margin-left: ck-spacing( 'small' );
+		margin-left: ck-spacing( 'medium' );
 	}
 }
 
 .ck-dropdown__panel {
 	border: 1px solid ck-border-color( 'foreground' );
 	display: none;
-
+	box-shadow: 0 0 5px ck-color( 'foreground', -15 );
 	position: absolute;
 
 	// Compensate double border from button and from box when positioned below the button.
@@ -35,11 +35,21 @@
 	&__list {
 		overflow: hidden;
 		list-style-type: none;
+		background: ck-color( 'background' );
+
+		@include ck-unselectable();
+		@include ck-rounded-corners();
 
 		&__item {
 			display: block;
-			border-bottom: 1px solid ck-border-color();
-			padding: ck-spacing( 'small' );
+			min-width: 12em;
+			padding: ck-spacing( 'medium' );
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				background: ck-color( 'foreground' );
+			}
 
 			&:last-of-type {
 				border: none;

+ 9 - 1
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -39,7 +39,7 @@
 @include ck-editor {
 	.ck-toolbar {
 		.ck-button {
-			border: 0;
+			border-width: 0;
 		}
 
 		// Make sure the next button does not overlap focused one.
@@ -54,5 +54,13 @@
 		.ck-button.ck-on {
 			@include ck-button-colors( 'foreground', -10 );
 		}
+
+		.ck-dropdown__button {
+			border-width: 1px;
+		}
+
+		.ck-dropdown__button:not(:hover):not(:focus):not(.ck-on) {
+			background: ck-color( 'background' );
+		}
 	}
 }