@open-rlb/ng-bootstrap 3.1.6 → 3.1.8

package/assets/scss/_custom.scss

@@ -1,7 +1,7 @@
 // Lightbox
 //@import "~ngx-lightbox/lightbox.css";
 
-// Select 2 
+// Select 2
 //@import "~@ng-select/ng-select/themes/default.theme.css";
 
 // Date Picker
@@ -453,3 +453,111 @@ a.ck.ck-button.ck-on {
     left: 100%;
   }
 }
+
+
+rlb-dt-table.dt-card-style {
+  display: block;
+  margin-bottom: 1.5rem;
+
+  .table-responsive {
+    box-shadow: $card-box-shadow;
+    border-radius: $card-border-radius;
+    background-color: var(--bs-secondary-bg, var(--bs-body-bg));
+    border: 1px solid var(--bs-border-color-translucent);
+  }
+
+  .table {
+    margin-bottom: 0;
+    background-color: transparent;
+
+    > :not(caption) > * > * {
+      background-color: transparent;
+      border-bottom-color: var(--bs-border-color-translucent);
+    }
+
+    // Top corners
+    thead tr:first-child th:first-child {
+      border-top-left-radius: $card-inner-border-radius;
+    }
+    thead tr:first-child th:last-child {
+      border-top-right-radius: $card-inner-border-radius;
+    }
+
+    // Bottom corners
+    tfoot tr:last-child td:first-child,
+    tbody:last-child tr:last-child td:first-child {
+      border-bottom-left-radius: $card-inner-border-radius;
+      border-bottom: 0;
+    }
+
+    tfoot tr:last-child td:last-child,
+    tbody:last-child tr:last-child td:last-child {
+      border-bottom-right-radius: $card-inner-border-radius;
+      border-bottom: 0;
+    }
+  }
+}
+
+rlb-accordion.accordion-card-style {
+  display: block; // Required for the box-shadow to render on a custom element
+
+  // Give the wrapper the card shadow and radius
+  box-shadow: $card-box-shadow;
+  border-radius: $card-border-radius;
+
+  // Feed the Card variables directly into Bootstrap's Accordion Engine!
+  // This automatically calculates the inner corners for the first and last accordion items perfectly.
+  --bs-accordion-border-radius: #{$card-border-radius};
+  --bs-accordion-inner-border-radius: #{$card-inner-border-radius};
+
+  // Sync the backgrounds to match your dark/light theme Cards
+  --bs-accordion-bg: var(--bs-secondary-bg, var(--bs-body-bg));
+  --bs-accordion-border-color: var(--bs-border-color-translucent);
+
+  // slightly different background color when an accordion item is expanded
+  --bs-accordion-active-bg: var(--bs-tertiary-bg, rgba(var(--bs-primary-rgb), 0.05));
+  --bs-accordion-active-color: var(--bs-emphasis-color);
+
+  // Clean up the borders
+  // Since the inner accordion items draw their own borders, we just ensure
+  // they don't look weird inside our shadowed wrapper.
+  > [rlb-accordion-item],
+  > .accordion-item {
+    border-color: var(--bs-accordion-border-color);
+
+    // Ensure the focus ring stays inside the card shape
+    .accordion-button:focus {
+      box-shadow: inset 0 -1px 0 rgba(0,0,0,.125), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+    }
+  }
+}
+
+:root {
+  --bs-scrollbar-bg: #ced4da;
+  --bs-scrollbar-hover: #aeb5bc;
+  --bs-scrollbar-track: transparent;
+}
+
+[data-bs-theme="dark"] {
+  --bs-scrollbar-bg: rgba(255, 255, 255, 0.1);
+  --bs-scrollbar-hover: rgba(255, 255, 255, 0.2);
+  --bs-scrollbar-track: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bs-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bs-scrollbar-bg);
+  border-radius: 10px;
+
+  &:hover {
+    background: var(--bs-scrollbar-hover);
+  }
+}

package/assets/scss/_variables-dark.scss

@@ -108,4 +108,7 @@ $boxed-body-bg-dark:                    #32394f;
 
 // Display
 $display-none-dark:                                        block;
-$display-block-dark:                                       none;
+$display-block-dark:                                       none;
+
+$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
+$input-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);

