_layout.scss 1.8 KB

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