@open-rlb/ng-bootstrap 2.2.17

package/assets/scss/custom/structure/_horizontal-nav.scss

@@ -0,0 +1,363 @@
+// 
+// _horizontal.scss
+// 
+
+.topnav {
+    background: var(--#{$prefix}topnav-bg);
+    padding: 0 calc(#{$grid-gutter-width} * 0.5);
+    box-shadow: $box-shadow;
+    margin-top: $header-height;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 100;
+
+    .topnav-menu {
+        margin: 0;
+        padding: 0;
+    }
+
+    .navbar-nav {
+
+        .nav-link {
+            font-size: 14px;
+            position: relative;
+            padding: 1rem 1.3rem;
+            color: var(--#{$prefix}menu-item-color);
+
+            i {
+                font-size: 15px;
+            }
+
+            &:focus,
+            &:hover {
+                color: var(--#{$prefix}menu-item-active-color);
+                background-color: transparent;
+            }
+        }
+
+        .dropdown-item {
+            color: var(--#{$prefix}menu-item-color);
+
+            &.active,
+            &:hover {
+                color: var(--#{$prefix}menu-item-active-color);
+            }
+        }
+
+        .nav-item {
+            .nav-link.active {
+                color: var(--#{$prefix}menu-item-active-color);
+            }
+        }
+
+        .dropdown {
+            &.active {
+                >a {
+                    color: var(--#{$prefix}menu-item-active-color);
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@include media-breakpoint-up(xl) {
+
+    body[data-layout="horizontal"] {
+
+        .container-fluid,
+        .navbar-header {
+            max-width: 85%;
+        }
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .topnav {
+        .navbar-nav {
+            .nav-item {
+                &:first-of-type {
+                    .nav-link {
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+
+        .dropdown-item {
+            padding: .5rem 1.5rem;
+            min-width: 180px;
+        }
+
+        .dropdown {
+            &.mega-dropdown {
+
+                // position: static;
+                .mega-dropdown-menu {
+                    left: 0px;
+                    right: auto;
+                }
+            }
+
+            .dropdown-menu {
+                margin-top: 0;
+                border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;
+
+                .arrow-down {
+                    &::after {
+                        right: 15px;
+                        transform: rotate(-135deg) translateY(-50%);
+                        position: absolute;
+                    }
+                }
+
+                .dropdown {
+                    .dropdown-menu {
+                        position: absolute;
+                        top: 0 !important;
+                        left: 100%;
+                        // display: none
+                    }
+                }
+            }
+
+            // &:hover {
+            // >.dropdown-menu {
+            // display: block;
+            // }
+            // }
+        }
+
+        .dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
+            display: block
+        }
+    }
+
+    .navbar-toggle {
+        display: none;
+    }
+}
+
+.arrow-down {
+    display: inline-block;
+
+    &:after {
+        border-color: initial;
+        border-style: solid;
+        border-width: 0 0 1px 1px;
+        content: "";
+        height: .4em;
+        display: inline-block;
+        right: 5px;
+        top: 50%;
+        margin-left: 10px;
+        transform: rotate(-45deg) translateY(-50%);
+        transform-origin: top;
+        transition: all .3s ease-out;
+        width: .4em;
+    }
+}
+
+
+@include media-breakpoint-down(xl) {
+    .topnav-menu {
+        .navbar-nav {
+            li {
+                &:last-of-type {
+                    .dropdown {
+                        .dropdown-menu {
+                            right: 100%;
+                            left: auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(lg) {
+
+    .navbar-brand-box {
+        .logo-dark {
+            display: var(--#{$prefix}display-block);
+
+            span.logo-sm {
+                display: var(--#{$prefix}display-block);
+            }
+        }
+
+        .logo-light {
+            display: var(--#{$prefix}display-none);
+        }
+    }
+
+    .topnav {
+        max-height: 360px;
+        overflow-y: auto;
+        padding: 0;
+
+        .navbar-nav {
+            .nav-link {
+                padding: 0.75rem 1.1rem;
+            }
+        }
+
+        .dropdown {
+            .dropdown-menu {
+                background-color: transparent;
+                border: none;
+                box-shadow: none;
+                padding-left: 15px;
+
+                &.dropdown-mega-menu-xl {
+                    width: auto;
+
+                    .row {
+                        margin: 0px;
+                    }
+                }
+            }
+
+            .dropdown-item {
+                position: relative;
+                background-color: transparent;
+
+                &.active,
+                &:active {
+                    color: $primary;
+                }
+            }
+        }
+
+        .arrow-down {
+            &::after {
+                right: 15px;
+                position: absolute;
+            }
+        }
+    }
+}
+
+
+@include media-breakpoint-up(lg) {
+
+    body[data-layout="horizontal"][data-topbar="light"] {
+        .navbar-brand-box {
+            .logo-dark {
+                display: var(--#{$prefix}display-block);
+            }
+
+            .logo-light {
+                display: var(--#{$prefix}display-none);
+            }
+        }
+
+        .topnav {
+            background-color: $primary;
+
+            .navbar-nav {
+
+                .nav-link {
+                    color: rgba($white, 0.6);
+
+                    &:focus,
+                    &:hover {
+                        color: rgba($white, 0.9);
+                    }
+                }
+
+                >.dropdown {
+                    &.active {
+                        >a {
+                            color: rgba($white, 0.9) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Colored Topbar 
+
+body[data-layout="horizontal"][data-topbar="colored"] {
+    #page-topbar {
+        background-color: $primary;
+        box-shadow: none;
+    }
+
+    .logo-dark {
+        display: none;
+    }
+
+    .logo-light {
+        display: block;
+    }
+
+    .app-search {
+
+        .form-control {
+            background-color: rgba(var(--#{$prefix}topbar-search-bg), 0.07);
+            color: $white;
+        }
+
+        span,
+        input.form-control::-webkit-input-placeholder {
+            color: rgba($white, 0.5);
+        }
+    }
+
+    .header-item {
+        color: var(--#{$prefix}header-dark-item-color);
+
+        &:hover {
+            color: var(--#{$prefix}header-dark-item-color);
+        }
+    }
+
+    .navbar-header {
+        .dropdown .show {
+            &.header-item {
+                background-color: rgba($white, 0.1);
+            }
+        }
+
+        .waves-effect .waves-ripple {
+            background: rgba($white, 0.4);
+        }
+    }
+
+    .noti-icon {
+        i {
+            color: var(--#{$prefix}header-dark-item-color);
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .topnav {
+            background-color: $primary;
+
+            .navbar-nav {
+
+                .nav-link {
+                    color: rgba($white, 0.6);
+
+                    &:focus,
+                    &:hover {
+                        color: rgba($white, 0.9);
+                    }
+                }
+
+                >.dropdown {
+                    &.active {
+                        >a {
+                            color: rgba($white, 0.9) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/assets/scss/custom/structure/_layouts.scss

@@ -0,0 +1,71 @@
+// 
+// _layouts.scss
+// 
+
+body[data-layout-size="boxed"] {
+
+    background-color: var(--#{$prefix}boxed-body-bg);
+
+    #layout-wrapper {
+        background-color: var(--#{$prefix}body-bg);
+        max-width: $boxed-layout-width;
+        margin: 0 auto;
+        box-shadow: $box-shadow;
+        min-height: 1760px;
+    }
+
+    #page-topbar {
+        max-width: $boxed-layout-width;
+        margin: 0 auto;
+    }
+
+    .footer {
+        margin: 0 auto;
+        max-width: calc(#{$boxed-layout-width} - #{$sidebar-width});
+    }
+
+    &.vertical-collpsed {
+        .footer {
+            max-width: calc(#{$boxed-layout-width} - #{$sidebar-collapsed-width});
+        }
+    }
+}
+
+
+// Horizontal Boxed Layout
+
+body[data-layout="horizontal"][data-layout-size="boxed"] {
+
+    #page-topbar,
+    #layout-wrapper,
+    .footer {
+        max-width: 100%;
+    }
+
+    .container-fluid,
+    .navbar-header {
+        max-width: $boxed-layout-width;
+    }
+}
+
+// Scrollable layout
+
+body[data-layout-scrollable="true"] {
+    @media (min-width: 992px) {
+
+        #page-topbar,
+        .vertical-menu {
+            position: absolute;
+        }
+    }
+
+    &[data-layout="horizontal"] {
+        @media (min-width: 992px) {
+
+            #page-topbar,
+            .topnav {
+                position: absolute;
+            }
+        }
+    }
+}

package/assets/scss/custom/structure/_page-head.scss

@@ -0,0 +1,18 @@
+// 
+// Page-title
+// 
+
+.page-title-box {
+    padding-bottom: $grid-gutter-width;
+
+    .breadcrumb {
+        background-color: transparent;
+        padding: 0;
+    }
+
+    h4 {
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 16px !important;
+    }
+}

package/assets/scss/custom/structure/_right-sidebar.scss

@@ -0,0 +1,65 @@
+//
+// right-sidebar.scss
+//
+
+.right-bar {
+    background-color: var(--#{$prefix}secondary-bg);
+    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
+    display: block;
+    position: fixed;
+    transition: all 200ms ease-out;
+    width: $rightbar-width;
+    z-index: 9999;
+    float: right !important;
+    right: -($rightbar-width + 10px);
+    top: 0;
+    bottom: 0;
+
+    .right-bar-toggle {
+        background-color: #343a40;
+        height: 24px;
+        width: 24px;
+        line-height: 24px;
+        display: block;
+        color: var(--#{$prefix}gray-200);
+        text-align: center;
+        border-radius: 50%;
+
+        &:hover {
+            background-color: var(--#{$prefix}secondary-bg);
+        }
+    }
+}
+
+// Rightbar overlay
+.rightbar-overlay {
+    background-color: rgba($dark, 0.55);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: none;
+    z-index: 9998;
+    transition: all .2s ease-out;
+}
+
+.right-bar-enabled {
+    .right-bar {
+        right: 0;
+    }
+
+    .rightbar-overlay {
+        display: block;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .right-bar {
+        overflow: auto;
+
+        .slimscroll-menu {
+            height: auto !important;
+        }
+    }
+}