_layout.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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. position: relative;
  13. & .content-wrapper {
  14. min-height: calc(100vh - 112px);
  15. }
  16. .layout-boxed & {
  17. @include box-shadow(0 0 10px rgba(0, 0, 0, .3));
  18. &,
  19. &:before {
  20. margin: 0 auto;
  21. max-width: $boxed-layout-max-width;
  22. }
  23. & .main-sidebar {
  24. left: inherit;
  25. }
  26. }
  27. .layout-top-nav & {
  28. margin-left: 0;
  29. & .main-sidebar {
  30. bottom: inherit;
  31. height: inherit;
  32. }
  33. .brand-image {
  34. height: 33px;
  35. }
  36. & .main-sidebar{
  37. display: none;
  38. }
  39. & .content-wrapper,
  40. & .main-header,
  41. & .main-footer {
  42. margin-left: 0;
  43. }
  44. }
  45. }
  46. .content-wrapper,
  47. .main-footer,
  48. .main-header {
  49. @include media-breakpoint-up(md) {
  50. @include transition(margin-left $transition-speed $transition-fn);
  51. margin-left: $sidebar-width;
  52. z-index: 3000;
  53. .sidebar-collapse & {
  54. margin-left: 0;
  55. }
  56. }
  57. @include media-breakpoint-down(md) {
  58. &,
  59. &:before {
  60. margin-left: 0;
  61. }
  62. }
  63. }
  64. .content-wrapper {
  65. background: $main-bg;
  66. > .content {
  67. padding: $content-padding-y $content-padding-x;
  68. }
  69. }
  70. .main-sidebar {
  71. position: fixed;
  72. top: 0;
  73. left: 0;
  74. bottom: 0;
  75. &,
  76. &:before {
  77. $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
  78. @include transition($local-sidebar-transition);
  79. width: $sidebar-width;
  80. }
  81. .sidebar-collapse & {
  82. &,
  83. &:before {
  84. margin-left: -$sidebar-width;
  85. }
  86. }
  87. @include media-breakpoint-down(md) {
  88. &,
  89. &:before {
  90. box-shadow: none!important;
  91. margin-left: -$sidebar-width;
  92. }
  93. .sidebar-open & {
  94. &,
  95. &:before {
  96. margin-left: 0;
  97. }
  98. }
  99. }
  100. }
  101. .main-footer {
  102. padding: $main-footer-padding;
  103. color: #555;
  104. border-top: $main-footer-border-top;
  105. background: $main-footer-bg;
  106. }
  107. .content-header {
  108. padding: 15px $content-padding-x;
  109. h1 {
  110. font-size: 1.8rem;
  111. margin: 0;
  112. }
  113. .breadcrumb {
  114. margin-bottom: 0;
  115. padding: 0;
  116. background: transparent;
  117. line-height: 1.8rem;
  118. }
  119. }
  120. .hold-transition {
  121. .content-wrapper,
  122. .main-header,
  123. .main-footer {
  124. transition: none!important;
  125. }
  126. }