_layout.scss 2.3 KB
Newer Older
A
Abdullah Almsaeed 已提交
1 2 3 4
/*
 * Core: General Layout Style
 * -------------------------
 */
A
Abdullah Almsaeed 已提交
5 6 7
html,
body,
.wrapper {
A
Abdullah Almsaeed 已提交
8
  min-height: 100%;
A
Abdullah Almsaeed 已提交
9 10 11 12
  overflow-x: hidden;
}

.wrapper {
13 14
  position: relative;

R
REJack 已提交
15 16 17 18
  & .content-wrapper {
    min-height: calc(100vh - 112px);
  }

A
Abdullah Almsaeed 已提交
19
  .layout-boxed & {
A
Abdullah Almsaeed 已提交
20 21
    @include box-shadow(0 0 10px rgba(0, 0, 0, .3));

A
Abdullah Almsaeed 已提交
22 23 24 25 26
    &,
    &:before {
      margin: 0 auto;
      max-width: $boxed-layout-max-width;
    }
R
REJack 已提交
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

    & .main-sidebar {
      left: inherit;
    }
  }

  .layout-top-nav & {
    margin-left: 0;


    & .main-sidebar {
      bottom: inherit;
      height: inherit;
    }

    .brand-image {
      height: 33px;
    }

    & .main-sidebar{
      display: none;
    }

    & .content-wrapper,
    & .main-header,
    & .main-footer {
      margin-left: 0;
    }
A
Abdullah Almsaeed 已提交
55 56 57 58
  }
}

.content-wrapper,
A
Abdullah Almsaeed 已提交
59 60
.main-footer,
.main-header {
A
Abdullah Almsaeed 已提交
61
  @include media-breakpoint-up(md) {
A
Abdullah Almsaeed 已提交
62 63
    @include transition(margin-left $transition-speed $transition-fn);

A
Abdullah Almsaeed 已提交
64 65
    margin-left: $sidebar-width;
    z-index: 3000;
66

A
Abdullah Almsaeed 已提交
67 68 69
    .sidebar-collapse & {
      margin-left: 0;
    }
A
Abdullah Almsaeed 已提交
70
  }
71

A
Abdullah Almsaeed 已提交
72
  @include media-breakpoint-down(md) {
A
Abdullah Almsaeed 已提交
73 74 75 76 77
    &,
    &:before {
      margin-left: 0;
    }
  }
A
Abdullah Almsaeed 已提交
78 79
}

A
Abdullah Almsaeed 已提交
80 81
.content-wrapper {
  background: $main-bg;
A
Abdullah Almsaeed 已提交
82

A
Abdullah Almsaeed 已提交
83
  > .content {
A
Abdullah Almsaeed 已提交
84
    padding: $content-padding-y $content-padding-x;
A
Abdullah Almsaeed 已提交
85 86 87
  }
}

A
Abdullah Almsaeed 已提交
88
.main-sidebar {
A
Abdullah Almsaeed 已提交
89 90 91 92
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
A
Abdullah Almsaeed 已提交
93 94 95

  &,
  &:before {
96 97
    $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
    @include transition($local-sidebar-transition);
A
Abdullah Almsaeed 已提交
98 99 100
    width: $sidebar-width;
  }

A
Abdullah Almsaeed 已提交
101 102 103 104 105 106
  .sidebar-collapse & {
    &,
    &:before {
      margin-left: -$sidebar-width;
    }
  }
A
Abdullah Almsaeed 已提交
107

108
  @include media-breakpoint-down(md) {
A
Abdullah Almsaeed 已提交
109 110
    &,
    &:before {
A
Abdullah Almsaeed 已提交
111
      box-shadow: none!important;
A
Abdullah Almsaeed 已提交
112 113
      margin-left: -$sidebar-width;
    }
A
Abdullah Almsaeed 已提交
114 115 116 117 118 119 120

    .sidebar-open & {
      &,
      &:before {
        margin-left: 0;
      }
    }
A
Abdullah Almsaeed 已提交
121
  }
A
Abdullah Almsaeed 已提交
122 123
}

A
Abdullah Almsaeed 已提交
124 125 126 127
.main-footer {
  padding: $main-footer-padding;
  color: #555;
  border-top: $main-footer-border-top;
A
Abdullah Almsaeed 已提交
128
  background: $main-footer-bg;
A
Abdullah Almsaeed 已提交
129 130
}

A
Abdullah Almsaeed 已提交
131
.content-header {
A
Abdullah Almsaeed 已提交
132 133
  padding: 15px $content-padding-x;

A
Abdullah Almsaeed 已提交
134 135 136
  h1 {
    font-size: 1.8rem;
    margin: 0;
A
Abdullah Almsaeed 已提交
137
  }
A
Abdullah Almsaeed 已提交
138 139 140 141 142 143
  .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    line-height: 1.8rem;
  }
A
Abdullah Almsaeed 已提交
144 145 146 147 148 149 150 151 152
}

.hold-transition {
  .content-wrapper,
  .main-header,
  .main-footer {
    transition: none!important;
  }
}