increase margin between paginator items to fix issue #127

[tilomitra]

Pretty self-explanatory. Tested across all browsers supported by Pure. Firefox and IE9 adds a 1px white space between paginator items, whereas Webkit doesn't, but I think this looks a lot better than the broken inner box-shadow.

[ericf]

Ah, so this negative margin is to cancel out the whitespace. This is similar to what Grids does…should we use the negative letter-spacing rules that grids uses for this instead?

[tilomitra]

@ericf Yes, we can by adding the following to .pure-paginator { ... }:

    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */

I didn't do this because it's a lot more code. What's wrong with the margin fix?

[ericf]

It's not that much more code. And the issue is that the negative margin won't work when the whitespace is removed from the HTML.

I took the paginator code from this branch and the paginator example from the website but removed the whitespace from the HTML, and the problem still exists: http://jsbin.com/exozog/1/

A bulletproof solution would be to use the same code Grids uses to negate the spacing.

[tilomitra]

@ericf 🔔

[ericf]

@tilomitra you added what is effectively the pure-g rules, but didn't add the corresponding pure-u rules to put back the letter-spacing and word-spacing.

[ericf]

@tilomitra this needs all the styles from grids-core.css. I'll just go in and add them and merge this now…

[tilomitra]

@ericf: I don't think it needs the following:

    vertical-align: top;
    text-rendering: auto;

Are you talking about this?

.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}