New css padding question

[marklcfc]

I've reduced .ipsDataItem on previous versions as its been far too big on mobile. I did it by doing this

	.ipsDataItem {
		padding: 13px 10px 13px 10px;
	}

I noticed on 4.5 I can't do this anymore, but now as the spacing is way too big on desktop as well now I will need to do the same. How do I do it? I assume its the padding in this, but what does the var var(--sp-3); mean. The previous code above made much more sense

.ipsDataItem_main, .ipsDataItem_stats, .ipsDataItem_lastPoster, .ipsDataItem_generic, .ipsDataItem_modCheck, .ipsDataItem_icon {
    display: table-cell;
    padding: 18px var(--sp-3);
    vertical-align: middle;
}

 

Edited July 1, 2020 by marklcfc

[Rikki]

In 4.5 we have a 4px spacing scale and we use variables to apply it. They're named --sp-* where the * is the multiplier. That means the variable --sp-3 will be 12px.

You can either change it to --sp-2 for 8px, or just replace var(--sp-3) with a hardcoded pixel value if you prefer.

[marklcfc]

What does the 18px mean if it has 12px in brackets? The previously version I gave is top and bottom 13px and left and right 10px, but how does the new version work?

Edited July 1, 2020 by marklcfc

[bfarber]

10 minutes ago, marklcfc said:

What does the 18px mean if it has 12px in brackets? The previously version I gave is top and bottom 13px and left and right 10px, but how does the new version work?

With padding (and similar) CSS properties, if you only define two values then the first one will represent top and bottom, and the second one will represent left and right. So "12px var(--sp-3)" is like saying "12px var(--sp-3) 12px var(--sp-3)"