first commit

assets/global/scss/layouts/layout_4/default/layout/_boxed.scss

@@ -0,0 +1,40 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Boxed layout
+ *
+ *  Styles for main structure of content area in boxed layout
+ *
+ * ---------------------------------------------------------------------------- */
+
+// Check if component is enabled
+@if $enable-boxed {
+
+    // Class for body, adds background color/image
+    .layout-boxed-bg {
+        background: $boxed-bg; // mainly for demo, use whatever you want
+    }
+
+    // Container inside other containers
+    .navbar > .container,
+    .breadcrumb-line > .container {
+        padding-left: ($content-container-padding-x * 2);
+        padding-right: ($content-container-padding-x * 2);
+    }
+
+    // Boxed content section
+    .content-boxed {
+        @include media-breakpoint-up(lg) {
+            &:not(.navbar):not(.breadcrumb-line) {
+                margin-left: 7%;
+                margin-right: 7%;
+            }
+
+            // Inside navbar
+            &.navbar,
+            &.breadcrumb-line {
+                padding-left: calc(7% + #{$content-container-padding-x * 2});
+                padding-right: calc(7% + #{$content-container-padding-x * 2});
+            }
+        }
+    }
+}

assets/global/scss/layouts/layout_4/default/layout/_content.scss

@@ -0,0 +1,44 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Main content layout
+ *
+ *  Styles for main structure of content area
+ *
+ * ---------------------------------------------------------------------------- */
+
+// Make sure document has 100% height
+html {
+    display: flex;
+    flex-direction: column;
+}
+
+// Document body
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+// Main container
+.page-content {
+    display: flex;
+    flex-grow: 1;
+    padding: $content-container-padding-y $content-container-padding-x;
+}
+
+// Content wrapper
+.content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+}
+
+// Main content container
+.content {
+    flex-grow: 1;
+    margin-left: $content-container-padding-x;
+    margin-right: $content-container-padding-x;
+    @include clearfix;
+}

assets/global/scss/layouts/layout_4/default/layout/_header.scss

@@ -0,0 +1,109 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Page header
+ *
+ *  Page header components and color options
+ *
+ * ---------------------------------------------------------------------------- */
+
+// Page title
+.page-title {
+    padding: $page-header-padding-y 0;
+    position: relative;
+
+    // Subtitle
+    small {
+        display: inline-block;
+        margin-left: $element-spacer-x;
+
+        // Divider
+        &:before {
+            content: '/';
+            margin-right: ($element-spacer-x + 0.25rem);
+        }
+
+        // On a new line
+        &.d-block {
+            margin-left: 0;
+            
+            &:before {
+                content: none;
+            }
+        }
+    }
+
+    // Add left spacing to align with text
+    small.d-block,
+    .breadcrumb {
+        margin-left: ($icon-font-size + $element-spacer-x + 0.25rem);
+    }
+
+    // Remove margin from headings
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+}
+
+// Page header content
+.page-header-content {
+    position: relative;
+    padding: 0 $page-header-padding-x;
+
+    // With custom colored bottom border
+    &[class*=border-bottom-] + .breadcrumb-line {
+        border-top: 0;
+    }
+}
+
+
+//
+// Page header colors
+//
+
+// Light
+.page-header-light {
+    background-color: $page-header-light-bg;
+    border-bottom: $page-header-border-width solid $page-header-light-border-color;
+    
+    // Cover image
+    &.has-cover {
+        background: url(#{$img-path}/backgrounds/seamless.png); // feel free to change
+    }
+}
+
+// Dark
+.page-header-dark {
+    background-color: $page-header-dark-bg;
+    color: $page-header-dark-color;
+    margin-bottom: $spacer;
+
+    // Breadcrumbs
+    > .breadcrumb,
+    .page-header-content .breadcrumb {
+
+        // Links
+        > li > a,
+        > li + li:before {
+            color: rgba($page-header-dark-color, 0.9);
+        }
+
+        // Hovered links
+        > li > a {
+            @include hover-focus {
+                color: $page-header-dark-color;
+                opacity: 1;
+            }
+        }
+
+        // Active item
+        > .active {
+            color: rgba($page-header-dark-color, 0.5);
+        }
+    }
+    
+    // Cover image
+    &.has-cover {
+        background: url(#{$img-path}/login_cover.jpg); // feel free to change
+        background-size: cover;
+    }
+}