2016-12-16 02:19:34 -05:00
/* Adapted from https://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css and http://v4-alpha.getbootstrap.com/examples/offcanvas/offcanvas.css */
2016-12-11 23:33:54 -05:00
2016-12-16 02:19:34 -05:00
html ,
body {
/* Prevent scroll on narrow devices */
overflow-x : hidden ;
}
2016-12-11 23:33:54 -05:00
body {
2016-12-13 01:53:31 -05:00
/* Required for Scrollspy */
2016-12-11 23:33:54 -05:00
position : relative ;
}
2016-12-16 02:19:34 -05:00
@ media screen and ( max-width : 991px ) {
body {
2016-12-18 03:07:10 -05:00
padding-top : 3em ;
2016-12-16 02:19:34 -05:00
}
}
2016-12-16 02:58:59 -05:00
svg {
width : auto ;
height : 100 % ;
}
2016-12-16 02:18:40 -05:00
/ *
* Header
* /
. navbar-brand {
height : 2em ;
}
2016-12-16 02:58:59 -05:00
2016-12-16 02:18:40 -05:00
. navbar-dark path {
fill : # f5f5f5 ;
}
2016-12-16 02:47:53 -05:00
/* Adapted from https://codepen.io/GeoffreyBooth/pen/QGzwYK */
2016-12-16 03:05:24 -05:00
. navbar-menu-button ,
. navbar-menu-button : focus {
2016-12-16 02:47:53 -05:00
float : right ;
width : 2 . 3em ;
padding : 0 ;
margin-top : 0 . 25em ;
2016-12-16 03:05:24 -05:00
background : transparent ;
border : 0 ;
outline : 0 ;
2016-12-16 02:47:53 -05:00
}
. menu-button {
width : 2em ;
height : 1 . 5em ;
position : relative ;
transform : rotate ( 0deg ) ;
transition : . 25s ease-in-out ;
cursor : pointer ;
}
. menu-button span {
display : block ;
position : absolute ;
height : 4px ;
width : 100 % ;
background : # f5f5f5 ;
border-radius : 4px ;
opacity : 1 ;
left : 0 ;
transform : rotate ( 0deg ) ;
transition : . 25s ease-in-out ;
}
. menu-button span : nth-child ( 1 ) {
top : 0 ;
}
. menu-button span : nth-child ( 2 ) ,
. menu-button span : nth-child ( 3 ) {
top : 0 . 7em ;
}
. menu-button span : nth-child ( 4 ) {
top : 1 . 4em ;
}
. menu-button . active span : nth-child ( 1 ) {
top : 0 . 7em ;
width : 0 % ;
left : 50 % ;
}
. menu-button . active span : nth-child ( 2 ) {
transform : rotate ( 45deg ) ;
}
. menu-button . active span : nth-child ( 3 ) {
transform : rotate ( -45deg ) ;
}
. menu-button . active span : nth-child ( 4 ) {
top : 0 . 7em ;
width : 0 % ;
left : 50 % ;
2016-12-16 02:18:40 -05:00
}
2016-12-11 23:33:54 -05:00
/ *
* Sidebar
* /
. sidebar {
2016-12-16 02:19:34 -05:00
background-color : # f5f5f5 ;
border-right : 1px solid # eee ;
position : fixed ;
top : 0 ;
bottom : 0 ;
left : 0 ;
z-index : 1000 ;
display : block ;
padding-top : 1 . 3em ;
padding-left : 1 . 6em ;
padding-right : 1 . 6em ;
overflow-x : hidden ;
overflow-y : auto ; /* Scrollable contents if viewport is shorter than content. */
2016-12-18 03:07:10 -05:00
line-height : 2 ;
2016-12-11 23:33:54 -05:00
}
2016-12-16 03:17:11 -05:00
@ media screen and ( max-width : 991px ) {
. sidebar . contents {
2016-12-18 03:07:10 -05:00
position : fixed ;
2016-12-16 03:17:11 -05:00
}
}
2016-12-11 23:33:54 -05:00
. nav-link . active ,
. nav-link . active , a : hover ,
. nav-link . active , a : focus {
color : indianred ;
}
2016-12-13 01:53:31 -05:00
2016-12-11 23:33:54 -05:00
. nav . nav {
margin-left : 1em ;
}
2016-12-13 01:53:31 -05:00
2016-12-16 02:19:34 -05:00
/ *
* Off Canvas
* /
@ media screen and ( max-width : 991px ) {
. row-offcanvas {
2016-12-18 03:07:10 -05:00
position : relative ;
transition : all . 25s ease-in-out ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-left {
2016-12-18 03:07:10 -05:00
left : 0 ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-left . sidebar-offcanvas {
2016-12-18 03:07:10 -05:00
left : -66 . 667 % ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-right . active {
2016-12-18 03:07:10 -05:00
right : calc ( 66 . 667 % + 1em ) ;
2016-12-16 02:19:34 -05:00
}
. row-offcanvas-left . active {
2016-12-18 03:07:10 -05:00
left : calc ( 66 . 667 % + 1em ) ;
2016-12-16 02:19:34 -05:00
}
. sidebar-offcanvas {
2016-12-18 03:07:10 -05:00
position : absolute ;
top : 0 ;
width : 66 . 667 % ;
2016-12-16 02:19:34 -05:00
}
}
2016-12-11 23:33:54 -05:00
/ *
* Main content
* /
. main {
padding : 1 . 3em ;
}
2016-12-16 02:19:34 -05:00
@ media ( min-width : 992px ) {
2016-12-11 23:33:54 -05:00
. main {
2016-12-18 03:07:10 -05:00
padding-right : 2em ;
padding-left : 2em ;
2016-12-11 23:33:54 -05:00
}
}
2016-12-13 01:53:31 -05:00
2016-12-16 02:58:59 -05:00
. title-logo {
width : 30em ;
margin : 3em auto ;
}
. title-logo path {
fill : # 28334C ;
}
2016-12-18 03:07:10 -05:00
p , . code-example {
margin-bottom : 1 . 3em ;
}
h2 , h3 {
margin-top : 1 . 3em ;
margin-bottom : 0 . 6em ;
}
2016-12-13 01:53:31 -05:00
/ *
* Code examples
* /
textarea {
position : absolute ;
left : -99999px ; /* Hide off canvas, while still remaining visible */
}
. CodeMirror {
/* https://codemirror.net/demo/resize.html */
height : auto ;
2016-12-14 02:13:38 -05:00
background : transparent ;
2016-12-18 03:07:10 -05:00
line-height : 1 . 25 ;
2016-12-14 02:13:38 -05:00
}
. code-example {
background-color : # f5f5f5 ;
padding : 1em ;
border-radius : 0 . 3em ;
2016-12-14 02:49:26 -05:00
margin-bottom : 1em ;
2016-12-13 01:53:31 -05:00
}