@beacon-interactive-systems-llc/beacon-platform-ui 17.8.1 → 17.9.0

package/package.json

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

package/styles/_buttons.scss

@@ -142,6 +142,16 @@ button.platform-btn {
     text-transform: uppercase;
   }
 
+  &--header-action {
+    position: relative;
+    top: 10px;
+  }
+
+  &--header-action-pill {
+    position: relative;
+    top: 12px;
+  }
+
   &--height-sm {
     height: 24px;
   }

package/styles/_filters.scss

@@ -8,6 +8,7 @@ $platform_filter_contrasts: (
     filterChipText: $beacon-black,
     filterDropdownFocus: $beacon-dark-blue-200,
     filterDropdownText: $beacon-cyan-600,
+    showingRowBg: $beacon-white
   ),
   dark: (
     filterBackground: $beacon-gray-600,
@@ -18,6 +19,7 @@ $platform_filter_contrasts: (
     filterChipText: $beacon-gray-300,
     filterDropdownFocus: $beacon-dark-blue-400,
     filterDropdownText: $beacon-cyan-300,
+    showingRowBg: $beacon-gray-600
   ),
   highcontrast: (
     filterBackground: $beacon-black,
@@ -28,6 +30,7 @@ $platform_filter_contrasts: (
     filterChipText: $beacon-black,
     filterDropdownFocus: $highcontrast-bright-blue-200,
     filterDropdownText: $beacon-white,
+    showingRowBg: $beacon-black
   )
 );
 
@@ -94,6 +97,7 @@ $date-filter-width: calc(1em * 8);
       @include font-color--default;
       @include themify($platform_filter_contrasts) {
         border-top: 0.5px solid apply('filterBorder');
+        background: apply('showingRowBg');
       }
       padding: 6px 8px;
       display: flex;
@@ -124,6 +128,7 @@ $date-filter-width: calc(1em * 8);
           color: apply('filterChipText');
         }
 
+        border-radius: 2px;
         height: 25px;
         margin-left: 4px;
         padding-left: .25rem;

package/styles/_layout.scss

@@ -219,7 +219,11 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
       mat-icon.three-dot-menu-trigger {
         position: relative;
-        top: 7.5px;
+        top: 13px;
+
+        &--pill {
+          top: 16px;
+        }
       }
     }
 
@@ -299,7 +303,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         border: 1px solid apply('containerBorder');
       }
       background: $beacon-white;
-      border-radius: 10px;
+      border-radius: 5px;
       margin-bottom: 16px;
       min-height: 80px;
       padding: 12px 16px;
@@ -359,6 +363,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     text-decoration: underline;
   }
 
+  &--light {
+    @include font-color--blue--light;
+  }
+
   &--muted {
     @include font-color--blue--muted;
   }

package/styles/_material-drawer.scss

