_control-sidebar.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. //
  2. // Component: Control Sidebar
  3. //
  4. html.control-sidebar-animate {
  5. overflow-x: hidden;
  6. }
  7. .control-sidebar {
  8. bottom: $main-footer-height;
  9. position: absolute;
  10. top: $main-header-height;
  11. z-index: $zindex-control-sidebar;
  12. &,
  13. &::before {
  14. bottom: $main-footer-height;
  15. display: none;
  16. right: -$control-sidebar-width;
  17. width: $control-sidebar-width;
  18. @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
  19. }
  20. &::before {
  21. content: '';
  22. display: block;
  23. position: fixed;
  24. top: 0;
  25. z-index: -1;
  26. }
  27. }
  28. body.text-sm {
  29. .control-sidebar {
  30. bottom: $main-footer-height-sm;
  31. top: $main-header-height-sm;
  32. }
  33. }
  34. .main-header.text-sm ~ .control-sidebar {
  35. top: $main-header-height-sm;
  36. }
  37. .main-footer.text-sm ~ .control-sidebar {
  38. bottom: $main-footer-height-sm;
  39. }
  40. .control-sidebar-push-slide {
  41. .content-wrapper,
  42. .main-footer {
  43. @include transition(margin-right $transition-speed $transition-fn);
  44. }
  45. }
  46. // Control sidebar open state
  47. .control-sidebar-open {
  48. .control-sidebar {
  49. display: block;
  50. &,
  51. &::before {
  52. right: 0;
  53. }
  54. }
  55. &.control-sidebar-push,
  56. &.control-sidebar-push-slide {
  57. .content-wrapper,
  58. .main-footer {
  59. margin-right: $control-sidebar-width;
  60. }
  61. }
  62. }
  63. // Control sidebar slide over content state
  64. .control-sidebar-slide-open {
  65. .control-sidebar {
  66. display: block;
  67. &,
  68. &::before {
  69. right: 0;
  70. @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
  71. }
  72. }
  73. &.control-sidebar-push,
  74. &.control-sidebar-push-slide {
  75. .content-wrapper,
  76. .main-footer {
  77. margin-right: $control-sidebar-width;
  78. }
  79. }
  80. }
  81. // Dark skin
  82. .control-sidebar-dark {
  83. &,
  84. a,
  85. .nav-link {
  86. color: $sidebar-dark-color;
  87. }
  88. // Background
  89. & {
  90. background: $sidebar-dark-bg;
  91. }
  92. a:hover {
  93. color: $sidebar-dark-hover-color;
  94. }
  95. // Headers and labels
  96. h1,
  97. h2,
  98. h3,
  99. h4,
  100. h5,
  101. h6,
  102. label {
  103. color: $sidebar-dark-hover-color;
  104. }
  105. // Tabs
  106. .nav-tabs {
  107. background-color: $sidebar-dark-hover-bg;
  108. border-bottom: 0;
  109. margin-bottom: 5px;
  110. .nav-item {
  111. margin: 0;
  112. }
  113. .nav-link {
  114. border-radius: 0;
  115. padding: 10px 20px;
  116. position: relative;
  117. text-align: center;
  118. &,
  119. &:hover,
  120. &:active,
  121. &:focus,
  122. &.active {
  123. border: 0;
  124. }
  125. &:hover,
  126. &:active,
  127. &:focus,
  128. &.active {
  129. border-bottom-color: transparent;
  130. border-left-color: transparent;
  131. border-top-color: transparent;
  132. color: $sidebar-dark-hover-color;
  133. }
  134. &.active {
  135. background-color: $sidebar-dark-bg;
  136. }
  137. }
  138. }
  139. .tab-pane {
  140. padding: 10px 15px;
  141. }
  142. }
  143. // Light skin
  144. .control-sidebar-light {
  145. color: lighten($sidebar-light-color, 10%);
  146. // Background
  147. & {
  148. background: $sidebar-light-bg;
  149. border-left: $main-header-bottom-border;
  150. }
  151. }