v4: Updated form and button sizing #19121

merged 7 commits into from Feb 8, 2016


None yet

1 participant

mdo commented Feb 8, 2016

Fixes #18607.

Long story short, the funky vertical padding values we had for inputs and buttons were causing fucked up computed heights when the root font-size is changed from 16px to 14px. This PR updates inputs and buttons to:

  • Use easier math (e.g., .5rem on default buttons) to more readily support root font-size changes.
  • Due to the increased padding, we now use a tighter line-height (1.25 instead of inherited 1.5). This line-height is the same across all input and button sizes.
  • Some mixins and size variation styles were cleaned up as well.
mdo added some commits Feb 8, 2016
@mdo mdo Remove line-height from button mixin calls 1db8dc1
@mdo mdo Remove specific line-heights from large/small inputs as well 8fcdbd3
@mdo mdo Remove commented out height on large/small inputs ab451e5
@mdo mdo Remove line-height from the button size mixin too a16b2ef
@mdo mdo updated button/form-control padding and line-height
- Moves from no set line-height (inherited of 1.5) to declared 1.25 for
all inputs and buttons (regardless of size modifier).

- Updates padding to be `.5rem` instead of `.375rem` so that padding is
more likely to be whole numbers based on the root font-size.

- Whole numbers will be beneficial in avoiding odd fractional pixels
that can lead to misalignment as shown in #18607.

- Large buttons and inputs are now a tad wider, and smaller
buttons/inputs a tad shorter and narrower, too.
@mdo mdo Put that new var to use to match form group addons to form controls e589cdb
@mdo mdo Merge branch 'v4-dev' into v4-form-sizing
@mdo mdo added css v4 labels Feb 8, 2016
@mdo mdo added this to the v4.0.0-alpha.3 milestone Feb 8, 2016
@mdo mdo merged commit e8b6e5f into v4-dev Feb 8, 2016

3 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
hound No violations found. Woof!
@mdo mdo deleted the v4-form-sizing branch Feb 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment