sidebar.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /*!
  2. * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
  3. * Code licensed under the Apache License v2.0.
  4. * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  5. */
  6. /* Toggle Styles */
  7. #wrapper {
  8. padding-left: 0;
  9. -webkit-transition: all 0.5s ease;
  10. -moz-transition: all 0.5s ease;
  11. -o-transition: all 0.5s ease;
  12. transition: all 0.5s ease;
  13. }
  14. #wrapper.toggled {
  15. padding-left: 250px;
  16. }
  17. #sidebar-wrapper {
  18. z-index: 1;
  19. position: fixed;
  20. left: 250px;
  21. width: 0;
  22. height: 100%;
  23. margin-left: -250px;
  24. overflow-y: auto;
  25. background: #222222;
  26. -webkit-transition: all 0.5s ease;
  27. -moz-transition: all 0.5s ease;
  28. -o-transition: all 0.5s ease;
  29. transition: all 0.5s ease;
  30. }
  31. #wrapper.toggled #sidebar-wrapper {
  32. width: 250px;
  33. }
  34. #page-content-wrapper {
  35. width: 100%;
  36. position: absolute;
  37. padding: 3px;
  38. }
  39. #wrapper.toggled #page-content-wrapper {
  40. position: absolute;
  41. margin-right: -250px;
  42. }
  43. /* Sidebar Styles */
  44. .sidebar-nav {
  45. position: absolute;
  46. top: 0;
  47. width: 250px;
  48. margin: 0;
  49. padding: 0;
  50. list-style: none;
  51. }
  52. .sidebar-nav li {
  53. text-indent: 20px;
  54. line-height: 40px;
  55. }
  56. .sidebar-nav li.active {
  57. background-color: #999999;
  58. }
  59. .sidebar-nav li.active a{
  60. color: #333333;
  61. }
  62. .sidebar-nav li a {
  63. display: block;
  64. text-decoration: none;
  65. color: #999999;
  66. }
  67. .sidebar-nav li a:hover {
  68. text-decoration: none;
  69. color: #fff;
  70. background: rgba(255,255,255,0.2);
  71. }
  72. .sidebar-nav li a:active,
  73. .sidebar-nav li a:focus {
  74. text-decoration: none;
  75. }
  76. .sidebar-nav > .sidebar-brand {
  77. height: 65px;
  78. font-size: 18px;
  79. line-height: 60px;
  80. }
  81. .sidebar-nav > .sidebar-brand a {
  82. color: #999999;
  83. }
  84. .sidebar-nav > .sidebar-brand a:hover {
  85. color: #fff;
  86. background: none;
  87. }
  88. @media(min-width:768px) {
  89. #wrapper {
  90. padding-left: 250px;
  91. }
  92. #wrapper.toggled {
  93. padding-left: 0;
  94. }
  95. #sidebar-wrapper {
  96. width: 250px;
  97. }
  98. #wrapper.toggled #sidebar-wrapper {
  99. width: 0;
  100. }
  101. #page-content-wrapper {
  102. padding: 3px;
  103. position: relative;
  104. }
  105. #wrapper.toggled #page-content-wrapper {
  106. position: relative;
  107. margin-right: 0;
  108. }
  109. }