浏览代码

Merge pull request #51 from ckeditor/t/50

t/50 Normalized focus outline of .ck-editor__editable.
Piotrek Koszuliński 9 年之前
父节点
当前提交
cd39c5b84a

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -16,7 +16,7 @@
 	position: relative;
 
 	@include ck-button-colors( $color );
-	@include ck-focus-shadow();
+	@include ck-user-focus-outline();
 }
 
 /**

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

@@ -20,7 +20,6 @@
 
 	.ck-editor__main {
 		background: ck-color();
-		overflow: hidden;
 	}
 
 	.ck-editor__bottom {
@@ -31,9 +30,15 @@
 		padding: ck-spacing();
 	}
 
-	.ck-editor__editable_inline {
-		overflow: auto;
-		padding: 0 ck-spacing();
+	.ck-editor__editable {
+		&.ck-focused {
+			@include ck-focus-outline();
+		}
+
+		&_inline {
+			overflow: auto;
+			padding: 0 ck-spacing();
+		}
 	}
 
 	.ck-toolbar {

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -4,7 +4,7 @@
 .ck-input {
 	&-text {
 		@include ck-rounded-corners();
-		@include ck-focus-shadow();
+		@include ck-user-focus-outline();
 
 		border: 1px solid ck-border-color( 'foreground' );
 		padding: ck-spacing( 'medium' );

+ 15 - 6
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -10,17 +10,26 @@
 }
 
 /**
+ * A visual styling of focused element.
+ *
+ * @access public
+ */
+@mixin ck-focus-outline() {
+	outline: thin dotted;
+	outline: 5px auto -webkit-focus-ring-color;
+
+	// To avoid collision with border in Firefox.
+	outline-offset: -2px;
+}
+
+/**
  * Brings visual styling for :focus state.
  *
  * @access public
  */
-@mixin ck-focus-shadow() {
+@mixin ck-user-focus-outline() {
 	&:focus {
-		outline: thin dotted;
-		outline: 5px auto -webkit-focus-ring-color;
-
-		// To avoid collision with border in Firefox.
-		outline-offset: -2px;
+		@include ck-focus-outline();
 	}
 }