@@ -36,7 +36,7 @@ $platform_drawer_contrasts: (
   }
 
   &--width-full {
-    width: calc(100% - 40px) !important;
+    width: calc(100% - 50px) !important;
   }
 
   &__body {

package/styles/_material-tabs.scss

@@ -34,6 +34,10 @@ $platform_tab_contrasts: (
       color: apply('tabLabelActive') !important;
     }
 
+    &:not(.mat-tab--active) .mdc-tab__text-label {
+      @include font-weight--light;
+    }
+
     .mdc-tab-indicator__content--underline {
       border-color: apply('tabBorderBottom') !important;
     }

package/styles/_ng-select.scss

@@ -36,6 +36,29 @@ $min-dropdown-panel-width: 215px;
 
   .ng-dropdown-panel {
     min-width: $min-dropdown-panel-width;
+    max-height: 200px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #fff;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $beacon-dark-blue-300;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar {
+      display: block !important;
+    }
+
+    -ms-overflow-style: auto;
+    scrollbar-width: auto;
+    overflow-y: auto;//scroll;
+
     @include themify($platform_form_contrasts) {
       background: apply('formInputBackground') !important;
       color: apply('formText') !important;
@@ -62,12 +85,18 @@ $min-dropdown-panel-width: 215px;
 
   &.ng-select-multiple .ng-value {
     @include font-weight--semibold;
-    border-radius: 8px !important;
     @include themify($platform_form_contrasts) {
       background: apply('formHighlightOrange') !important;
       color: apply('formHighlightOrangeText') !important;
     }
 
+    border-radius: 8px !important;
+    margin-right: 0px !important;
+    
+    .ng-value-label {
+      padding: 1px 0px 1px 5px !important;
+    }
+
     .ng-value-icon {
       z-index: 1001;
       padding-left: 0px !important;
@@ -107,10 +136,13 @@ $min-dropdown-panel-width: 215px;
         @include themify($platform_filter_contrasts) {
           background: apply('filterDropdownFocus') !important;
         }
+
+        border-radius: 4px;
       }
 
       .ng-value-container {
         padding-left: 0px;
+
         .ng-placeholder {
           @include font-weight--semibold;
           @include themify($platform_filter_contrasts) {

package/styles/_popover.scss

@@ -1,25 +1,24 @@
 $platform_popover_contrasts: (
   light: (
     popoverBackground: $beacon-dark-blue-50,
-    popoverBorder: $beacon-gray-300,
   ),
   dark: (
     popoverBackground: $beacon-gray-700,
-    popoverBorder: $beacon-gray-500,
   ),
   highcontrast: (
     popoverBackground: $beacon-black,
-    popoverBorder: $beacon-white,
   )
 );
 
 .popover {
   @include themify($platform_popover_contrasts) {
     background: apply('popoverBackground');
-    border: 1px solid apply('popoverBorder');
   }
-  position: absolute;
+  box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2),
+               2px 0 6px -2px rgba(0, 0, 0, 0.2),
+               0 2px 6px -2px rgba(0, 0, 0, 0.2);
   max-width: 100%;
+  position: absolute;
 }
 
 .popover-arrow {

package/styles/_typography.scss

@@ -7,8 +7,10 @@ $platform_text_contrasts: (
     textDefaultMuted: $beacon-gray-300,
     textDefaultInvert: $beacon-white,
     textBlue: $beacon-dark-blue-500,
+    textBlueLight: $beacon-blue-200,
     textBlueDark: $beacon-dark-blue-600,
     textBlueHighlight: $beacon-dark-blue-300,
+    textBlueDarkHighlight: $beacon-dark-blue-400,
     textCyan: $beacon-cyan-500,
     textCyanDark: $beacon-cyan-600,
     textGreen: $beacon-green-500,
@@ -25,8 +27,10 @@ $platform_text_contrasts: (
     textDefaultSemiMuted: $beacon-gray-300,
     textDefaultInvert: $beacon-gray-500,
     textBlue: $beacon-dark-blue-200,
+    textBlueLight: $beacon-blue-200,
     textBlueDark: $beacon-dark-blue-400,
     textBlueHighlight: $beacon-dark-blue-300,
+    textBlueDarkHighlight: $beacon-dark-blue-400,
     textCyan: $beacon-cyan-100,
     textCyanDark: $beacon-cyan-200,
     textGreen: $beacon-green-400,
@@ -43,8 +47,10 @@ $platform_text_contrasts: (
     textDefaultSemiMuted: $beacon-white,
     textDefaultInvert: $beacon-black,
     textBlue: $highcontrast-bright-blue-200,
+    textBlueLight: $beacon-blue-200,
     textBlueDark: $highcontrast-bright-blue-300,
     textBlueHighlight: $highcontrast-bright-blue-200,
+    textBlueDarkHighlight: $beacon-dark-blue-400,
     textCyan: $highcontrast-bright-blue-100,
     textCyanDark: $highcontrast-bright-blue-200,
     textGreen: $highcontrast-bright-green-200,
@@ -86,6 +92,7 @@ $font-sizes: 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px;
 @mixin font-color--muted { @include themify($platform_text_contrasts) { color: apply('textDefaultMuted') !important; } }
 @mixin font-color--semi-muted { @include themify($platform_text_contrasts) { color: apply('textDefaultSemiMuted') !important; } }
 @mixin font-color--blue { @include themify($platform_text_contrasts) { color: apply('textBlue') !important; } }
+@mixin font-color--blue--light { @include themify($platform_text_contrasts) { color: apply('textBlueLight') !important; } }
 @mixin font-color--blue--muted { @include themify($platform_text_contrasts) { color: apply('textBlueHighlight') !important; } }
 @mixin font-color--dark-background { @include themify($platform_text_contrasts) { color: apply('textDarkBackground') !important; } }
 @mixin font-color--green { @include themify($platform_text_contrasts) { color: apply('textGreen') !important; } }

package/styles/_widgets.scss

@@ -3,9 +3,9 @@
 $platform_widget_contrasts: (
   light: (
     widgetText: $beacon-black,
-    widgetBackground: $beacon-white,
+    widgetBackground: $beacon-dark-blue-50,
     widgetBackgroundSecondary: $beacon-dark-blue-50,
-    widgetBorder: $beacon-gray-300,
+    widgetBorder: $beacon-dark-blue-200,
     widgetHighlight: $beacon-dark-blue-200
   ),
   dark: (

package/styles/styles.scss

@@ -134,10 +134,10 @@ button, a {
 
     @include themify($platform_text_contrasts) {
       &.blue {
-        color: apply('textBlueHighlight');
+        color: apply('textBlueDarkHighlight');
 
         &:hover {
-          color: apply('textBlueHighlight') !important;
+          color: apply('textBlueDarkHighlight') !important;
           cursor: default;
         }
       }