sidenav.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. body {
  2. position: relative; /* For scrollspy */
  3. }
  4. /* By default it's not affixed in mobile views, so undo that */
  5. .bs-sidebar.affix {
  6. position: static;
  7. }
  8. @media (min-width: 768px) {
  9. .bs-sidebar {
  10. padding-left: 20px;
  11. }
  12. }
  13. /* First level of nav */
  14. .bs-sidenav {
  15. margin-top: 20px;
  16. margin-bottom: 20px;
  17. }
  18. /* All levels of nav */
  19. .bs-sidebar .nav > li > a {
  20. display: block;
  21. padding: 4px 20px;
  22. font-size: 13px;
  23. font-weight: 500;
  24. color: #999;
  25. }
  26. .bs-sidebar .nav > li > a:hover,
  27. .bs-sidebar .nav > li > a:focus {
  28. padding-left: 19px;
  29. color: #6D6D6D;
  30. text-decoration: none;
  31. background-color: transparent;
  32. border-left: 1px solid #6D6D6D;
  33. }
  34. .bs-sidebar .nav > .active > a,
  35. .bs-sidebar .nav > .active:hover > a,
  36. .bs-sidebar .nav > .active:focus > a {
  37. padding-left: 18px;
  38. font-weight: bold;
  39. color: #6D6D6D;
  40. background-color: transparent;
  41. border-left: 2px solid #6D6D6D;
  42. }
  43. /* Nav: second level (shown on .active) */
  44. .bs-sidebar .nav .nav {
  45. display: none; /* Hide by default, but at >768px, show it */
  46. padding-bottom: 10px;
  47. }
  48. .bs-sidebar .nav .nav > li > a {
  49. padding-top: 1px;
  50. padding-bottom: 1px;
  51. padding-left: 30px;
  52. font-size: 12px;
  53. font-weight: normal;
  54. }
  55. .bs-sidebar .nav .nav > li > a:hover,
  56. .bs-sidebar .nav .nav > li > a:focus {
  57. padding-left: 29px;
  58. }
  59. .bs-sidebar .nav .nav > .active > a,
  60. .bs-sidebar .nav .nav > .active:hover > a,
  61. .bs-sidebar .nav .nav > .active:focus > a {
  62. padding-left: 28px;
  63. font-weight: 500;
  64. }
  65. /* Back to top (hidden on mobile) */
  66. .back-to-top {
  67. display: none;
  68. padding: 4px 10px;
  69. margin-top: 10px;
  70. margin-left: 10px;
  71. font-size: 12px;
  72. font-weight: 500;
  73. color: #999;
  74. }
  75. .back-to-top:hover {
  76. color: #6D6D6D;
  77. text-decoration: none;
  78. }
  79. @media (min-width: 768px) {
  80. .back-to-top {
  81. display: block;
  82. }
  83. }
  84. /* Show and affix the side nav when space allows it */
  85. @media (min-width: 992px) {
  86. .bs-sidebar .nav > .active > ul {
  87. display: block;
  88. }
  89. /* Widen the fixed sidebar */
  90. .bs-sidebar.affix,
  91. .bs-sidebar.affix-bottom {
  92. width: 213px;
  93. }
  94. .bs-sidebar.affix {
  95. position: fixed; /* Undo the static from mobile first approach */
  96. top: 20px;
  97. }
  98. .bs-sidebar.affix-bottom {
  99. position: absolute; /* Undo the static from mobile first approach */
  100. }
  101. .bs-sidebar.affix-bottom .bs-sidenav,
  102. .bs-sidebar.affix .bs-sidenav {
  103. margin-top: 0;
  104. margin-bottom: 0;
  105. }
  106. }
  107. @media (min-width: 1200px) {
  108. /* Widen the fixed sidebar again */
  109. .bs-sidebar.affix-bottom,
  110. .bs-sidebar.affix {
  111. width: 263px;
  112. }
  113. }