From db533faa091a828c1f21e0508cbef66dee3b3165 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jan 2018 11:12:39 +0100 Subject: [PATCH 1/6] Try new focus styles --- components/icon-button/style.scss | 10 ++++++++++ editor/assets/stylesheets/_mixins.scss | 22 +++++++++++++++++----- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss index 71b1f1f5851baf..66c13a02c53d4f 100644 --- 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 index 28c723bdc3140a..7f64400544f4b1 100644 --- 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; } /** From adbdbb713897769a18439c2e5543c49fb500bfab Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jan 2018 11:35:57 +0100 Subject: [PATCH 2/6] Try a different approach for styling movers --- components/dashicon/index.js | 1 + editor/assets/stylesheets/_mixins.scss | 8 +------ editor/components/block-mover/style.scss | 27 ++++++++++++++++++++++-- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/components/dashicon/index.js b/components/dashicon/index.js index 15c64ac6609dad..2ce27ddaa08abe 100644 --- a/components/dashicon/index.js +++ b/components/dashicon/index.js @@ -857,6 +857,7 @@ export default class Dashicon extends wp.element.Component { return ( `s overflow + border-radius: 50%; } - &:first-child { - margin-bottom: 4px; + &:not(:disabled):hover .dashicon { + @include button-style__hover; + } + + &:not(:disabled):active .dashicon { + @include button-style__active; + } + + &:not(:disabled):focus .dashicon { + @include button-style__focus-active; } } From 030dec39825124a7770bc2d272d93f8ed4119402 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jan 2018 11:38:58 +0100 Subject: [PATCH 3/6] Fix focus issue with SVGs --- editor/assets/stylesheets/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index b01d63b1bb69b8..7da712ccf3fb64 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -30,6 +30,7 @@ body.gutenberg-editor-page { svg { fill: currentColor; + outline: none; } ul#adminmenu a.wp-has-current-submenu:after, From 789f955c97ea6f24d673d3f95aba87daa86f9483 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jan 2018 13:10:34 +0100 Subject: [PATCH 4/6] Polish focus styles further --- editor/assets/stylesheets/_mixins.scss | 9 ++++----- editor/edit-post/header/style.scss | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss index 9f3f8a64eb7bd8..05a4d3457fb2c0 100644 --- a/editor/assets/stylesheets/_mixins.scss +++ b/editor/assets/stylesheets/_mixins.scss @@ -125,16 +125,16 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } ); box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white; } -@mixin button-style__focus-active() { +@mixin button-style__active() { outline: none; color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; + box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 ); } -@mixin button-style__active() { +@mixin button-style__focus-active() { outline: none; color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $dark-gray-400, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 ); + box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; } @mixin tab-style__focus-active() { @@ -146,7 +146,6 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } ); @mixin input-style__focus-active() { outline: none; color: $dark-gray-900; - //box-shadow: 0 0 0 1px $dark-gray-500; box-shadow: 0 0 0 1px $dark-gray-300; } diff --git a/editor/edit-post/header/style.scss b/editor/edit-post/header/style.scss index c22933766be8b7..566f825307a1ae 100644 --- a/editor/edit-post/header/style.scss +++ b/editor/edit-post/header/style.scss @@ -55,6 +55,7 @@ left: 1px; } + &.is-toggled:hover, &.is-toggled:focus { outline: none; box-shadow: 0 0 0 1px $dark-gray-500, inset 0 0 0 1px $white; From 1cea78d86c3057923ef490799271a0288eceb653 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 18 Jan 2018 10:53:27 +0100 Subject: [PATCH 5/6] Revert tabindex fix, and reverse active & hover states. --- components/dashicon/index.js | 1 - editor/assets/stylesheets/_mixins.scss | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/dashicon/index.js b/components/dashicon/index.js index 2ce27ddaa08abe..15c64ac6609dad 100644 --- a/components/dashicon/index.js +++ b/components/dashicon/index.js @@ -857,7 +857,6 @@ export default class Dashicon extends wp.element.Component { return ( Date: Thu, 18 Jan 2018 10:59:27 +0100 Subject: [PATCH 6/6] Tweak styles further from revert. --- editor/components/block-mover/style.scss | 21 +++---------------- .../components/block-settings-menu/style.scss | 5 ++++- 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss index 2e267f60b6899c..964b96d7bc6c00 100644 --- a/editor/components/block-mover/style.scss +++ b/editor/components/block-mover/style.scss @@ -20,30 +20,15 @@ margin-bottom: 4px; } - // unstyle inherited icon button styles - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus { - box-shadow: none; - color: inherit; - } - - // apply styles to SVG directly - .dashicon { - display: block; - position: relative; // Fixing the Safari bug for `