Try new focus styles

WordPress · Jan 16, 2018 · db533fa · db533fa
1 parent 34930ca
commit db533fa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
@@ -22,4 +22,14 @@
 	&:not( :disabled ):hover {
 		@include button-style__hover;
 	}
+
+	&:not( :disabled ):active {
+		@include button-style__active;
+	}
+
+	&[aria-disabled=true]:focus,
+	&:disabled:focus {
+		box-shadow: none;
+	}
+
 }
diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
@@ -122,26 +122,38 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
 
 @mixin button-style__hover {
 	color: $dark-gray-900;	// previously $blue-medium-500
+	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white;
 }
 
 @mixin button-style__focus-active() {
 	outline: none;
-	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
 	color: $dark-gray-900;
-	background: $light-gray-300;
+	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
+}
+
+@mixin button-style__active() {
+	outline: none;
+	color: $dark-gray-900;
+	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-400, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 );
 }
 
 @mixin tab-style__focus-active() {
 	outline: none;
-	box-shadow: 0 0 0 1px $dark-gray-500;
 	color: $dark-gray-900;
-	background: $light-gray-300;
+	//box-shadow: 0 0 0 1px $dark-gray-500;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-300;
 }
 
 @mixin input-style__focus-active() {
 	outline: none;
-	box-shadow: 0 0 0 1px $dark-gray-500;
 	color: $dark-gray-900;
+	//box-shadow: 0 0 0 1px $dark-gray-500;
+	box-shadow: 0 0 0 1px $dark-gray-300;
 }
 
 /**