Skip to content

Fix font reset for headings#1760

Merged
cchaos merged 3 commits intoelastic:masterfrom
cchaos:font-reset
Mar 22, 2019
Merged

Fix font reset for headings#1760
cchaos merged 3 commits intoelastic:masterfrom
cchaos:font-reset

Conversation

@cchaos
Copy link
Copy Markdown
Contributor

@cchaos cchaos commented Mar 22, 2019

This now targets h1-h6 and p tags to reset the family, weight and size to be similar to the base. This fixes #1714 where plain headings outside of EuiText were getting the browser's default applied which doesn't match our EuiText or EuiTitle styles.

Before

After

Screen Shot 2019-03-18 at 13 27 30 PM


Buttons

I also added a font-size declaration for EuiButton's since they were getting inherited from their container, even though the overall size of the button was staying the same.

For example in tables:

Before

Screen Shot 2019-03-18 at 13 33 31 PM

After

Screen Shot 2019-03-18 at 13 33 28 PM

Checklist

  • [ ] This was checked in mobile
  • This was checked in IE11
  • [ ] This was checked in dark mode
  • [ ] Any props added have proper autodocs
  • [ ] Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • [ ] This was checked for breaking changes and labeled appropriately
  • [ ] Jest tests were updated or added to match the most common scenarios
  • [ ] This was checked against keyboard-only and screenreader scenarios
  • [ ] This required updates to Framer X components

cc @zumwalt @gjones @formgeist

Even though this reset stopped existing only for a short while, I just wanted everyone to be alerted.

margin: 0;
outline: none;
font-size: $euiFontSize;
font-size: inherit;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 99 was removed because it was being directly overridden by the inherit and therefore was having no effect but clutter.

Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@cchaos cchaos merged commit 01b01e7 into elastic:master Mar 22, 2019
@cchaos cchaos deleted the font-reset branch March 22, 2019 15:58
@ryankeairns
Copy link
Copy Markdown
Contributor

tenor-62112521

@cchaos cchaos mentioned this pull request Mar 28, 2019
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add header levels to CSS reset

2 participants