Explorar el Código

Merge pull request #81 from ckeditor/t/80

Feature: Added styles for active list items. Closes #80.
Szymon Kupś hace 8 años
padre
commit
56b075b664

+ 28 - 1
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -8,10 +8,22 @@
 	@include ck-rounded-corners();
 
 	&__item {
-		padding: ck-spacing( 'medium' );
+		padding: ck-spacing( 'medium' ) ck-spacing( 'medium' ) ck-spacing( 'medium' ) 0;
 		cursor: pointer;
 		min-width: 12em;
 
+		// NOTE: Using absolute sizes here because otherwise each
+		// item would indent in a different way.
+		&::before {
+			content: "";
+			display: inline-block;
+			width: $ck-font-size-base;
+			font-weight: normal;
+			font-size: $ck-font-size-base;
+			text-align: center;
+			margin: 0 $ck-font-size-base/2;
+		}
+
 		&:hover,
 		&:focus {
 			background: ck-color( 'foreground' );
@@ -19,11 +31,26 @@
 
 		&:focus {
 			@include ck-box-shadow( $ck-focus-outer-shadow );
+			position: relative;
+			z-index: ck-z();
 			outline: none;
 		}
 
 		&:last-of-type {
 			border: none;
 		}
+
+		&_active {
+			background: ck-color( 'foreground', -5 );
+
+			&::before {
+				content: "✓";
+			}
+
+			&:hover,
+			&:focus {
+				background: ck-color( 'foreground', -10 );
+			}
+		}
 	}
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -9,7 +9,7 @@ $ck-inner-shadow: 2px 2px 3px ck-color( 'foreground', -7 ) inset;
 /**
  * A visual style of element's drop shadow (i.e. panel).
  */
-$ck-drop-shadow: 0 0 5px ck-color( 'shadow' );
+$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow' );
 
 /**
  * A helper to combine multiple shadows.