Przeglądaj źródła

Unified focus outline/border/shadows strategy across the UI.

Aleksander Nowodzinski 9 lat temu
rodzic
commit
3aeee10928

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

@@ -8,7 +8,7 @@ $ck-balloon-arrow-half-width: 10px;
 .ck-balloon-panel {
 	@include ck-unselectable();
 	@include ck-rounded-corners();
-	@include ck-dropshadow();
+	@include ck-drop-shadow();
 
 	min-width: 50px;
 	min-height: 15px;

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

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

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

@@ -41,7 +41,7 @@
 	z-index: ck-z();
 
 	@include ck-rounded-corners();
-	@include ck-dropshadow();
+	@include ck-drop-shadow();
 
 	&-visible {
 		display: inline-block;

+ 2 - 1
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -65,7 +65,8 @@
 
 	.ck-editor__editable {
 		&.ck-focused {
-			@include ck-focus-outline();
+			@include ck-focus-ring( 'outline' );
+			@include ck-box-shadow( $ck-inner-shadow );
 		}
 
 		&_inline {

+ 6 - 2
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -4,11 +4,15 @@
 .ck-input {
 	&-text {
 		@include ck-rounded-corners();
-		@include ck-user-focus-outline();
+		@include ck-box-shadow( $ck-inner-shadow );
 
 		border: 1px solid ck-border-color( 'foreground' );
 		padding: ck-spacing( 'medium' );
 		min-width: 250px;
-		box-shadow: 0 2px 3px ck-color( 'foreground', -7 ) inset;
+
+		&:focus {
+			@include ck-focus-ring();
+			@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
+		}
 	}
 }

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

@@ -22,7 +22,7 @@ $ck-colors: () !default;
 $_ck-colors: (
 	'action': #61B145,
 	'background': #fff,
-	'focus': #83BFFC,
+	'focus': #6ab5f9,
 	'foreground': #f7f7f7,
 	'text': #333,
 	'shadow': rgba(0,0,0,.2)

+ 22 - 2
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -1,6 +1,26 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@mixin ck-dropshadow() {
-	box-shadow: 0 0 5px ck-color( 'shadow' );
+/**
+ * A visual style of element's inner shadow (i.e. input).
+ */
+$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' );
+
+/**
+ * A helper to combine multiple shadows.
+ */
+@mixin ck-box-shadow($shadows...) {
+	box-shadow: $shadows;
+}
+
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+@mixin ck-drop-shadow() {
+	@include ck-box-shadow( $ck-drop-shadow );
 }

+ 26 - 13
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -1,31 +1,46 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+/**
+ * A visual style of focused element's outer shadow.
+ */
+$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'focus' ), 10% );
+
+/**
+ * A visual style of focused element's border or outline.
+ */
+$ck-focus-ring: 1px solid ck-color( 'focus' );
+
+/**
+ * A class which hides an element in DOM.
+ */
 .ck-hidden {
 	display: none;
 }
 
+/**
+ * A class which indicates that an element holding it is disabled.
+ */
 .ck-disabled {
 	opacity: .5;
 }
 
 /**
- * A visual styling of focused element.
- *
- * @access public
+ * A visual style of focused element's border or outline.
  */
-@mixin ck-focus-outline() {
-	outline: thin dotted;
-	outline: 5px auto -webkit-focus-ring-color;
-
-	// To avoid collision with border in Firefox.
-	outline-offset: -2px;
+@mixin ck-focus-ring( $borderOrOutline: 'border' ) {
+	@if $borderOrOutline == 'outline' {
+		outline: $ck-focus-ring;
+	}
+	@else {
+		// Disable native outline.
+		outline: none;
+		border: $ck-focus-ring;
+	}
 }
 
 /**
  * Brings visual styling for :focus state.
- *
- * @access public
  */
 @mixin ck-user-focus-outline() {
 	&:focus {
@@ -35,8 +50,6 @@
 
 /**
  * Makes element unselectable.
- *
- * @access public
  */
 @mixin ck-unselectable() {
 	-moz-user-select: none;