Skip to content

Bring buttons up to design spec

Scott Hampton requested to merge 61145-fix-button-dimensions into master

What does this MR do?

This is a CSS effort. There are other fixes that will need to happen, which can be found at &1016

Increases the button padding by 2px all around. The current default button padding is 6px 10px when it should be 7px 11px (8px 12px if you include the border), and that scale applies to all other button sizes (except for btn-lg for which there is no spec).

This also adjusts the border width for all buttons (inverted and normal) when the button has a hover, focus, or active state to be 2px instead of 1px. In order to accomplish this without increasing the button size, an inset box-shadow is added.

Affects #61145 (closed), #61144 (closed), and #61146 (closed)

Height of buttons are now 32px instead of 34px. Side padding has been increased by 2px on each side as well.

Before After
Screen_Shot_2019-05-29_at_1.43.21_PM Screen_Shot_2019-05-29_at_1.42.32_PM

2px border on hover/focus/active states

Screen_Shot_2019-05-29_at_1.43.41_PM

Dropdown button is now square

Screen_Shot_2019-05-29_at_1.43.51_PM

Primary buttons are now up to design spec

Normal
Screen_Shot_2019-06-25_at_3.48.13_PM

Hover
Screen_Shot_2019-06-25_at_3.48.25_PM

Active
Screen_Shot_2019-06-25_at_3.48.43_PM

Focus
Screen_Shot_2019-06-25_at_3.48.34_PM

Tertiary (default) buttons are now up to design spec

Normal
Screen_Shot_2019-06-25_at_3.48.58_PM

Hover
Screen_Shot_2019-06-25_at_3.49.14_PM

Focus
Screen_Shot_2019-06-25_at_3.49.24_PM

Active
Screen_Shot_2019-06-25_at_3.49.32_PM

Does this MR meet the acceptance criteria?

Conformity

Performance and testing

Closes #61145 (closed)
Closes #61144 (closed)
Closes #61146 (closed)

Edited by Scott Hampton

Merge request reports