_control-sidebar.scss 2.3 KB

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