control-sidebar.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*
  2. * Component: Control sidebar. By deafult, this is the right sidebar.
  3. */
  4. .control-sidebar {
  5. position: absolute;
  6. top: @navbar-height;
  7. right: 0;
  8. width: @control-sidebar-width;
  9. z-index: 1010;
  10. background: @sidebar-dark-bg;
  11. color: @sidebar-dark-color;
  12. //Make it hide in small screens
  13. @media (max-width: @screen-sm) {
  14. .translate(@control-sidebar-width, 0);
  15. }
  16. //Tab panes
  17. > .tab-content {
  18. padding: 10px 15px;
  19. }
  20. }
  21. //Control sidebar tabs
  22. .control-sidebar-tabs {
  23. border-bottom: darken(@sidebar-dark-bg, 3%);
  24. > li {
  25. > a {
  26. .border-radius(0)!important;
  27. background: darken(@sidebar-dark-bg, 5%);
  28. color: @sidebar-dark-color;
  29. //Hover and active states
  30. &,
  31. &:hover {
  32. border-right: none;
  33. border-left: 1px solid darken(@sidebar-dark-bg, 7%)!important;
  34. border-bottom: 1px solid darken(@sidebar-dark-bg, 7%)!important;
  35. }
  36. &:hover,
  37. &:focus,
  38. &:active {
  39. border-top: none;
  40. background: darken(@sidebar-dark-bg, 3%);
  41. }
  42. .icon {
  43. font-size: 16px;
  44. }
  45. }
  46. //Active state
  47. &.active {
  48. > a {
  49. &,
  50. &:hover,
  51. &:focus,
  52. &:active {
  53. border-top: none!important;
  54. border-right: none!important;
  55. border-bottom: none!important;
  56. background: @sidebar-dark-bg;
  57. color: #fff;
  58. }
  59. }
  60. }
  61. }
  62. }
  63. //Headings in the sidebar content
  64. .control-sidebar-heading {
  65. color: #fff;
  66. }
  67. .content-wrapper,
  68. .right-side,
  69. .main-footer {
  70. //margin-right: @control-sidebar-width;
  71. @media (max-width: @screen-sm) {
  72. margin-right: 0;
  73. }
  74. }