Created
May 31, 2016 15:27
-
-
Save rmgimenez/07fd6a02c26fdf5e7febcba178ec78ec to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Base structure | |
*/ | |
/* Move down content because we have a fixed navbar that is 50px tall */ | |
body { | |
padding-top: 50px; | |
} | |
/* | |
* Global add-ons | |
*/ | |
.sub-header { | |
padding-bottom: 10px; | |
border-bottom: 1px solid #eee; | |
} | |
/* | |
* Top navigation | |
* Hide default border to remove 1px line. | |
*/ | |
.navbar-fixed-top { | |
border: 0; | |
} | |
/* | |
* Sidebar | |
*/ | |
/* Hide for mobile, show later */ | |
.sidebar { | |
display: none; | |
} | |
@media (min-width: 768px) { | |
.sidebar { | |
position: fixed; | |
top: 51px; | |
bottom: 0; | |
left: 0; | |
z-index: 1000; | |
display: block; | |
padding: 20px; | |
overflow-x: hidden; | |
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ | |
background-color: #f5f5f5; | |
border-right: 1px solid #eee; | |
} | |
} | |
/* Sidebar navigation */ | |
.nav-sidebar { | |
margin-right: -21px; /* 20px padding + 1px border */ | |
margin-bottom: 20px; | |
margin-left: -20px; | |
} | |
.nav-sidebar > li > a { | |
padding-right: 20px; | |
padding-left: 20px; | |
} | |
.nav-sidebar > .active > a, | |
.nav-sidebar > .active > a:hover, | |
.nav-sidebar > .active > a:focus { | |
color: #fff; | |
background-color: #428bca; | |
} | |
/* | |
* Main content | |
*/ | |
.main { | |
padding: 20px; | |
} | |
@media (min-width: 768px) { | |
.main { | |
padding-right: 40px; | |
padding-left: 40px; | |
} | |
} | |
.main .page-header { | |
margin-top: 0; | |
} | |
/* | |
* Placeholder dashboard ideas | |
*/ | |
.placeholders { | |
margin-bottom: 30px; | |
text-align: center; | |
} | |
.placeholders h4 { | |
margin-bottom: 0; | |
} | |
.placeholder { | |
margin-bottom: 20px; | |
} | |
.placeholder img { | |
display: inline-block; | |
border-radius: 50%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment