@open-rlb/ng-bootstrap 3.1.9 → 3.1.11

package/assets/scss/_custom.scss

@@ -32,7 +32,7 @@
 }
 
 .modal-backdrop {
-  z-index: 1002 !important;
+  z-index: 1050 !important;
 }
 
 .dropdown-toggle::after {

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

@@ -87,7 +87,7 @@ rlb-sidebar {
       right: 1rem;
       top: 50%;
       display: block;
-      font-size: 1rem;
+      font-size: 1.2rem;
 
       // smoothly animate the transform
       transition: transform 0.3s ease-in-out;
@@ -104,27 +104,42 @@ rlb-sidebar {
   ul {
     li {
       a {
-        display: block;
-        padding: .625rem 1.5rem;
+        display: flex;
+        align-items: center;
+        padding: var(--rlb-item-padding-y) var(--rlb-item-padding-x);
         color: var(--rlb-menu-item-color);
         position: relative;
-        font-size: 13px;
+        font-size: 0.95rem;
         transition: all .4s;
 
         margin: 0.1rem 0.3rem;
-        border-radius: 0.4rem;
+        border-radius: $border-radius;
+
+        .menu-text {
+          flex-grow: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-right: 0.5rem;
+        }
 
         i {
+          flex-shrink: 0;
           display: inline-block;
           min-width: 1.75rem;
           padding-bottom: .125em;
-          font-size: 1.15rem;
+          font-size: 1.25rem;
           line-height: 1.40625rem;
           vertical-align: middle;
           color: inherit;
           transition: all .4s;
         }
 
+        .badge {
+          flex-shrink: 0;
+          margin-left: auto;
+        }
+
         &:hover {
           color: var(--rlb-menu-item-hover-color);
           //background-color: rgba(255,255,255, 0.05);
@@ -135,6 +150,10 @@ rlb-sidebar {
         }
       }
 
+      .has-arrow span {
+        margin-right: 1rem;
+      }
+
       .active,
       &.mm-active > a {
         color: var(--rlb-menu-item-active-color) !important;
@@ -176,8 +195,8 @@ rlb-sidebar {
             padding: 0;
             li {
               a {
-                padding: .4rem 1.5rem .4rem 2.5rem;
-                font-size: 13px;
+                padding: 0.4rem 1.5rem 0.4rem 3.75rem;
+                font-size: 0.8125rem;
               }
             }
           }
@@ -240,11 +259,11 @@ rlb-sidebar {
 }
 
 .menu-title {
-  padding: 12px 20px !important;
+  padding: 0.75rem 1.5rem !important;
   letter-spacing: .05em;
   pointer-events: none;
   cursor: default;
-  font-size: 11px;
+  font-size: 0.75rem;
   text-transform: uppercase;
   color: $sidebar-menu-item-icon-color;
   font-weight: $font-weight-semibold;

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -5104,8 +5104,7 @@ class SidebarItemComponent {
         >
           {{ title() }}
         </li>
-      }
-      @if (!title()) {
+      } @else {
         <li>
           @if (children().length) {
             <a
@@ -5122,18 +5121,18 @@ class SidebarItemComponent {
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <span>{{ label() }}</span>
+              <span class="menu-text">{{ label() }}</span>
             </a>
-          }
-          <rlb-collapse [id]="'side-item' + _id">
-            <ul
-              class="sub-menu"
-              aria-expanded="false"
-            >
-              <ng-content select="rlb-sidebar-item"></ng-content>
-            </ul>
-          </rlb-collapse>
-          @if (!children().length) {
+
+            <rlb-collapse [id]="'side-item' + _id">
+              <ul
+                class="sub-menu"
+                aria-expanded="false"
+              >
+                <ng-content select="rlb-sidebar-item"></ng-content>
+              </ul>
+            </rlb-collapse>
+          } @else {
             <a
               [routerLink]="link()"
               [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
@@ -5144,7 +5143,7 @@ class SidebarItemComponent {
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <ng-content></ng-content>
+              <span class="menu-text"><ng-content></ng-content></span>
             </a>
           }
         </li>
@@ -5165,8 +5164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         >
           {{ title() }}
         </li>
-      }
-      @if (!title()) {
+      } @else {
         <li>
           @if (children().length) {
             <a
@@ -5183,18 +5181,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <span>{{ label() }}</span>
+              <span class="menu-text">{{ label() }}</span>
             </a>
-          }
-          <rlb-collapse [id]="'side-item' + _id">
-            <ul
-              class="sub-menu"
-              aria-expanded="false"
-            >
-              <ng-content select="rlb-sidebar-item"></ng-content>
-            </ul>
-          </rlb-collapse>
-          @if (!children().length) {
+
+            <rlb-collapse [id]="'side-item' + _id">
+              <ul
+                class="sub-menu"
+                aria-expanded="false"
+              >
+                <ng-content select="rlb-sidebar-item"></ng-content>
+              </ul>
+            </rlb-collapse>
+          } @else {
             <a
               [routerLink]="link()"
               [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
@@ -5205,7 +5203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <ng-content></ng-content>
+              <span class="menu-text"><ng-content></ng-content></span>
             </a>
           }
         </li>