blob: 5c112b08ddbfd04cd0526ebef95c310e3e64c30f [file] [log] [blame]
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
@import url(~elements-sk/colors.css);
/*
To style app-sk you can change the values of the CSS variables:
app-sk {
--header-background-color: #5ba17f;
--sidebar-width: 250px;
}
Note that app-sk is more specific than :root so the above variables will
over-ride the defaults regardless of the processing order of the CSS files.
*/
:root {
--sidebar-width: 200px;
--sidebar-horiz-padding: 5px;
--sidebar-background-color: var(--on-primary, --white);
--header-height: 50px;
--header-background-color: var(--primary, --blue);
--header-font-color: var(--on-primary, --white);
--content-horiz-padding: 5px;
--footer-height: 0;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
app-sk {
color: var(--on-background, --black);
background: var(--background, --white);
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-rows: var(--header-height) 1fr var(--footer-height);
}
app-sk > {
header {
background: var(--header-background-color);
padding: 0 0.5em;
display: flex;
flex-flow: row;
justify-content: flex-start;
color: var(--header-font-color);
grid-column: 1 / span 2;
grid-row: 1;
}
header > * {
margin: auto; /* Center things vertically */
}
aside {
border-right: 1px solid var(--on-surface, #ddd);
padding: 0 var(--sidebar-horiz-padding);
z-index: 2;
background-color: var(--sidebar-background-color);
grid-column: 1;
grid-row: 2;
}
main {
padding: 0 var(--content-horiz-padding);
overflow-y: auto;
grid-row: 2;
}
footer {
grid-area: footer;
grid-column: 1 / span 2;
grid-row: 3;
}
@media screen and (min-width: 480px) {
header > .toggle-button {
display: none;
}
main {
grid-column: 2;
}
}
@media screen and (max-width: 480px) {
header > .toggle-button {
display: block;
background-color: transparent;
border: none;
}
/* Hide the sidebar just off screen. Then, when it is toggled on and off,
the transitions will make it slide between the two states. */
aside {
position: relative;
left: calc(-var(--sidebar-width) - 2 * var(--sidebar-horiz-padding));
transition: 0.5s;
}
aside.shown {
left: 0;
transition: 0.5s;
}
main {
grid-column: 1 / span 2;
}
}
}
app-sk {
.spacer {
flex-grow: 1;
}
}