Browse Source

Disabled hover and active states on .ck-button which is disabled.

Aleksander Nowodzinski 9 years ago
parent
commit
53a7becf64

+ 11 - 9
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -39,16 +39,18 @@
  * @param {String} $color - Background color of the button.
  */
 @mixin ck-button-state-colors( $color, $offset: 0 ) {
-	&:hover,
-	&:focus {
-		background: ck-color( $color, $offset - 10 );
-		border-color: ck-border-color( $color, $offset - 10 );
-	}
+	&:not(.ck-disabled) {
+		&:hover,
+		&:focus {
+			background: ck-color( $color, $offset - 10 );
+			border-color: ck-border-color( $color, $offset - 10 );
+		}
 
-	&:active {
-		background: ck-color( $color, $offset - 15 );
-		border-color: ck-border-color( $color, $offset - 15 );
-		box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
+		&:active {
+			background: ck-color( $color, $offset - 15 );
+			border-color: ck-border-color( $color, $offset - 15 );
+			box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
+		}
 	}
 }
 

+ 14 - 13
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -37,27 +37,28 @@
 
 		.ck-button {
 			border-width: 0;
-		}
 
-		// Make sure the next button does not overlap focused one.
-		.ck-button:focus {
-			z-index: 1;
-		}
+			// Make sure the next button does not overlap focused one.
+			&:focus {
+				z-index: 1;
+			}
 
-		.ck-button:not(:hover):not(:focus):not(.ck-on) {
-			background: ck-color( 'foreground' );
-		}
+			&:not(:hover):not(:focus):not(.ck-on),
+			&.ck-disabled {
+				background: ck-color( 'foreground' );
+			}
 
-		.ck-button.ck-on {
-			@include ck-button-colors( 'foreground', -10 );
+			&.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' );
+			&:not(:hover):not(:focus):not(.ck-on) {
+				background: ck-color( 'background' );
+			}
 		}
 	}
 }