neuvector · rushk014 · Jan 13, 2026 · Dec 17, 2025 · Dec 17, 2025 · Dec 17, 2025
@@ -1,6 +1,7 @@
 <mat-card
   [ngClass]="[this.to.severity?.toLowerCase() ?? '']"
   [ngStyle]="to.isPlainOutfitMode && { 'box-shadow': 'none' }"
+  style="border: none"
   appearance="outlined">
   <mat-card-header *ngIf="to.header" style="margin-bottom: 1rem">{{
     to.header | translate

@@ -19,7 +19,9 @@
       [ngStyle]="{
         flex: currField.flexWidth ? '0 0 ' + currField.flexWidth : '1'
       }">
-      <formly-field [field]="element.fieldGroup[i]"></formly-field>
+      <formly-field
+        [field]="element.fieldGroup[i]"
+        style="flex: 1"></formly-field>
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
@@ -34,6 +36,6 @@
   class="mt-3"
   (click)="add()"
   [disabled]="field.templateOptions?.disabled">
-  <i class="eos-icons mr-2">add_circle</i>
+  <i class="eos-icons me-2">add_circle</i>
   {{ field.templateOptions?.addButtonText | translate }}
 </button>
@@ -1,14 +1,14 @@
 <div [hidden]="to.disabled">
   <ng-container *ngIf="isEditable.value">
-    <button mat-stroked-button color="primary" class="mr-3" (click)="submit()">
+    <button mat-stroked-button color="primary" class="me-3" (click)="submit()">
       {{ 'setting.SUBMIT' | translate }}
     </button>
     <button mat-stroked-button color="primary" (click)="cancel()">
       {{ 'cveProfile.CANCEL' | translate }}
     </button>
   </ng-container>
   <ng-container *ngIf="!isEditable.value">
-    <button mat-stroked-button color="primary" class="mr-3" (click)="edit()">
+    <button mat-stroked-button color="primary" class="me-3" (click)="edit()">
       {{ 'cveProfile.EDIT' | translate }}
     </button>
     <button mat-stroked-button color="primary" (click)="delete()">

@@ -1,5 +1,5 @@
 <div [class]="!to.isCell ? 'd-flex align-items-center' : ''">
-  <i class="eos-icons mr-3">{{ field.templateOptions?.icon }}</i>
+  <i class="eos-icons me-3">{{ field.templateOptions?.icon }}</i>
   <mat-form-field
     [class]="to.isCell ? 'pull-left' : 'w-' + (to.inputWidth ?? '100')"
     [hideRequiredMarker]="to.hideRequiredMarker ?? false"

@@ -3,14 +3,14 @@
   [formlyAttributes]="field"
   aria-label="Select an option"
   class="d-flex">
-  <label class="mr-2" *ngIf="field.templateOptions?.label">{{
+  <label class="me-2" *ngIf="field.templateOptions?.label">{{
     field.templateOptions?.label ?? '' | translate
   }}</label>
   <mat-radio-button
     *ngFor="let item of field.templateOptions?.items"
     [formlyAttributes]="field"
     [value]="item.value"
-    class="mr-3">
+    class="me-3">
     {{ item.viewValue | translate }}
   </mat-radio-button>
 </mat-radio-group>
@@ -12,7 +12,7 @@
       <h1 class="h5 font-weight-normal" [id]="to.label">
         {{ to.label! | translate }}
       </h1>
-      <div *ngIf="to.inline" class="ml-2">
+      <div *ngIf="to.inline" class="ms-2">
         <ng-container #fieldComponent></ng-container>
       </div>
     </div>
@@ -40,7 +40,7 @@ <h1 class="h5 font-weight-normal" [id]="to.label">
       <h1 class="h5 font-weight-normal" [id]="to.label">
         {{ to.label! | translate }}
       </h1>
-      <div *ngIf="to.inline" class="ml-2">
+      <div *ngIf="to.inline" class="ms-2">
         <ng-container #fieldComponent></ng-container>
       </div>
     </div>

@@ -1,7 +1,7 @@
 <div class="d-flex align-items-end">
   <span
     *ngIf="to.labelPosition === 'before'"
-    class="toggle-label mr-3"
+    class="toggle-label me-3"
     [id]="to.label"
     [ngClass]="to.fixed ? 'mat-slide-toggle-fixed-' + to.fixed : ''"
     >{{ field.templateOptions?.label ?? '' | translate }}
@@ -21,7 +21,7 @@
   </mat-slide-toggle>
   <span
     *ngIf="!to.labelPosition || to.labelPosition === 'after'"
-    class="toggle-label ml-3"
+    class="toggle-label ms-3"
     [ngClass]="to.fixed ? 'mat-slide-toggle-fixed-' + to.fixed : ''"
     >{{ field.templateOptions?.label ?? '' | translate }}</span
   >

@@ -401,7 +401,7 @@ export class GroupsService {
         cellRenderer: params => {
           let display = '';
           if (params.value && params.value.high)
-            display += `<span class="action-label px-1 danger mr-sm">${params.value.high}</span>`;
+            display += `<span class="action-label px-1 danger ">${params.value.high}</span>`;
           if (params.value && params.value.medium)
             display += `<span class="action-label px-1 warning">${params.value.medium}</span>`;
           return display;

@@ -51,6 +51,7 @@
 
 //Custom
 @import 'app/common';
+@import 'app/badge';
 @import 'app/security-event';
 @import 'app/settings';
 @import 'app/login-legacy';

@@ -0,0 +1,123 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+$badge-border-radius: .25rem !default;
+$badge-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$badge-pill-padding-x:              .6em !default;
+$badge-pill-border-radius:          10rem !default;
+$badge-focus-width: .2rem !default;
+$yiq-contrasted-threshold:  150 !default;
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin badge-variant($bg) {
+  color: color-yiq($bg) !important;
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-yiq($bg);
+      background-color: darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, 0.5);
+    }
+  }
+}
+
+// Color contrast
+@function color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return #141823;
+  } @else {
+    @return #fff;
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Sizing fix for badge in AG Grid cell renderer
+.ag-badge {
+  margin-left: 0 !important; // needed for conflicting .badge rules in eos-style.css & badges.component.scss
+}
+
+.ag-badge-60 {
+  width: 60px;
+}
+
+.ag-badge-80 {
+  width: 80px;
+}
+
+.ag-full {
+  width: 100%;
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}
+
+@each $color, $value in $nv-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}