dashboard.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /*
  2. * Base structure
  3. */
  4. /* Move down content because we have a fixed navbar that is 50px tall */
  5. body {
  6. padding-top: 50px;
  7. }
  8. /*
  9. * Global add-ons
  10. */
  11. .sub-header {
  12. padding-bottom: 10px;
  13. border-bottom: 1px solid #eee;
  14. }
  15. /*
  16. * Top navigation
  17. * Hide default border to remove 1px line.
  18. */
  19. .navbar-fixed-top {
  20. border: 0;
  21. }
  22. /*
  23. * Sidebar
  24. */
  25. /* Hide for mobile, show later */
  26. .sidebar {
  27. display: none;
  28. }
  29. @media (min-width: 768px) {
  30. .sidebar {
  31. position: fixed;
  32. top: 35px;
  33. bottom: 0;
  34. left: 0;
  35. z-index: 1000;
  36. display: block;
  37. padding: 20px;
  38. overflow-x: hidden;
  39. overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  40. background-color: #f5f5f5;
  41. border-right: 1px solid #eee;
  42. }
  43. }
  44. /* Sidebar navigation */
  45. .nav-sidebar {
  46. margin-right: -21px; /* 20px padding + 1px border */
  47. margin-bottom: 20px;
  48. margin-left: -20px;
  49. }
  50. .nav-sidebar > li > a {
  51. padding-right: 20px;
  52. padding-left: 20px;
  53. }
  54. .nav-sidebar > .active > a,
  55. .nav-sidebar > .active > a:hover,
  56. .nav-sidebar > .active > a:focus {
  57. color: #fff;
  58. background-color: #428bca;
  59. }
  60. /*
  61. * Main content
  62. */
  63. .main {
  64. padding: 20px;
  65. }
  66. @media (min-width: 768px) {
  67. .main {
  68. padding-right: 40px;
  69. padding-left: 40px;
  70. }
  71. }
  72. .main .page-header {
  73. margin-top: 0;
  74. }
  75. /*
  76. * Placeholder dashboard ideas
  77. */
  78. .placeholders {
  79. margin-bottom: 30px;
  80. text-align: center;
  81. }
  82. .placeholders h4 {
  83. margin-bottom: 0;
  84. }
  85. .placeholder {
  86. margin-bottom: 20px;
  87. }
  88. .placeholder img {
  89. display: inline-block;
  90. border-radius: 50%;
  91. }