122 lines
2.8 KiB
CSS
122 lines
2.8 KiB
CSS
/*
|
|
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
|
* listed below.
|
|
*
|
|
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
|
|
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
|
*
|
|
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
|
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
|
* files in this directory. Styles in this file should be added after the last require_* statement.
|
|
* It is generally better to create a new file per style scope.
|
|
*
|
|
*= require_tree .
|
|
*= require_self
|
|
*/
|
|
|
|
.dark-primary-color { background: #303F9F; }
|
|
.default-primary-color { background: #3F51B5; }
|
|
.light-primary-color { background: #C5CAE9; }
|
|
.text-primary-color { color: #FFFFFF; }
|
|
.accent-color { background: #009688; }
|
|
.primary-text-color { color: #212121; }
|
|
.secondary-text-color { color: #757575; }
|
|
.divider-color { border-color: #BDBDBD; }
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
margin: 8px;
|
|
}
|
|
|
|
nav {
|
|
background-color: #3F51B5;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: max-content max-content auto;
|
|
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.20);
|
|
}
|
|
|
|
nav a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-family: Helvetica, sans-serif;
|
|
font-size: 18px;
|
|
transition: .3s all ease-in-out;
|
|
}
|
|
|
|
nav a:hover {
|
|
background-color: #009688;
|
|
}
|
|
|
|
#nav-toggle {
|
|
display: none;
|
|
}
|
|
|
|
#nav-toggle:checked ~ .left-menu {
|
|
display: grid;
|
|
grid-row: 2;
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.burger-menu {
|
|
display: inline-block;
|
|
grid-column: 1;
|
|
align-self: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.left-menu {
|
|
display: none;
|
|
grid-column: 1;
|
|
align-self: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.left-menu a {
|
|
padding: 15px 0 10px 1rem;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
letter-spacing: .5px;
|
|
}
|
|
|
|
.right-menu {
|
|
display: inline-block;
|
|
grid-column: 3;
|
|
text-align: right;
|
|
font-size: 12px;
|
|
align-self: center;
|
|
}
|
|
|
|
.right-menu a {
|
|
padding: 1.4rem 1rem 1.35rem 1rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.logo {
|
|
grid-column: 2;
|
|
padding: 1rem 1rem 1rem 0;
|
|
font-family: Helvetica, sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
align-self: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.logo:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
|
|
display: block;
|
|
margin: 0 0 1rem 0;
|
|
width: 100%;
|
|
max-width: 340px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 16px;
|
|
border: 1px solid #bbb;
|
|
} |