_layout.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /*
  2. * Core: General Layout Style
  3. * -------------------------
  4. */
  5. html,
  6. body,
  7. .wrapper {
  8. min-height: 100%;
  9. overflow-x: hidden;
  10. }
  11. .wrapper {
  12. overflow: hidden;
  13. position: relative;
  14. & .content-wrapper {
  15. min-height: calc(100vh - 112px);
  16. }
  17. .layout-boxed & {
  18. @include box-shadow(0 0 10px rgba(0, 0, 0, .3));
  19. &,
  20. &:before {
  21. margin: 0 auto;
  22. max-width: $boxed-layout-max-width;
  23. }
  24. & .main-sidebar {
  25. left: inherit;
  26. }
  27. }
  28. .layout-navbar-fixed & {
  29. .content-wrapper {
  30. margin-top: 57px;
  31. }
  32. .main-header {
  33. position: fixed;
  34. top: 0;
  35. right: 0;
  36. left: 0;
  37. }
  38. }
  39. .layout-footer-fixed & {
  40. .main-footer {
  41. position: fixed;
  42. bottom: 0;
  43. width: calc(100% - 250px);
  44. }
  45. }
  46. .layout-top-nav & {
  47. margin-left: 0;
  48. & .main-sidebar {
  49. bottom: inherit;
  50. height: inherit;
  51. }
  52. .brand-image {
  53. height: 33px;
  54. }
  55. & .main-sidebar{
  56. display: none;
  57. }
  58. & .content-wrapper,
  59. & .main-header,
  60. & .main-footer {
  61. margin-left: 0;
  62. }
  63. }
  64. }
  65. .content-wrapper,
  66. .main-footer,
  67. .main-header {
  68. @include media-breakpoint-up(sm) {
  69. @include transition(margin-left $transition-speed $transition-fn);
  70. margin-left: $sidebar-width;
  71. z-index: 3000;
  72. .sidebar-collapse & {
  73. margin-left: 0;
  74. }
  75. }
  76. @include media-breakpoint-down(sm) {
  77. &,
  78. &:before {
  79. margin-left: 0;
  80. }
  81. }
  82. }
  83. .content-wrapper {
  84. background: $main-bg;
  85. > .content {
  86. padding: $content-padding-y $content-padding-x;
  87. }
  88. }
  89. .main-sidebar {
  90. &,
  91. &:before {
  92. $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
  93. @include transition($local-sidebar-transition);
  94. width: $sidebar-width;
  95. }
  96. .sidebar-collapse & {
  97. &,
  98. &:before {
  99. margin-left: -$sidebar-width;
  100. }
  101. }
  102. @include media-breakpoint-down(sm) {
  103. &,
  104. &:before {
  105. box-shadow: none!important;
  106. margin-left: -$sidebar-width;
  107. }
  108. .sidebar-open & {
  109. &,
  110. &:before {
  111. margin-left: 0;
  112. }
  113. }
  114. }
  115. }
  116. :not(.layout-fixed) {
  117. .main-sidebar {
  118. position: absolute;
  119. top: 0;
  120. height: inherit;
  121. min-height: 100%;
  122. }
  123. }
  124. .layout-navbar-fixed {
  125. &.sidebar-collapse {
  126. .brand-link {
  127. $local-sidebar-transition: width $transition-speed $transition-fn;
  128. @include transition($local-sidebar-transition);
  129. width: $sidebar-mini-width;
  130. height: 57px;
  131. }
  132. .main-sidebar:hover {
  133. .brand-link {
  134. width: $sidebar-width;
  135. }
  136. }
  137. }
  138. .sidebar {
  139. margin-top: 57px;
  140. }
  141. .brand-link {
  142. position: fixed;
  143. top: 0;
  144. z-index: $zindex-main-sidebar;
  145. width: $sidebar-width;
  146. }
  147. // Sidebar variants
  148. @each $name, $color in $theme-colors {
  149. .sidebar-dark-#{$name} .brand-link {
  150. background-color: $sidebar-dark-bg;
  151. }
  152. .sidebar-light-#{$name} .brand-link {
  153. background-color: $sidebar-light-bg;
  154. }
  155. }
  156. }
  157. .layout-fixed {
  158. .main-sidebar {
  159. height: 100vh;
  160. position: fixed;
  161. top: 0;
  162. left: 0;
  163. bottom: 0;
  164. float: none;
  165. }
  166. }
  167. .main-footer {
  168. padding: $main-footer-padding;
  169. color: #555;
  170. border-top: $main-footer-border-top;
  171. background: $main-footer-bg;
  172. }
  173. .content-header {
  174. padding: 15px $content-padding-x;
  175. h1 {
  176. font-size: 1.8rem;
  177. margin: 0;
  178. }
  179. .breadcrumb {
  180. margin-bottom: 0;
  181. padding: 0;
  182. background: transparent;
  183. line-height: 1.8rem;
  184. }
  185. }
  186. .hold-transition {
  187. .content-wrapper,
  188. .main-header,
  189. .main-footer {
  190. transition: none!important;
  191. }
  192. }