Bring buttons up to design spec
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 |
---|---|
hover
/focus
/active
states
2px border on
Dropdown button is now square
Primary buttons are now up to design spec
Tertiary (default) buttons are now up to design spec
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry - N/A Documentation created/updated or follow-up review issue created
-
Code review guidelines -
Merge request performance guidelines -
Style guides - N/A Database guides
- N/A Separation of EE specific content
Performance and testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Closes #61145 (closed)
Closes #61144 (closed)
Closes #61146 (closed)
Edited by Scott Hampton