package/assets/scss/_variables.scss

@@ -701,7 +701,7 @@ $font-family-code:            var(--#{$prefix}font-monospace);
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text
 $font-size-root:              null;
-$font-size-base:              0.8125rem;
+$font-size-base:              0.85rem;
 $font-size-sm:                $font-size-base * .875;
 $font-size-lg:                $font-size-base * 1.25;
 
@@ -1824,3 +1824,18 @@ $kbd-bg:                            var(--#{$prefix}body-color);
 $nested-kbd-font-weight:            null; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null;
+
+
+// Dimensions and Light Shadows
+$enable-shadows: true;
+$card-border-radius: 1rem;
+$card-inner-border-radius: calc(#{$card-border-radius} - 1px);
+$card-spacer-y: 1.5rem;
+$card-spacer-x: 1.5rem;
+$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); // Soft shadow for light mode
+$badge-border-radius: 0.375rem;
+
+
+$input-border-radius: 0.5rem;
+$input-padding-y: 0.65rem;
+$input-padding-x: 1rem;

package/assets/scss/custom/structure/_vertical.scss

@@ -3,62 +3,71 @@
 // _menu.scss
 //
 
-.metismenu {
-  margin: 0;
+rlb-sidebar {
+  --rlb-sidebar-width: #{$sidebar-width};
+  --rlb-item-padding-x: 1.5rem;
+  --rlb-item-padding-y: 0.625rem;
 
-  li {
-    display: block;
-    width: 100%;
-  }
+  --bs-body-color: #545a6d;
+  --bs-body-bg: #ffffff;
+  color: var(--bs-body-color);
 
-  .mm-collapse {
-    display: none;
+  &[data-bs-theme="light"] {
+    --rlb-sidebar-bg: #ffffff;
+    --rlb-sidebar-border: #eff0f2;
 
-    &:not(.mm-show) {
-      display: none;
-    }
+    --rlb-menu-item-color: #545a6d;
+    --rlb-menu-item-hover-color: #383c40;
+    --rlb-menu-item-active-color: #556ee6;
 
-    &.mm-show {
-      display: block
-    }
-  }
+    --rlb-menu-item-active-bg: #f6f6f6;
 
-  .mm-collapsing {
-    position: relative;
-    height: 0;
-    overflow: hidden;
-    transition-timing-function: ease;
-    transition-duration: .35s;
-    transition-property: height, visibility;
+    --rlb-submenu-bg: #ffffff;
+
+    --rlb-scrollbar-thumb: #ced4da;
+    --rlb-scrollbar-track: transparent;
   }
-}
 
+  &[data-bs-theme="dark"] {
+    --rlb-sidebar-bg: #2a3042; // $sidebar-dark-bg
+    --rlb-sidebar-border: #32394e;
 
-.vertical-menu {
-  width: inherit;
-  //z-index: 1001;
-  background: $sidebar-bg;
-  //bottom: 0;
-  margin-top: 0;
-  // position: fixed;
-  //top: $header-height;
-  box-shadow: $box-shadow;
-  height: 100%;
-}
+    --rlb-menu-item-color: #a6b0cf;
+    --rlb-menu-item-hover-color: #ffffff;
+    --rlb-menu-item-active-color: #ffffff;
 
-.main-content {
-  margin-left: $sidebar-width;
-  overflow: hidden;
+    --rlb-menu-item-active-bg: #{color.adjust(#2a3042, $lightness: 3%)};
 
-  .content {
-    padding: 0 15px 10px 15px;
-    margin-top: $header-height;
+    --rlb-submenu-bg: #2a3042;
+
+    --rlb-scrollbar-thumb: #5c6276;
+    --rlb-scrollbar-track: transparent;
   }
 }
 
-
 #sidebar-menu {
   padding: 10px 0 10px 0;
+  scrollbar-gutter: stable;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--rlb-scrollbar-thumb) var(--rlb-scrollbar-track);
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--rlb-scrollbar-track);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--rlb-scrollbar-thumb);
+    border-radius: 3px;
+
+    &:hover {
+      background-color: color.adjust($gray-600, $lightness: -10%);
+    }
+  }
 
   .mm-active {
     >.has-arrow {
@@ -69,13 +78,26 @@
   }
 
   .has-arrow {
+    position: relative;
     &:after {
       content: "\F0140";
       font-family: 'Material Design Icons';
+
+      position: absolute;
+      right: 1rem;
+      top: 50%;
       display: block;
-      float: right;
-      transition: transform .2s;
       font-size: 1rem;
+
+      // smoothly animate the transform
+      transition: transform 0.3s ease-in-out;
+
+      transform: translateY(-50%) rotate(0deg);
+    }
+
+    &:not(.collapsed):after,
+    &[aria-expanded="true"]:after {
+      transform: translateY(-50%) rotate(-180deg);
     }
   }
 
@@ -84,11 +106,14 @@
       a {
         display: block;
         padding: .625rem 1.5rem;
-        color: $sidebar-menu-item-color;
+        color: var(--rlb-menu-item-color);
         position: relative;
         font-size: 13px;
         transition: all .4s;
 
+        margin: 0.1rem 0.3rem;
+        border-radius: 0.4rem;
+
         i {
           display: inline-block;
           min-width: 1.75rem;
@@ -96,54 +121,121 @@
           font-size: 1.15rem;
           line-height: 1.40625rem;
           vertical-align: middle;
-          color: $sidebar-menu-item-icon-color;
+          color: inherit;
           transition: all .4s;
         }
 
         &:hover {
-          color: $sidebar-menu-item-hover-color;
+          color: var(--rlb-menu-item-hover-color);
+          //background-color: rgba(255,255,255, 0.05);
 
           i {
-            color: $sidebar-menu-item-hover-color;
+            color: inherit;
           }
         }
       }
 
+      .active,
+      &.mm-active > a {
+        color: var(--rlb-menu-item-active-color) !important;
+        background-color: var(--rlb-menu-item-active-bg);
+        font-weight: 600;
+
+        i {
+          color: inherit !important;
+        }
+      }
+
       .badge {
         margin-left: 4px;
       }
 
       ul.sub-menu {
         padding: 0;
-
+        margin: 0;
+        display: flex;
+        flex-direction: column;
         li {
-
           a {
             padding: .4rem 1.5rem .4rem 2.5rem;
             font-size: 13px;
-            color: $sidebar-menu-sub-item-color;
+            color: var(--rlb-menu-item-color);
+            background-color: transparent;
 
             &:hover {
-              color: $sidebar-menu-item-hover-color;
+              color: var(--rlb-menu-item-hover-color);
             }
           }
 
+          a.active {
+            color: var(--rlb-menu-item-active-color) !important;
+            background-color: var(--rlb-menu-item-active-bg);
+          }
+
           ul.sub-menu {
             padding: 0;
-
             li {
               a {
                 padding: .4rem 1.5rem .4rem 2.5rem;
                 font-size: 13px;
-
-
               }
             }
           }
         }
       }
     }
+  }
+}
+
+.metismenu {
+  margin: 0;
+
+  li {
+    display: block;
+    width: 100%;
+  }
+
+  .mm-collapse {
+    display: none;
+
+    &:not(.mm-show) {
+      display: none;
+    }
+
+    &.mm-show {
+      display: block
+    }
+  }
+
+  .mm-collapsing {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition-timing-function: ease;
+    transition-duration: .35s;
+    transition-property: height, visibility;
+  }
+}
+
+.vertical-menu {
+  width: inherit;
+  //z-index: 1001;
+  background: var(--rlb-sidebar-bg);
+  //bottom: 0;
+  margin-top: 0;
+  // position: fixed;
+  //top: $header-height;
+  box-shadow: $box-shadow;
+  height: 100%;
+}
 
