_control-sidebar.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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. background: $sidebar-dark-bg;
  84. &,
  85. a,
  86. .nav-link {
  87. color: $sidebar-dark-color;
  88. }
  89. a:hover {
  90. color: $sidebar-dark-hover-color;
  91. }
  92. // Headers and labels
  93. h1,
  94. h2,
  95. h3,
  96. h4,
  97. h5,
  98. h6,
  99. label {
  100. color: $sidebar-dark-hover-color;
  101. }
  102. // Tabs
  103. .nav-tabs {
  104. background-color: $sidebar-dark-hover-bg;
  105. border-bottom: 0;
  106. margin-bottom: 5px;
  107. .nav-item {
  108. margin: 0;
  109. }
  110. .nav-link {
  111. border-radius: 0;
  112. padding: 10px 20px;
  113. position: relative;
  114. text-align: center;
  115. &,
  116. &:hover,
  117. &:active,
  118. &:focus,
  119. &.active {
  120. border: 0;
  121. }
  122. &:hover,
  123. &:active,
  124. &:focus,
  125. &.active {
  126. border-bottom-color: transparent;
  127. border-left-color: transparent;
  128. border-top-color: transparent;
  129. color: $sidebar-dark-hover-color;
  130. }
  131. &.active {
  132. background-color: $sidebar-dark-bg;
  133. }
  134. }
  135. }
  136. .tab-pane {
  137. padding: 10px 15px;
  138. }
  139. }
  140. // Light skin
  141. .control-sidebar-light {
  142. color: lighten($sidebar-light-color, 10%);
  143. // Background
  144. background: $sidebar-light-bg;
  145. border-left: $main-header-bottom-border;
  146. }