Clean up css in overlay

https://gist.github.com/3006391#L4503

I'll take this one.

Patch attached with 1st revision of changes.

The remaining output of csslint's warning's I think needs to be discussed, and is the following:

csslint: No errors in ./overlay-child-rtl.css.

csslint: There are 6 problems in ./overlay-child.css.

overlay-child.css
1: warning at line 19, col 3
Using width with padding can sometimes make elements larger than you expect.
padding: .2em;

overlay-child.css
2: warning at line 21, col 3
Using width with padding-right can sometimes make elements larger than you expect.
padding-right: 26px; /* LTR */

overlay-child.css
3: warning at line 48, col 1
Outlines shouldn't be hidden unless other visual changes are made.
.overlay-title:active,

overlay-child.css
4: warning at line 53, col 1
Don't use IDs in selectors.
.overlay #skip-link {

overlay-child.css
5: warning at line 56, col 1
Don't use IDs in selectors.
.overlay #skip-link a {

overlay-child.css
6: warning at line 91, col 3
margin can't be used with display: inline.
margin: 0 0 0 -3px; /* LTR */

csslint: No errors in ./overlay-parent.css.

• In regards to the padding issues, I am not sure I we how want to approach this. We would have to place an extra div inside of the whatever selector the width is applied too and add the padding there. We already have major div overload. I am not sure this is ideal.
• The id's above are for the skip-link anchor. This link is referenced in a number of places and I am not sure it's within the scope of this issue to fix add a class to it...?
• In regards to the outline:; warnings. I don't personally don't feel that the warning 48, col 1 has any issues if we want to remove the outline there. We should.
• With regards to warning at lin 91 regarding margin on display: inline. I not understand why this is an error. I find no-where online documented about margin not being able to apply to display inline, or in the w3c spec.

I'd like to hear some other peoples thoughts on these results.

Some changes:

• Wherever the classes could be added to the attributes array, I set it there.
• Using overlay-wrapper to avoid conflicts with other overlay classes.
• Applying box-sizing: border-box to overlay-wrapper makes it look even better than the default box-sizing: content-box
• overlay-title is not a link, thus can't be focused/active, right? Will it become a link under any circumstance?
• some outlines were hidden but the only reason I could find to hide them was that webkit (chrome?) renders outlines in a weird manner in elements with nested hidden spans (yes, we use some for accessibility). overflow: hidden in the a element seems to work ok. Since overflow: hidden breaks Firefox, I just enabled the outline, hope Chrome gets its act together.

That said, I kept the id in skip-link since we're not changing that pattern right now.

Updated issue summary.

Overlay is dead to D8 #2088121: Remove Overlay.