@beacon-interactive-systems-llc/beacon-platform-ui 19.2.12 → 19.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.2.12",
+  "version": "19.2.15",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_forms.scss

@@ -125,7 +125,7 @@ $control-width-options: 40px, 56px, 80px, 108px, 124px, 140px;
 
       .ng-select-container {
         @include themify($platform_form_contrasts) {
-          border-color: apply('formInvalid');
+          border-color: apply('formInvalid') !important;
         }
       }
     }

package/styles/_layout.scss

@@ -18,6 +18,7 @@ $platform_layout_contrasts: (
     headerIconHover: $beacon-dark-blue-200,
     headerShadow: 0px 3px 6px #00000040,
     headerBorder: none,
+    headerBorderAlt: .5px solid $beacon-gray-300,
     platformLinkColor: $beacon-blue-200,
     platformLinkColorLight: $beacon-blue-100,
     platformLinkColorMuted: $beacon-dark-blue-300,
@@ -58,6 +59,7 @@ $platform_layout_contrasts: (
     headerIconHover: $beacon-dark-blue-400,
     headerShadow: none,
     headerBorder: none,
+    headerBorderAlt: .5px solid $beacon-gray-600,
     platformLinkColor: $beacon-blue-200,
     platformLinkColorLight: $beacon-green-550,
     platformLinkColorMuted: $beacon-gray-200,
@@ -98,6 +100,7 @@ $platform_layout_contrasts: (
     headerIconHover: $beacon-white,
     headerShadow: none,
     headerBorder: 1px solid $beacon-gray-500,
+    headerBorderAlt: .5px solid $beacon-gray-500,
     platformLinkColor: $highcontrast-bright-blue-200,
     platformLinkColorLight: $highcontrast-bright-blue-200,
     platformLinkColorMuted: $beacon-dark-blue-300,
@@ -132,12 +135,14 @@ $widths: 270px;
 $header-height: 50px;
 $header-banner-height: 24px;
 $detail-header-height: 78px;
+$detail-header-sm-height: 44px;
 $detail-header-xl-height: 100px;
 $min-detail-width: 1400px;
 $leftnav-width: 212px;
 $leftnav-collapsed-width: 50px;
 $detail-sidebar-width: 212px;
 $detail-tab-body-offset: 128px;
+$detail-tab-body-sm-offset: 140px;
 $detail-tab-body-xl-offset: 190px;
 
 $detail-container-padding: 1rem;
@@ -318,6 +323,23 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       position: absolute;
       width: 100%;
 
+      &.border-bottom--gray {
+        @include themify($platform_layout_contrasts) {
+          border-bottom: apply('headerBorderAlt');
+        }
+      }
+
+      &.no-shadow {
+        box-shadow: none !important;
+      }
+
+      &.sm {
+        height: $detail-header-sm-height;
+        padding: 12px 12px 8px 14px !important;
+        display: flex;
+        align-items: center;
+      }
+
       &.xl {
         height: $detail-header-xl-height;
       }
@@ -428,6 +450,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       top: $detail-tab-body-offset;
       width: calc(100% - 32px);
 
+      &.sm-header {
+        top: $detail-tab-body-sm-offset !important;
+      }
+
       &.xl-header {
         top: $detail-tab-body-xl-offset !important
       }

package/styles/_popover.scss

@@ -195,6 +195,8 @@ $platform_popover_contrasts: (
     padding: 0px;
 
     .form-popover {
+      &.width-490px { width: 490px !important; }
+      
       &--header {
         @include themify($platform_popover_contrasts) {
           background-color: apply('popoverFormHeader');

package/styles/_tables.scss

@@ -323,6 +323,19 @@ table.platform-table {
     height: 32px !important;
   }
 
+  thead.no-top-bars th {
+    @include themify($platform_table_contrasts) {
+      border-top: 1px solid apply('tableBorder');
+    }
+
+    &:first-of-type {
+      border-top-left-radius: 5px !important;
+    }
+    &:last-of-type {
+      border-top-right-radius: 5px !important;
+    }
+  }
+
   th.table-title {
     @include themify($platform_table_contrasts) {
       border-top: .5px solid apply('tableBorder');

package/styles/_widgets.scss

@@ -25,7 +25,8 @@ $platform_widget_contrasts: (
     selectedFilterBackground: $beacon-gray-100,
     selectedFilterAltBackground: $beacon-green-100,
     widgetLineChartText: $beacon-gray-500,
-    widgetCircleIconRed: $beacon-orange-500
+    widgetCircleIconRed: $beacon-orange-500,
+    suggestionTextAnimation: linear-gradient(90deg,rgba(12,119,255,1), rgba(184,61,18,1),rgba(12,119,255,1))
   ),
   dark: (
     widgetText: $beacon-gray-200,
@@ -53,6 +54,7 @@ $platform_widget_contrasts: (
     selectedFilterAltBackground: $beacon-green-600,
     widgetLineChartText: $beacon-gray-700,
     widgetCircleIconRed: $beacon-orange-500,
+    suggestionTextAnimation: linear-gradient(to right, rgba(12, 119, 255, 1), rgba(184, 61, 18, 1))
   ),
   highcontrast: (
     widgetText: $beacon-white,
@@ -79,7 +81,8 @@ $platform_widget_contrasts: (
     selectedFilterBackground: $beacon-gray-600,
     selectedFilterAltBackground: $highcontrast-bright-green-300,
     widgetLineChartText: $beacon-white,
-    widgetCircleIconRed: $beacon-orange-500
+    widgetCircleIconRed: $beacon-orange-500,
+    suggestionTextAnimation: linear-gradient(to right, rgba(12, 119, 255, 1), rgba(184, 61, 18, 1))
   )
 );
 
@@ -903,3 +906,37 @@ $platform_widget_contrasts: (
     }
   }
 }
+
+.suggestion-container {
+  margin-top: -10px;
+  .header {
+    @include themify($platform_text_contrasts) {
+      color: apply('textBlueDarkHighlight');
+    }
+    &--search {
+      @include themify($platform_widget_contrasts) {
+        background: apply('suggestionTextAnimation');
+      }
+      background-size: 200% auto !important;
+      -webkit-background-clip: text  !important;
+      -webkit-text-fill-color: transparent  !important;
+      animation: gradientMove 1.5s ease-in-out infinite;
+
+      &.fade-in {
+        opacity: 1;
+        transition: opacity 600ms ease-in-out;
+      }
+
+      &.fade-out {
+        opacity: 0;
+        transition: opacity 600ms ease-in-out;
+      }
+    }
+  }
+}
+
+@keyframes gradientMove {
+  0% { background-position: 0% center; }
+  50% { background-position: 100% center; }
+  100% { background-position: 0% center; }
+}