Unified icon-buttons used in the new GAIA flow.

ui/login/oobe.css

Index: ui/login/oobe.css
diff --git a/ui/login/oobe.css b/ui/login/oobe.css
index f124f899279c24eeb70eb5a208ea96625ce8b356..1d7c7a82cc766cbc049da5b9fb2253088b7ee934 100644
--- a/ui/login/oobe.css
+++ b/ui/login/oobe.css
@@ -34,7 +34,7 @@ button {
 
 /* Follow same focus coloring as in widgets.css */
 /* Do not apply this style to restricted button state. */
-button.custom-appearance:not(.button-restricted):not(.button-fancy) {
+button.custom-appearance:not(.button-restricted):not(.button-fancy):not([is="gaia-icon-button"]) {

[Greg Levin, 2015/05/08 19:18:07]

This change (?) has removed the blue focus rectangle from the shelf buttons
(i.e. Shut down, Browse as guest, Add person).  TABing to them no longer gives a
visual cue that they have focus.

Also, nit: I'm not familiar with js style guidelines, but should this line wrap
to meet 80-column limit?

[dzhioev (left Google), 2015/05/08 21:15:45]

Nice catch! Adding attribute selector increased this selector's specificity and
made it higher than "button.custom-appearance:focus:focus" specificity. Added
another ":focus" to fix it. http://imgur.com/gallery/Q3cUg29
It should, but I don't know how to break long selectors correctly. Breaking line
before ':' will change selector's meaning.

[michaelpg, 2015/05/08 22:02:22]

I don't think we technically have a line length limit for CSS anywhere.

[dzhioev (left Google), 2015/05/08 22:29:02]

We do have a limit, 80 characters as usual. 

[michaelpg, 2015/05/08 22:33:39]

Ah ok. Can you point me to the style guide?

[Greg Levin, 2015/05/11 14:33:50]

I don't really know css syntax, but experimentally, this seems to work:

button.custom-appearance:not(.button-restricted):not(.button-fancy):not(
    [is="gaia-icon-button"]) {

I'll leave it to you to decide which is aesthetically preferable.

[dzhioev (left Google), 2015/05/11 23:05:58]

Done, split line after ":not(" 

   -webkit-transition: border-color 200ms;
   border: 1px solid transparent;
   /* Don't grey out disabled buttons. */