Check for proper use of CSS Outline in Seven

Thanks! In some cases we have removed the outline when we've replaced it with other focus styling.

I was chatting to Bojhan. It would be nice if we could replace the default browser focus styling with our own completely, see the focus styling for the buttons:

Do you have any advice? The styling uses box-shadow which is probably safe seeing as we don't support IE8.

Here's a proof of concept patch that adds default focus styling to everything and removes any instances of outline: 0;

Not sure if I'm a fan of this, because any element that defines it's own focus styling (see the add to shortcuts icons) know has to know to remove box-shadow instead of outline. It also just doesn't look good... I've talked myself out of it :)

Looks like csslint already has a rule for this: https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone

@mgifford I have it running inside of Sublime. It great to see hints as you're typing.

You can set it up any number of ways. They should all be able to read the .csslintrc file for settings so it means we can flexible with everyones preferred method.

I tested this manually. I'm getting the blue gradient on focus everywhere, not just "buttons". Is that the intended result? I'm also not getting it on the Save button. Without the patch focus underlines the text in the save button and makes the blue a lighter color. With the patch the underline is gone, but there is no blue focus gradient, only the color change.

@davidhernandez Thanks for testing. This glow looks bad on links, I think underlining is enough for those situations. Maybe we should try this glow on the other focusable elements apart from links?

Rerolled patch

1. +++ b/core/themes/seven/css/style.css
   @@ -840,10 +840,11 @@ textarea.form-textarea {
   -  color: #333;
   +  color: #000;
   

   Why are we changing the colour to #000? We use #333 everywhere else

2. +++ b/core/themes/seven/css/style.css
   @@ -840,10 +840,11 @@ textarea.form-textarea {
   +  border-color: rgba(0, 116, 189, 0.8);
   

   This affects all text inputs without focus? I think this styling is supposed to go on focus right?

+++ b/core/themes/seven/css/seven.base.css
@@ -15,6 +15,10 @@ a:hover,
+.button:focus {
+  outline: 0;
+  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}

Sorry! This was in the last patch but now it looks like we have .button:focus declared in two places?

I removed the focus styles from seven.base.css as they were being overridden by the other Seven stylesheets and therefore not needed.

Attached are screenshots of the various button states after applying the patch in #22.

Reolled #22 patch.

Thanks, I think it's traditional to have the focus after the select just incase it needs to override any hover styling.

Thanks for the screenshots @bluegriff!

Committed 60441ca and pushed to 8.0.x. Thanks!