Media Frames: Checkboxes/Radio buttons should get box-sizing: border-box

[ocean90]

In [29465] we removed box-sizing: border-box from checkboxes and radio buttons in favour of a more general rule, see trunk/src/wp-admin/css/forms.css@29690#L2​.

The media frame has a reset rule, which sets box-sizing to content-box, see trunk/src/wp-includes/css/media-views.css?rev=29687#L4​. For some input fields we set border-box again, see trunk/src/wp-includes/css/media-views.css?rev=29687#L49​. But not for checkboxes and radio buttons, see ​https://cloudup.com/cMnEjZ0Use7.

[azaozz]

The media frame has a reset rule, which sets box-sizing to content-box...

Not sure why this was added but seems a bad idea. A lot of styling and JS based calculations of element dimensions work better with box-sizing: border-box.

[nacin]

Well, it was designed under content-box. The reset is there for themes.

[azaozz]

For themes that style the media modal? There is a good reason why all form fields have box-sizing: border-box as default rule in the admin. Breaking that for the media modal (and then re-applying it) isn't good/doesn't make much sense.

Generally any CSS selector that has * is a suspect, pretty much like !important :)

Edit: if you mean when the modal is used on the front-end, that still needs more work. Needs to reset and re-apply all of the admin styles that affect every element in the modal.

[nacin]

Replying to azaozz:

Edit: if you mean when the modal is used on the front-end, that still needs more work. Needs to reset and re-apply all of the admin styles that affect every element in the modal.

I did mean that. A full reset was not necessary at the time. For frontend elements like the toolbar or modal, we have always taken a more practical approach to resets.

[mlteal]

Tested with both checkboxes and radio buttons at the WordCamp LA contributor day.

[mlteal]

Actually, after looking at [29465], we should use that approach here too. In this case we should apply it to select elements to override content-box applied to *. We don't do that normally because selects use border-box in the user agent stylesheet. See 29493.2.diff​.

[ocean90]

In 29727:

Media Frames: Set the box-sizing CSS property to border-box for checkboxes and radio buttons.

props mlteal.
see #29493.

[nacin]

Assigning this ticket to get it out of the good-first-bugs report.

First props for mlteal :)

[jorbin]

Tested and confirmed that r29727 applies cleanly to the 4.0 branch and applies box-sizing: border-box to radio and checkboxes inside the media model.

This is ready to be merged.

[nacin]

[30262] merges this to 4.0.