Sfoglia il codice sorgente

Implemented styles for .ck-button with a keystroke preview.

Aleksander Nowodzinski 6 anni fa
parent
commit
7063cd5996

+ 25 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -63,6 +63,10 @@ a.ck.ck-button {
 		& .ck-button__label {
 		& .ck-button__label {
 			@mixin ck-disabled;
 			@mixin ck-disabled;
 		}
 		}
+
+		& .ck-button__keystroke {
+			opacity: .3;
+		}
 	}
 	}
 
 
 	&.ck-button_with-text {
 	&.ck-button_with-text {
@@ -81,6 +85,27 @@ a.ck.ck-button {
 		}
 		}
 	}
 	}
 
 
+	&.ck-button_with-keystroke {
+		& .ck-button__label {
+			flex-grow: 1;
+		}
+	}
+
+	& .ck-button__keystroke {
+		color: inherit;
+
+		@mixin ck-dir ltr {
+			margin-left: var(--ck-spacing-large);
+		}
+
+		@mixin ck-dir rtl {
+			margin-right: var(--ck-spacing-large);
+		}
+
+		font-weight: bold;
+		opacity: .7;
+	}
+
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
 	&.ck-on {
 		@mixin ck-button-colors --ck-color-button-on;
 		@mixin ck-button-colors --ck-color-button-on;