_control-sidebar.scss 2.2 KB

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