allow arrays for CSS properties that can take multiple values about aphrodite HOT 5 CLOSED

paddingVertical and paddingHorizontal sound nice... I always have trouble remember the order of the numbers. I was try to avoid having to do string manipulation... in particular having to append the px makes me sad when everything else is so nice.

from aphrodite.

I don't, I think it's in webapp somewhere. I think it's better to return all 4 of them so that aphrodite can do the unit affixing instead of the mixin (the mixin was made outside of aphrodite): https://github.com/Khan/webapp/blob/master/javascript/content-library-package/styles/shared.js#L54

from aphrodite.

ReactNative has paddingVertical and paddingHorizontal to replace the shortcut padding: 5px 10px.
For the border example, I've seen stuff like

border: `2px solid ${color}`

from aphrodite.

I think that if we allow arrays, it's going to be to do something like

display: flex;
display: -ms-flex;

as display: ["flex", "-ms-flex"] because there's currently no way to do that? Not sure.

I think someone has a mixin that lets you do something like

{
    ...padding(5, 10, 15, 20),
}

which would expand to

{
    paddingTop: 5,
    paddingRight: 10,
    paddingBottom: 15,
    paddingLeft: 20,
}

Would that sorta solve your problem @kevinbarabash?

from aphrodite.

having some simple helper functions sounds good. padding could return either:

{
    paddingTop: 5,
    paddingRight: 10,
    paddingBottom: 15,
    paddingLeft: 20,
}

or

{
    padding: `5px 10px 15px 20px`
}

@xymostech is it "better" to use shorthand forms? Also, do you remember the name of the mixin?

from aphrodite.