core/layout/layout.scss

0001 // App
0002
0003 /*==============================================================
0004  For all pages
0005  ============================================================== */
0006
0007 #main-wrapper {
0008     width: 100%;
0009     overflow: hidden;
0010 }
0011
0012 .page-wrapper {
0013     background: $body-bg;
0014     position: relative;
0015 }
0016
0017 .page-wrapper>.container-fluid {
0018     padding: 25px;
0019     min-height: calc(100vh - 180px);
0020 }
0021
0022
0023 /*******************
0024  Footer
0025 *******************/
0026
0027 .footer {
0028     color: #58666e;
0029     padding: 20px 30px;
0030     font-weight: 300;
0031     background: #fff;
0032     a {
0033         color: #337ab7;
0034     }
0035 }
0036
0037 /*******************
0038  Vertical layout
0039 *******************/
0040
0041 #main-wrapper[data-layout="vertical"] {
0042     /*Vertical*/
0043     .topbar .top-navbar .navbar-header {
0044         //width: $sidebar-width-full;
0045     }
0046
0047     /*sidebar type*/
0048     &[data-sidebartype="full"] {
0049         .page-wrapper {
0050             margin-left: $sidebar-width-full;
0051         }
0052     }
0053 }
0054
0055 /*******************
0056  Three charts layout
0057 *******************/
0058 .white-box {
0059     background: #fff;
0060     padding: 25px;
0061     margin-bottom: 30px;
0062     .box-title {
0063         font-weight: 700;
0064         line-height: 30px;
0065         font-size: 18px;
0066     }
0067 }
0068 .list-inline {
0069     padding-left: 0;
0070     margin-left: -5px;
0071     list-style: none;
0072     .counter {
0073         font-size: 24px;
0074         font-weight: 100;
0075     }
0076 }
0077
0078
0079
0080 /*******************
0081  Vertical responsive layout
0082 *******************/
0083
0084 @include media-breakpoint-up(md) {
0085     #main-wrapper[data-layout="vertical"] {
0086
0087         /*Vertical*/
0088         &[data-sidebartype="full"] {
0089             .topbar .top-navbar .navbar-header {
0090                 width: $sidebar-width-full;
0091             }
0092         }
0093         /*Sidebar position*/
0094         &[data-sidebar-position="fixed"][data-sidebartype="full"] {
0095             .topbar .top-navbar .navbar-collapse {
0096                 margin-left: $sidebar-width-full;
0097             }
0098         }
0099         &[data-sidebar-position="fixed"][data-sidebartype="mini-sidebar"] {
0100             .topbar .top-navbar .navbar-collapse {
0101                 margin-left: $sidebar-width-mini;
0102             }
0103         }
0104
0105         /*Vertical with mini-sidebar*/
0106         &[data-sidebartype="mini-sidebar"] {
0107             .topbar .top-navbar .navbar-header {
0108                 width: $sidebar-width-mini;
0109                 .logo-text {
0110                     display: none;
0111                 }
0112                 &.expand-logo {
0113                     width: $sidebar-width-full;
0114                     .logo-text {
0115                         display: block;
0116                     }
0117                 }
0118             }
0119             .left-sidebar .upgrade-btn {
0120                 display: none;
0121             }
0122         }
0123         /*Fixed sidebar with minisidebar*/
0124         &[data-sidebar-position="fixed"][data-sidebartype="mini-sidebar"] {
0125             .topbar .top-navbar .navbar-collapse {
0126                 margin-left: $sidebar-width-mini;
0127             }
0128         }
0129         &[data-sidebartype="mini-sidebar"] {
0130             .page-wrapper {
0131                 margin-left: $sidebar-width-mini;
0132             }
0133             .sidebar-nav {
0134                 .hide-menu,
0135                 .has-arrow:after {
0136                     display: none;
0137                 }
0138                 .nav-small-cap {
0139                     justify-content: center;
0140                 }
0141             }
0142             .left-sidebar {
0143                 width: $sidebar-width-mini;
0144                 // &:hover {
0145                 //     width: $sidebar-width-full;
0146                 //     .sidebar-nav {
0147                 //         .hide-menu,
0148                 //         .has-arrow:after {
0149                 //             display: block;
0150                 //         }
0151                 //         .nav-small-cap {
0152                 //             justify-content: flex-start;
0153                 //         }
0154                 //     }
0155                 // }
0156             }
0157         }
0158     }
0159 }
0160
0161 @media(max-width:767px) {
0162     #main-wrapper {
0163         &[data-sidebartype="mini-sidebar"] {
0164             .left-sidebar {
0165                 left: -$sidebar-width-full;
0166             }
0167         }
0168         &.show-sidebar {
0169             .left-sidebar {
0170                 left: 0;
0171             }
0172         }
0173         &[data-layout="vertical"][data-sidebar-position="fixed"] {
0174             .topbar .top-navbar {
0175                 .navbar-collapse {
0176                     position: relative;
0177                     top: $topbar-height;
0178                 }
0179             }
0180         }
0181         /*Header position*/
0182         &[data-layout="vertical"][data-header-position="fixed"][data-sidebar-position="fixed"] {
0183             .topbar .top-navbar {
0184                 .navbar-collapse {
0185                     position: relative;
0186                     top: $topbar-height;
0187                 }
0188             }
0189         }
0190     }
0191 }
0192
0193 @include media-breakpoint-only(md) {
0194     #main-wrapper {
0195         &[data-sidebartype="mini-sidebar"] {
0196             .sidebar-nav ul .sidebar-item {
0197                 width: 65px;
0198             }
0199         }
0200     }
0201 }