Refine look-and-feel #867
Merged
Refine look-and-feel #867
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Merge the `header` style component into `main-content`, which simplifies and reduces the Sass and gives us a BEM relationship for `main-content__header` and `main-content__body` to share styles. - Add some viewport-height-based padding to the bottom of the main content area so that the "save" button on forms is not shoved to the bottom of the screen. - Add a `section` element that wraps the body of the main content, to help make markup consistent across screens.
- Slightly decrease font size of table content - Collapse table borders, to prevent gaps between cells - Define table styles as base HTML element styling - Refine table row focus outline - Prefix classes used for JavaScript interactions with `js-`
Use more saturated red and blue colors so that they pass WCAG contrast guidelines. Related: #794
tysongach
added
the
views-and-styles
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
headerstyle component intomain-content, whichsimplifies and reduces the Sass and gives us a BEM relationship for
main-content__headerandmain-content__bodyto share styles.content area so that the "save" button on forms is not shoved to the
bottom of the screen.
sectionelement that wraps the body of the main content, tohelp make markup consistent across screens.
js-contrast guidelines.
After this PR:
Before: