_control-sidebar.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /*
  2. * Component: Control sidebar. By default, this is the right sidebar.
  3. */
  4. .control-sidebar {
  5. position: absolute;
  6. z-index: 830;
  7. &,
  8. &:before {
  9. width: $control-sidebar-width;
  10. top: $main-header-height;
  11. right: -$control-sidebar-width;
  12. bottom: 0;
  13. @include transition(right $transition-speed $transition-fn);
  14. }
  15. &:before {
  16. display: block;
  17. position: fixed;
  18. content: " ";
  19. z-index: -1;
  20. }
  21. }
  22. // Control sidebar open state
  23. .control-sidebar-open {
  24. .control-sidebar {
  25. &,
  26. &:before {
  27. right: 0;
  28. }
  29. }
  30. .content-wrapper,
  31. .main-footer {
  32. margin-right: $control-sidebar-width;
  33. }
  34. }
  35. // Control sidebar slide over content state
  36. .control-sidebar-slide-open {
  37. .control-sidebar {
  38. &,
  39. &:before {
  40. right: 0;
  41. }
  42. }
  43. }
  44. // Dark skin
  45. .control-sidebar-dark {
  46. &,
  47. a,
  48. .nav-link {
  49. color: $sidebar-dark-color;
  50. }
  51. // Background
  52. &,
  53. &:before {
  54. background: $sidebar-dark-bg;
  55. }
  56. a:hover {
  57. color: $sidebar-dark-hover-color;
  58. }
  59. // Headers
  60. h1,
  61. h2,
  62. h3,
  63. h4,
  64. h5,
  65. h6,
  66. label {
  67. color: $sidebar-dark-hover-color;
  68. }
  69. // Tabs
  70. .nav-tabs {
  71. border-bottom: 0;
  72. background-color: $sidebar-dark-submenu-bg;
  73. margin-bottom: 5px;
  74. .nav-item {
  75. margin: 0;
  76. }
  77. .nav-link {
  78. position: relative;
  79. border-radius: 0;
  80. text-align: center;
  81. padding: 10px 20px;
  82. &,
  83. &:hover,
  84. &:active,
  85. &:focus,
  86. &.active {
  87. border: 0;
  88. }
  89. &:hover,
  90. &:active,
  91. &:focus,
  92. &.active {
  93. border-left-color: transparent;
  94. border-bottom-color: transparent;
  95. border-top-color: transparent;
  96. color: $sidebar-dark-hover-color;
  97. }
  98. &.active {
  99. background-color: $sidebar-dark-bg;
  100. }
  101. }
  102. }
  103. .tab-pane {
  104. padding: 10px 15px;
  105. }
  106. }
  107. // Light skin
  108. .control-sidebar-light {
  109. color: lighten($sidebar-light-color, 10%);
  110. // Background
  111. &,
  112. &:before {
  113. background: $sidebar-light-bg;
  114. border-left: 1px solid $gray;
  115. }
  116. }