| @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(--white); |
| |
| --header-height: 50px; |
| --header-background-color: var(--blue); |
| --header-font-color: var(--white); |
| |
| --content-horiz-padding: 5px; |
| |
| --footer-height: 0; |
| } |
| |
| body { |
| margin: 0; |
| padding: 0; |
| font-family: 'Roboto', sans-serif; |
| } |
| |
| app-sk { |
| color: var(--black); |
| background: var(--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 .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 #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; |
| 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; |
| } |
| } |