@beacon-interactive-systems-llc/beacon-platform-ui 17.11.1 → 17.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "17.11.1",
+  "version": "17.11.3",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",

package/styles/_filters.scss

@@ -1,6 +1,6 @@
 $platform_filter_contrasts: (
   light: (
-    filterBackground: $beacon-dark-blue-100,
+    filterBackground: $beacon-dark-blue-50,
     filterBorder: $beacon-gray-border,
     filterShadow: 0px 3px 3px $beacon-black,
     filterSearchIcon: $beacon-gray-400,
@@ -9,7 +9,9 @@ $platform_filter_contrasts: (
     filterDropdownFocus: $beacon-dark-blue-200,
     filterDropdownText: $beacon-cyan-600,
     showingRowBg: $beacon-white,
-    showingRowColor: $beacon-green-500
+    showingRowColor: $beacon-green-500,
+    superTitleBg: $beacon-white,
+    superTitleColor: $beacon-dark-blue-300,
   ),
   dark: (
     filterBackground: $beacon-gray-700,
@@ -21,7 +23,9 @@ $platform_filter_contrasts: (
     filterDropdownFocus: $beacon-gray-600,
     filterDropdownText: $beacon-green-650,
     showingRowBg: $beacon-gray-700,
-    showingRowColor: $beacon-green-650
+    showingRowColor: $beacon-green-650,
+    superTitleBg: $beacon-gray-700,
+    superTitleColor: $beacon-gray-300,
   ),
   highcontrast: (
     filterBackground: $beacon-black,
@@ -33,7 +37,9 @@ $platform_filter_contrasts: (
     filterDropdownFocus: $highcontrast-bright-blue-200,
     filterDropdownText: $highcontrast-bright-green-200,
     showingRowBg: $beacon-black,
-    showingRowColor: $highcontrast-bright-green-200
+    showingRowColor: $highcontrast-bright-green-200,
+    superTitleBg: $beacon-black,
+    superTitleColor: $beacon-white,
   )
 );
 
@@ -68,6 +74,28 @@ $date-filter-width: calc(1em * 8);
     border-top-right-radius: 5px;
     height: auto;
 
+    // Optional row with larger title and some extra filter/list actions above the filter form
+    .supertitle-row {
+      @include themify($platform_filter_contrasts) {
+        background: apply('superTitleBg');
+        border-bottom: 0.5px solid apply('filterBorder');
+
+        .supertitle {
+          color: apply('superTitleColor');
+        }
+      }
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      display: flex;
+      height: auto;
+      min-height: 48px;
+      padding: 12px 16px;
+
+      .supertitle {
+        @include font-size--md;
+      }
+    }
+
     .form-row {
       @include themify($platform_filter_contrasts) {
         background: apply('filterBackground');

package/styles/_leftnav.scss

@@ -118,21 +118,24 @@ $icon-container-width: 50px;
       margin-left: 20px;
       width: calc(#{$leftnav-width} - 50px - 20px);
 
-      &:hover, &--active-secondary, &--active-level-two {
-        @include themify($platform_leftnav_contrasts) {
-          background: apply('navActiveBackground') !important;
-        }
-      }
-
       .level-two-option-container {
         @include themify($platform_leftnav_contrasts) {
-          color: apply('navTextActiveSecondary');
+          color: apply('navText');
         }
         font-size: 14px;
         position: relative;
         top: 7px;
       }
 
+      &:hover, &--active-secondary, &--active-level-two {
+        @include themify($platform_leftnav_contrasts) {
+          background: apply('navActiveBackground') !important;
+          .level-two-option-container {
+            color: apply('navTextActiveSecondary');
+          }
+        }
+      }
+
       mat-icon.link-active {
         @include themify($platform_leftnav_contrasts) {
           color: apply('navActiveIcon');
@@ -214,11 +217,11 @@ $icon-container-width: 50px;
           font-size: 24px;
           height: 24px;
 
-          &.collapsed { 
+          &.collapsed {
             width: 20px;
           }
 
-          &.open { 
+          &.open {
             width: 24px;
           }
         }
@@ -282,23 +285,6 @@ $icon-container-width: 50px;
       width: $leftnav-width;
     }
 
-    &--active {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navListItemActive');
-        color: apply('navTextActiveSecondary');
-
-        &:hover {
-          background: lighten(apply('navListItemActive'), 2%);
-        }
-      }
-
-      .icon-container, .option-container, mat-icon.expansion-icon {
-        @include themify($platform_leftnav_contrasts) {
-          color: apply('navTextActiveSecondary') !important;
-        }
-      }
-    }
-
     .icon-container {
       @include themify($platform_leftnav_contrasts) {
         color: apply('navText') !important;
@@ -343,6 +329,24 @@ $icon-container-width: 50px;
         opacity: 1.0;
       }
     }
+
+    // Placed after the general styles for icon-container, option-container, etc so the active style is applied correctly
+    &--active {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navListItemActive');
+        color: apply('navTextActiveSecondary');
+
+        &:hover {
+          background: lighten(apply('navListItemActive'), 2%);
+        }
+      }
+
+      .icon-container, .option-container, mat-icon.expansion-icon {
+        @include themify($platform_leftnav_contrasts) {
+          color: apply('navTextActiveSecondary') !important;
+        }
+      }
+    }
   }
 
   .brand-icon img {

package/styles/_widgets.scss

@@ -4,10 +4,12 @@ $platform_widget_contrasts: (
   light: (
     widgetText: $beacon-black,
     widgetBackground: $beacon-dark-blue-50,
-    widgetBackgroundSecondary: $beacon-dark-blue-50,
+    widgetBackgroundSecondary: $beacon-white,
+    widgetBackgroundMenu: $beacon-white,
     widgetBorder: $beacon-dark-blue-200,
     widgetHighlight: $beacon-dark-blue-200,
     widgetHeaderColor: $beacon-black,
+    widgetInfoBox: $beacon-gray-50,
     eventContainerBg: $beacon-gray-300,
     loginContainerBackground: $beacon-dark-blue-500,
     loginFormBackground: $beacon-white,
@@ -17,9 +19,11 @@ $platform_widget_contrasts: (
     widgetText: $beacon-gray-200,
     widgetBackground: $beacon-gray-600,
     widgetBackgroundSecondary: $beacon-gray-700,
+    widgetBackgroundMenu: $beacon-gray-600,
     widgetBorder: $beacon-gray-400,
     widgetHighlight: $beacon-gray-700,
     widgetHeaderColor: $beacon-gray-300,
+    widgetInfoBox: $beacon-gray-600,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
     loginFormBackground: $beacon-gray-600,
@@ -29,9 +33,11 @@ $platform_widget_contrasts: (
     widgetText: $beacon-white,
     widgetBackground: $beacon-black,
     widgetBackgroundSecondary: $beacon-black,
+    widgetBackgroundMenu: $beacon-black,
     widgetBorder: $beacon-white,
     widgetHighlight: $beacon-gray-700,
     widgetHeaderColor: $beacon-white,
+    widgetInfoBox: $beacon-gray-700,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
     loginFormBackground: $beacon-black,
@@ -53,12 +59,8 @@ $platform_widget_contrasts: (
       background: transparent !important;
     }
 
-    &.bg-primary {
-      background: $beacon-white;
-    }
-
-    &.bg-secondary {
-      background: $beacon-gray-50;
+    &.item-row-widget {
+      background: apply('widgetBackgroundSecondary') !important;
     }
   }
 
@@ -245,6 +247,12 @@ $platform_widget_contrasts: (
       padding: 3px;
     }
   }
+
+  .widget-infobar {
+    @include themify($platform_widget_contrasts) {
+      background: apply('widgetInfoBox') !important;
+    }
+  }
 }
 
 /*
@@ -338,7 +346,7 @@ $platform_widget_contrasts: (
 
 .mat-mdc-menu-panel {
   @include themify($platform_widget_contrasts) {
-    background: apply('widgetBackground');
+    background: apply('widgetBackgroundMenu');
     border: 0.5px solid apply('widgetBorder');
 
     .mat-mdc-menu-item-text {