+.main-content {
+  margin-left: $sidebar-width;
+  overflow: hidden;
+
+  .content {
+    padding: 0 15px 10px 15px;
+    margin-top: $header-height;
   }
 }
 
@@ -158,30 +250,6 @@
   font-weight: $font-weight-semibold;
 }
 
-.mm-active {
-  color: $sidebar-menu-item-active-color !important;
-
-  >a {
-    color: $sidebar-menu-item-active-color !important;
-
-    i {
-      color: $sidebar-menu-item-active-color !important;
-    }
-  }
-
-  .active {
-    color: $sidebar-menu-item-active-color !important;
-
-    i {
-      color: $sidebar-menu-item-active-color !important;
-    }
-  }
-
-  >i {
-    color: $sidebar-menu-item-active-color !important;
-  }
-}
-
 @media (max-width: 992px) {
   //.vertical-menu {
   //  display: none;
@@ -371,155 +439,6 @@
   }
 }
 
-
-body[data-sidebar="dark"],
-body[data-bs-theme="dark"],
-html[data-bs-theme="dark"] {
-  .vertical-menu {
-    background: $sidebar-dark-bg;
-  }
-
-  #sidebar-menu {
-
-    .side-nav-link-ref {
-      cursor: pointer;
-    }
-
-    .side-nav-link-ref.active {
-      color: $sidebar-dark-menu-item-active-color !important;
-      background-color: color.adjust($sidebar-dark-bg, $lightness: 3%) !important;
-      font-weight: 600;
-      border-radius: 0.375rem;
-
-      i {
-        color: inherit !important;
-      }
-    }
-
-    ul {
-      li {
-        a {
-          color: $sidebar-dark-menu-item-color;
-
-          i {
-            color: $sidebar-dark-menu-item-icon-color;
-          }
-
-          &:hover {
-            color: $sidebar-dark-menu-item-hover-color;
-
-            i {
-              color: $sidebar-dark-menu-item-hover-color;
-            }
-          }
-        }
-
-        ul.sub-menu {
-          li {
-
-            a {
-              color: $sidebar-dark-menu-sub-item-color;
-
-              &:hover {
-                color: $sidebar-dark-menu-item-hover-color;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Enlarge menu
-  &.vertical-collpsed {
-    min-height: 1760px;
-
-    // Side menu
-    .vertical-menu {
-
-      // Sidebar Menu
-      #sidebar-menu {
-
-        >ul {
-          >li {
-
-            &:hover {
-              >a {
-                background: color.adjust($sidebar-dark-bg, $lightness: 2%);
-                color: $sidebar-dark-menu-item-hover-color;
-
-                i {
-                  color: $sidebar-dark-menu-item-hover-color;
-                }
-              }
-
-              >ul {
-                a {
-                  color: $sidebar-dark-menu-sub-item-color;
-
-                  &:hover {
-                    color: $sidebar-dark-menu-item-hover-color;
-                  }
-                }
-              }
-            }
-          }
-
-          ul {
-            background-color: $sidebar-dark-bg;
-          }
-
-        }
-
-        ul {
-
-          li {
-            &.mm-active .active {
-              color: $sidebar-dark-menu-item-active-color !important;
-
-              i {
-                color: $sidebar-dark-menu-item-active-color !important;
-              }
-            }
-          }
-        }
-
-      }
-
-
-    }
-  }
-
-  .mm-active {
-    color: $sidebar-dark-menu-item-active-color !important;
-
-    >a {
-      color: $sidebar-dark-menu-item-active-color !important;
-
-      i {
-        color: $sidebar-dark-menu-item-active-color !important;
-      }
-    }
-
-    >i {
-      color: $sidebar-dark-menu-item-active-color !important;
-    }
-
-    .active {
-      color: $sidebar-dark-menu-item-active-color !important;
-
-      i {
-        color: $sidebar-dark-menu-item-active-color !important;
-      }
-    }
-  }
-
-  .menu-title {
-    color: $sidebar-dark-menu-item-icon-color;
-  }
-}
-
-
 body[data-layout="horizontal"] {
   .main-content {
     margin-left: 0 !important;

package/assets/scss/rlb/app-layout.scss

@@ -16,14 +16,17 @@
 .rlb-navbar {
   height: $header-height;
   z-index: 1030;
+  background-color: var(--bs-tertiary-bg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .rlb-sidebar {
-  width: $sidebar-width;
+  width: var(--rlb-sidebar-width);
+  background-color: var(--rlb-sidebar-bg);
+  border-right: 1px solid var(--rlb-sidebar-border);
+  color: var(--rlb-menu-item-color);
   flex-shrink: 0;
   transition: width $sidebar-transition, transform $sidebar-transition;
-  background-color: var(--bs-tertiary-bg);
-  border-right: 1px solid var(--bs-border-color);
   z-index: 1000;
   position: relative;
   overflow: visible !important;