Kaynağa Gözat

Merge pull request #36 from ckeditor/t/14

t/14: Disabled hover and active states for disabled button.
Piotrek Koszuliński 9 yıl önce
ebeveyn
işleme
43481db982

+ 11 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -146,6 +146,17 @@ function renderButton( ui ) {
 		isEnabled: false
 	} ) );
 
+	const disabledActionButton = button( {
+		label: 'Disabled action',
+		icon: 'bold',
+		isEnabled: false
+	} );
+
+	// TODO: It requires model interface.
+	disabledActionButton.view.element.classList.add( 'ck-button-action' );
+
+	ui.add( 'button-icon-states', disabledActionButton );
+
 	ui.add( 'button-icon-states', button( {
 		label: 'Bold',
 		withText: false,

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