
Existing member? Log in and continue learning

See if you like it, start the course for free!

Unlock full course by purchasing a membership
Styling and Theming
Styling and Theming
We are basically done at this point — the application is functional… it’s just not particularly good looking.
Making the application pretty was not really one of our goals for this module. Some of the later modules get into the styling side of things a bit more (including creating themes with Angular Material), but for now we are just going to set up some basic CSS styles to make this application look decent.
Global Styles
First, we are going to add some global styles to our styles.scss
file. Styles
we add here will apply to our entire application.
:root { --color-primary: #32db64; --color-secondary: #2dd36f; --color-dark: #1c1d3b; --color-light: #ffffff;}
html { height: 100%;}
body { margin: 0; height: 100%; background: var(--color-dark); font-family: "Roboto", sans-serif;}
header { display: flex; justify-content: space-between; align-items: center; padding: 2rem; background: var(--color-light);}
section { height: 100%; padding: 2rem; background: var(--color-primary);}
button { height: 30px;}
.dialog-container { position: absolute !important; background: var(--color-dark); top: 0; bottom: 0; right: 0; left: 0;}
Thanks for checking out the preview of this lesson!
You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).