@beacon-interactive-systems-llc/beacon-platform-ui 17.11.14 → 17.12.0

package/package.json

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

package/styles/_checkboxes.scss

@@ -1,121 +1,150 @@
-$platform_checkbox_contrasts: (
-  light: (
-    checkboxList: $beacon-dark-blue-500,
-    checkboxStandalone: $beacon-dark-blue-400,
-    checkboxStandaloneCheck: $beacon-white,
-  ),
-  dark: (
-    checkboxList: $beacon-dark-blue-300,
-    checkboxStandalone: $beacon-gray-400,
-    checkboxStandaloneCheck: $beacon-black,
-  ),
-  highcontrast: (
-    checkboxList: $highcontrast-bright-blue-300,
-    checkboxStandalone: $beacon-white,
-    checkboxStandaloneCheck: $beacon-black,
-  )
-);
-
-.mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
-.mat-mdc-list-option .mdc-checkbox:active:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
-.mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
-  @include themify($platform_checkbox_contrasts) {
-    border-color: apply('checkboxList');
-    background: apply('checkboxList');
-
-    .mat-ripple-element {
-      background: apply('checkboxList');
-    }
-  }
-}
-
-.mat-mdc-list-option
-.mdc-checkbox
-.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
-  @include themify($platform_checkbox_contrasts) {
-    border-color: apply('checkboxList');
-  }
-}
-
-.platform-checkbox {
-  .mat-ripple-element {
-    @include themify($platform_checkbox_contrasts) {
-      background: apply('checkboxList') !important;
-    }
-  }
-}
-
-// Selection list: grouping of checkbox options
-.platform-selection-list {
-  .platform-list-option {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    height: 40px !important;
-
-    .mdc-checkbox__native-control:checked~.mdc-checkbox__background {
-      @include themify($platform_checkbox_contrasts) {
-        border-color: apply('checkboxList') !important;
-        background-color: apply('checkboxList') !important;
-      }
-    }
-  }
-}
-
-// Checkbox within an ng-select
-.ng-select {
-  input[type="checkbox"] {
-    @include themify($platform_checkbox_contrasts) {
-      accent-color: apply('checkboxList');
-    }
-  }
-}
-
-
-.platform-checkbox {
-  display: block;
-  position: relative;
-  cursor: pointer;
-  font-size: 12px;
-
-  input[type=checkbox] {
-    visibility: hidden;
-
-    &:checked~.checkbox-container {
-      @include themify($platform_checkbox_contrasts) {
-        background-color: apply('checkboxStandalone');
-      }
-
-      &:after {
-        display: block;
-      }
-    }
-  }
-
-  .checkbox-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 14px;
-    width: 14px;
-    border-radius: 3px;
-    background-color: transparent;
-    @include themify($platform_checkbox_contrasts) {
-      border: 2px solid apply('checkboxStandalone');
-    }
-
-    &:after {
-      content: 'check';
-      font-family: 'Material Icons';
-      font-weight: 700;
-      position: absolute;
-      display: none;
-      left: -1px;
-      top: -3px;
-      width: 6px;
-      height: 10px;
-      @include themify($platform_checkbox_contrasts) {
-        color: apply('checkboxStandaloneCheck');
-      }
-    }
-  }
-}
+$platform_checkbox_contrasts: (
+  light: (
+    checkboxText: $beacon-black,
+    checkboxList: $beacon-dark-blue-500,
+    checkboxStandalone: $beacon-dark-blue-400,
+    checkboxStandaloneCheck: $beacon-white,
+  ),
+  dark: (
+    checkboxText: $beacon-gray-300,
+    checkboxList: $beacon-dark-blue-300,
+    checkboxStandalone: $beacon-gray-400,
+    checkboxStandaloneCheck: $beacon-black,
+  ),
+  highcontrast: (
+    checkboxText: $beacon-white,
+    checkboxList: $highcontrast-bright-blue-300,
+    checkboxStandalone: $beacon-white,
+    checkboxStandaloneCheck: $beacon-black,
+  )
+);
+
+.mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+.mat-mdc-list-option .mdc-checkbox:active:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+.mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
+  @include themify($platform_checkbox_contrasts) {
+    border-color: apply('checkboxList');
+    background: apply('checkboxList');
+
+    .mat-ripple-element {
+      background: apply('checkboxList');
+    }
+  }
+}
+
+.mat-mdc-list-option
+.mdc-checkbox
+.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
+  @include themify($platform_checkbox_contrasts) {
+    border-color: apply('checkboxList');
+  }
+}
+
+.mdc-list {
+  padding: 0px !important;
+}
+.mdc-list-item__content {
+  display:flex;
+  align-items: center;
+
+  .mdc-list-item__primary-text {
+    @include themify($platform_checkbox_contrasts) {
+      color: apply('checkboxText');
+    }
+    font-size: 12px;
+  }
+}
+
+.mdc-list-item--with-leading-checkbox .mdc-list-item__start {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+
+.platform-checkbox {
+  .mat-ripple-element {
+    @include themify($platform_checkbox_contrasts) {
+      background: apply('checkboxList') !important;
+    }
+  }
+}
+
+// Selection list: grouping of checkbox options
+.platform-selection-list {
+  align-items: flex-start;
+  display: flex !important;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  .platform-list-option {
+    flex: 1 1 auto;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    height: 35px !important;
+
+    .mdc-checkbox__native-control:checked~.mdc-checkbox__background {
+      @include themify($platform_checkbox_contrasts) {
+        border-color: apply('checkboxList') !important;
+        background-color: apply('checkboxList') !important;
+      }
+    }
+  }
+}
+
+// Checkbox within an ng-select
+.ng-select {
+  input[type="checkbox"] {
+    @include themify($platform_checkbox_contrasts) {
+      accent-color: apply('checkboxList');
+    }
+  }
+}
+
+
+.platform-checkbox {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  font-size: 12px;
+
+  input[type=checkbox] {
+    visibility: hidden;
+
+    &:checked~.checkbox-container {
+      @include themify($platform_checkbox_contrasts) {
+        background-color: apply('checkboxStandalone');
+      }
+
+      &:after {
+        display: block;
+      }
+    }
+  }
+
+  .checkbox-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 14px;
+    width: 14px;
+    border-radius: 3px;
+    background-color: transparent;
+    @include themify($platform_checkbox_contrasts) {
+      border: 2px solid apply('checkboxStandalone');
+    }
+
+    &:after {
+      content: 'check';
+      font-family: 'Material Icons';
+      font-weight: 700;
+      position: absolute;
+      display: none;
+      left: -1px;
+      top: -3px;
+      width: 6px;
+      height: 10px;
+      @include themify($platform_checkbox_contrasts) {
+        color: apply('checkboxStandaloneCheck');
+      }
+    }
+  }
+}

package/styles/_global-search.scss

@@ -0,0 +1,414 @@
+$platform_globalsearch_contrasts: (
+  light: (
+    searchInputBorder: $beacon-white,
+    searchInputPlaceholder: $beacon-white,
+    searchInputColor: $beacon-white,
+    searchResultsBackground: $beacon-white,
+    searchResultsShadow: 0px 3px 6px #00000019,
+    searchResultsBorder: none,
+    searchResultsTitle: $beacon-gray-400,
+    searchResultsText: $beacon-black,
+    filterOptionChipSelected: $beacon-dark-blue-400,
+    filterOptionChipSelectedText: $beacon-white,
+    filterOptionChipUnselected: $beacon-gray-200,
+    filterOptionChipUnselectedText: $beacon-gray-400,
+    searchResultsItemHighlighted: $beacon-dark-blue-500,
+    searchResultsItemHighlightedText: $beacon-white,
+    searchResultsViewAllBackground: $beacon-gray-100,
+    searchResultsViewAllText: $beacon-blue-200,
+    advancedSearchLabel: $beacon-cyan-600,
+    advancedSearchHeader: $beacon-dark-blue-200,
+    advancedSearchHeaderExpand: $beacon-black,
+    advancedSearchHeaderIconBase: $beacon-dark-blue-300,
+    advancedSearchHeaderIconColor: $beacon-white,
+    advancedSearchHeaderLabel: $beacon-dark-blue-400,
+    advancedSearchRowLink: $beacon-dark-blue-600,
+    advancedSearchRowExtended: $beacon-black,
+    advancedSearchRowBorder: $beacon-dark-blue-400
+  ),
+  dark: (
+    searchInputBorder: $beacon-gray-400,
+    searchInputPlaceholder: $beacon-gray-400,
+    searchInputColor: $beacon-gray-300,
+    searchResultsBackground: $beacon-gray-600,
+    serachResultsShadow: none,
+    searchResultsBorder: 1px solid $beacon-gray-500,
+    searchResultsTitle: $beacon-gray-400,
+    searchResultsText: $beacon-gray-300,
+    filterOptionChipSelected: $beacon-dark-blue-300,
+    filterOptionChipSelectedText: $beacon-gray-500,
+    filterOptionChipUnselected: $beacon-gray-500,
+    filterOptionChipUnselectedText: $beacon-gray-300,
+    searchResultsItemHighlighted: $beacon-dark-blue-300,
+    searchResultsItemHighlightedText: $beacon-gray-500,
+    searchResultsViewAllBackground: $beacon-gray-700,
+    searchResultsViewAllText: $beacon-blue-200,
+    advancedSearchLabel: $beacon-cyan-300,
+    advancedSearchHeader: $beacon-dark-blue-600,
+    advancedSearchHeaderExpand: $beacon-gray-300,
+    advancedSearchHeaderIconBase: $beacon-dark-blue-400,
+    advancedSearchHeaderIconColor: $beacon-gray-300,
+    advancedSearchHeaderLabel: $beacon-dark-blue-300,
+    advancedSearchRowLink: $beacon-dark-blue-300,
+    advancedSearchRowExtended: $beacon-gray-300,
+    advancedSearchRowBorder: $beacon-dark-blue-400
+  ),
+  highcontrast: (
+    searchInputBorder: $beacon-white,
+    searchInputPlaceholder: $beacon-white,
+    searchInputColor: $beacon-white,
+    searchResultsBackground: $beacon-black,
+    searchResultsShadow: none,
+    searchResultsBorder: 1px solid $beacon-white,
+    searchResultsTitle: $beacon-white,
+    searchResultsText: $beacon-white,
+    filterOptionChipSelected: $highcontrast-bright-blue-300,
+    filterOptionChipSelectedText: $beacon-black,
+    filterOptionChipUnselected: $beacon-gray-600,
+    filterOptionChipUnselectedText: $beacon-white,
+    searchResultsItemHighlighted: $highcontrast-bright-blue-200,
+    searchResultsItemHighlightedText: $beacon-black,
+    searchResultsViewAllBackground: $beacon-gray-700,
+    searchResultsViewAllText: $highcontrast-bright-blue-200,
+    advancedSearchLabel: $highcontrast-bright-blue-300,
+    advancedSearchHeader: $highcontrast-bright-blue-100,
+    advancedSearchHeaderExpand: $beacon-black,
+    advancedSearchHeaderIconBase: $beacon-black,
+    advancedSearchHeaderIconColor: $beacon-white,
+    advancedSearchHeaderLabel: $beacon-black,
+    advancedSearchRowLink: $highcontrast-bright-blue-300,
+    advancedSearchRowExtended: $beacon-white,
+    advancedSearchRowBorder: $beacon-dark-blue-400
+  )
+);
+
+.global-search {
+  position: relative;
+
+  &::before {
+    @include themify($platform_globalsearch_contrasts) {
+      color: apply('searchInputColor');
+    }
+    content: "search";
+    font-family: "Material Icons";
+    font-size: 14px;
+    left: 8px;
+    position: absolute;
+  }
+
+  &__search {
+    @include themify($platform_globalsearch_contrasts) {
+      border: 1px solid apply('searchInputBorder');
+      color: apply('searchInputColor');
+    }
+    background-color: transparent;
+    border-radius: 5px;
+    height: 32px;
+    text-indent: 24px;
+    outline: none;
+
+    &--closed {
+      transition: width 0.5s ease-in-out;
+      width: 150px !important;
+
+      &::placeholder {
+        @include themify($platform_globalsearch_contrasts) {
+          color: apply('searchInputPlaceholder');
+        }
+        font-size: 14px;
+      }
+    }
+
+    &--opened {
+      transition: width 0.5s ease-in-out;
+      width: 436px !important;
+
+      &::placeholder {
+        @include themify($platform_globalsearch_contrasts) {
+          color: apply('searchInputPlaceholder');
+        }
+        font-size: 14px;
+      }
+    }
+  }
+
+  &__results {
+    @include themify($platform_globalsearch_contrasts) {
+      background: apply('searchResultsBackground');
+      box-shadow: apply('searchResultsShadow');
+      border: apply("searchResultsBorder");
+    }
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: absolute;
+    top: 44px;
+
+    &--closed {
+      transition: all 0.5s ease-in-out;
+      transform: scaleX(0.0001) scaleY(0.0001);
+      height: 1px;
+      width: 1px;
+    }
+
+    &--opened {
+      transition: all 0.5s ease-in-out;
+      height: 427px;
+      overflow-x: hidden;
+      width: 436px;
+    }
+
+    &__filters-container {
+      align-items: start;
+      display: flex;
+      height: 401px;
+      overflow-y: scroll;
+      padding: 12px 12px 0px 12px;
+
+      .filters {
+        @include themify($platform_globalsearch_contrasts) {
+          color: apply('searchResultsText');
+        }
+        display: flex;
+        flex: 1 1 0px;
+        flex-direction: column;
+        line-height: 30px;
+        margin-bottom: 12px;
+        padding-right: 12px;
+
+        .filters-title {
+          @include themify($platform_globalsearch_contrasts) {
+            color: apply('searchResultsTitle');
+          }
+          align-items: center;
+          display: flex;
+          font-size: 12px;
+          text-transform: uppercase;
+        }
+      }
+
+      .result-groups {
+        display: flex;
+        flex: 1 1 0px;
+        flex-direction: column;
+        padding-left: 12px;
+
+        .result-group {
+          text-align: left;
+
+          &__title {
+            @include themify($platform_globalsearch_contrasts) {
+              color: apply('searchResultsTitle');
+            }
+            font-size: 12px;
+            line-height: 30px;
+            margin-bottom: 4px;
+            margin-top: 12px;
+            text-transform: uppercase;
+          }
+
+          &__item {
+            @include themify($platform_globalsearch_contrasts) {
+              color: apply('searchResultsText');
+            }
+            align-items: center;
+            display: flex;
+            font-size: 12px;
+            height: 20px;
+            text-indent: 8px;
+
+            &:hover {
+              @include themify($platform_globalsearch_contrasts) {
+                background: apply('searchResultsItemHighlighted');
+                color: apply('searchResultsItemHighlightedText')
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__view-all {
+      @include themify($platform_globalsearch_contrasts) {
+        background: apply('searchResultsViewAllBackground');
+      }
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      display: flex;
+      height: 26px;
+      line-height: 26px;
+      width: 100%;
+
+      .view-all-link {
+        margin-left: 24px;
+
+        &::before {
+          @include themify($platform_globalsearch_contrasts) {
+            color: apply('searchResultsViewAllText');
+          }
+          content: "search";
+          font-family: "Material Icons";
+          font-size: 14px;
+          left: 8px;
+          position: absolute;
+        }
+      }
+    }
+  }
+}
+
+.filter-option-chips {
+  display: flex;
+
+  .selection-chip {
+    @include themify($platform_globalsearch_contrasts) {
+      &.selected {
+        background: apply('filterOptionChipSelected');
+        color: apply('filterOptionChipSelectedText');
+      }
+
+      &.unselected {
+        background: apply('filterOptionChipUnselected');
+        color: apply('filterOptionChipUnselectedText');
+      }
+    }
+
+    border-radius: 10px;
+    display: inline-block;
+    line-height: 17px;
+    padding: 2px 6px;
+  }
+}
+
+.advanced-search-container {
+  align-items: start;
+  display: flex;
+  flex: 1 1 0px;
+
+  .advanced-search-filters {
+    width: 240px;
+
+    .advanced-search-form {
+      .search-form-row {
+        padding: 12px 0px;
+
+        .platform-selection-list {
+          max-height: 170px;
+
+          .platform-list-option {
+            max-height: 35px;
+            width: 50%;
+          }
+        }
+      }
+
+      label {
+        @include themify($platform_globalsearch_contrasts) {
+          color: apply('advancedSearchLabel');
+        }
+        @include font-weight--semibold;
+        font-size: 14px;
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .advanced-search-results {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin-top: -16px;
+
+    .results-section {
+      display: flex;
+      flex-direction: column;
+      margin-top: 16px;
+
+      &__header {
+        @include themify($platform_globalsearch_contrasts) {
+          background: apply('advancedSearchHeader');
+        }
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        height: 32px;
+        margin-left: 12px;
+        padding: 8px 12px;
+
+        .section-expand-icon {
+          @include themify($platform_globalsearch_contrasts) {
+            color: apply('advancedSearchHeaderExpand');
+          }
+          font-size: 16px;
+          height: 16px;
+          width: 16px;
+
+          &.expanded {
+            transform: rotate(90deg);
+          }
+        }
+
+        .section-header-icon-container {
+          @include themify($platform_globalsearch_contrasts) {
+            background: apply('advancedSearchHeaderIconBase');
+          }
+          border-radius: 2px;
+          height: 16px;
+          margin-left: 8px;
+          margin-right: 8px;
+          width: 16px;
+
+          .section-header-icon {
+            @include themify($platform_globalsearch_contrasts) {
+              color: apply('advancedSearchHeaderIconColor');
+            }
+            font-size: 16px;
+          }
+        }
+
+        .section-header-text {
+          @include themify($platform_globalsearch_contrasts) {
+            color: apply('advancedSearchHeaderLabel');
+          }
+          @include font-weight--semibold;
+          font-size: 14px;
+          text-transform: uppercase;
+        }
+      }
+
+      &__list {
+        display: flex;
+        flex-direction: column;
+        padding: 12px 0px 12px 36px;
+
+        .section-row {
+          font-size: 14px;
+          padding-bottom: 8px;
+
+          .row-link-display {
+            @include themify($platform_globalsearch_contrasts) {
+              color: apply('advancedSearchRowLink');
+            }
+            @include font-weight--semibold;
+            cursor: pointer;
+          }
+
+          .row-extended-display {
+            @include themify($platform_globalsearch_contrasts) {
+              color: apply('advancedSearchRowExtended');
+            }
+            margin-left: 12px;
+          }
+
+          &:not(:first-of-type) {
+            @include themify($platform_globalsearch_contrasts) {
+              border-top: 1px solid apply('advancedSearchRowBorder');
+            }
+            padding-top: 8px;
+          }
+        }
+      }
+    }
+  }
+}

package/styles/_layout.scss

@@ -181,7 +181,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     }
 
     .justify-content-end {
-      input {
+      input:not([type="checkbox"]) {
         height: 36px;
         font-size: 14px;
         width: 240px;
@@ -302,7 +302,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         display: flex;
         align-items: center;
         white-space: pre-wrap;
-        
+
         .pending-request-warning {
           position: relative;
           top: 12px;

package/styles/_material-drawer.scss

@@ -1,66 +1,70 @@
-$platform_drawer_contrasts: (
-  light: (
-    drawerBackground: $beacon-gray-100,
-    drawerFooterBackground: $beacon-white,
-    drawerFooterShadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.10)
-  ),
-  dark: (
-    drawerBackground: $beacon-black,
-    drawerFooterBackground: $beacon-gray-600,
-    drawerFooterShadow: none
-  ),
-  highcontrast: (
-    drawerBackground: $beacon-black,
-    drawerFooterBackground: $beacon-gray-600,
-    drawerFooterShadow: none
-  )
-);
-
-.drawer {
-  @include themify($platform_drawer_contrasts) {
-    background: apply('drawerBackground');
-  }
-  // hack to get opaque background to show up behind modal
-  box-shadow: 0px 1px 100px -5px rgba(0,0,0,0.25), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 300px 2000px rgba(0,0,0,0.22) !important;
-  max-height: calc(100vh);
-  padding-bottom: 90px;
-  z-index: 1001 !important;
-  position: fixed !important;
-
-  &--width-standard {
-    width: 590px !important;
-  }
-
-  &--width-double {
-    width: 1180px !important;
-  }
-
-  &--width-full {
-    width: calc(100% - 50px) !important;
-  }
-
-  &__body {
-    padding: 32px;
-  }
-
-  &__footer {
-    @include themify($platform_drawer_contrasts) {
-      background: apply('drawerFooterBackground');
-      box-shadow: apply('drawerFooterShadow');
-    }
-    bottom: 0;
-    height: 60px;
-    line-height: 60px;
-    position: absolute;
-    width: 100%;
-    left: 0;
-  }
-
-  &__widget {
-    margin-top: 0;
-  }
-}
-
-.drawer--with-margin-top {
-  margin-top: 50px;
-}
+$platform_drawer_contrasts: (
+  light: (
+    drawerBackground: $beacon-gray-100,
+    drawerFooterBackground: $beacon-white,
+    drawerFooterShadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.10)
+  ),
+  dark: (
+    drawerBackground: $beacon-black,
+    drawerFooterBackground: $beacon-gray-600,
+    drawerFooterShadow: none
+  ),
+  highcontrast: (
+    drawerBackground: $beacon-black,
+    drawerFooterBackground: $beacon-gray-600,
+    drawerFooterShadow: none
+  )
+);
+
+.drawer {
+  @include themify($platform_drawer_contrasts) {
+    background: apply('drawerBackground');
+  }
+  // hack to get opaque background to show up behind modal
+  box-shadow: 0px 1px 100px -5px rgba(0,0,0,0.25), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 300px 2000px rgba(0,0,0,0.22) !important;
+  max-height: calc(100vh);
+  padding-bottom: 90px;
+  z-index: 1001 !important;
+  position: fixed !important;
+
+  &--width-standard {
+    width: 590px !important;
+  }
+
+  &--width-double {
+    width: 1180px !important;
+  }
+
+  &--width-full {
+    width: calc(100% - 50px) !important;
+  }
+
+  &__body {
+    padding: 32px;
+  }
+
+  .cui-banner &__body {
+    margin-top: 21px;
+  }
+
+  &__footer {
+    @include themify($platform_drawer_contrasts) {
+      background: apply('drawerFooterBackground');
+      box-shadow: apply('drawerFooterShadow');
+    }
+    bottom: 0;
+    height: 60px;
+    line-height: 60px;
+    position: absolute;
+    width: 100%;
+    left: 0;
+  }
+
+  &__widget {
+    margin-top: 0;
+  }
+}
+
+.drawer--with-margin-top {
+  margin-top: 50px;
+}

package/styles/_ng-select.scss

@@ -1,223 +1,227 @@
-$min-dropdown-panel-width: 215px;
-
-.ng-select:not(.unset) {
-  width: 100% !important;
-  padding-bottom: 0 !important;
-  font-family: roboto-regular !important;
-
-  &.ng-select-disabled {
-    .ng-select-container {
-      @include themify($platform_form_contrasts) {
-        background: apply('formInputDisabled') !important;
-      }
-    }
-  }
-
-  &.invalid .ng-select-container {
-    @include themify($platform_form_contrasts) {
-      border-color: apply('formInvalid') !important;
-    }
-  }
-
-  &.ng-select-opened .ng-select-container{
-    @include themify($platform_form_contrasts) {
-      border: 1px solid apply('formInputBorderActive');
-    }
-  }
-
-  .ng-clear-wrapper {
-    @include themify($platform_text_contrasts) {
-      color: apply('textDefaultMuted') !important;
-    }
-  }
-
-  .ng-select-container {
-    min-height: 32px;
-    height: 32px;
-    @include form-element-border-fill;
-    @include themify($platform_form_contrasts) {
-      color: apply('formText') !important;
-    }
-  }
-
-  .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;
-      border-top: 0.5px solid apply('formInputBorderActive') !important;
-      border-right: none;
-      border-bottom: none;
-      border-left: none;
-      box-shadow: 0px 3px 7px 2px #00000029;
-
-      .ng-dropdown-header {
-        border-bottom: 1px solid apply('formInputBorder') !important;
-      }
-
-      .ng-option {
-        color: apply('formText') !important;
-        background: apply('formInputBackground') !important;
-        &.ng-option-selected {
-          background: apply('formControlSelected') !important;
-        }
-        &:hover {
-          background: apply('formSelectOptionHover') !important;
-          @include font-weight--bold;
-        }
-      }
-    }
-  }
-
-  &.ng-select-multiple .ng-value {
-    @include font-weight--semibold;
-    @include themify($platform_form_contrasts) {
-      background: apply('formHighlightOrange') !important;
-      color: apply('formHighlightOrangeText') !important;
-    }
-
-    border-radius: 8px !important;
-    margin-right: 8px !important;
-
-    .ng-value-label {
-      padding: 1px 0px 1px 5px !important;
-    }
-
-    .ng-value-icon {
-      z-index: 1001;
-      padding-left: 0px !important;
-      &:hover {
-        @include themify($platform_form_contrasts) {
-          background: transparent !important;
-          color: apply('formHighlightOrangeText') !important;
-        }
-      }
-
-      mat-icon {
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
-        position: relative;
-        top: 0.2rem;
-      }
-    }
-  }
-
-  // For use with platform-selection-list: makes each select as wide as its placeholder text
-  &.platform-filter-select {
-    border-radius: 4px;
-    font-size: 14px;
-
-    &.ng-select-multiple .ng-value {
-      @include font-weight--semibold;
-      @include themify($platform_filter_contrasts) {
-        background: apply('filterDropdownFocus') !important;
-        color: apply('filterDropdownText') !important;
-      }
-    }
-
-    .ng-select-container {
-      background: transparent !important;
-      &.ng-has-value {
-        @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) {
-            color: apply('filterDropdownText') !important;
-          }
-          text-wrap: nowrap;
-          position: unset;
-        }
-      }
-    }
-
-    .ng-input, .ng-clear-wrapper {
-      display: none;
-    }
-  }
-}
-
-/* Replace default dropdown triangle look with a mat-icon */
-.ng-select .ng-arrow-wrapper .ng-arrow {
-  border-color: none !important;
-  border-style: none !important;
-  border-width: 0 !important;
-}
-
-.ng-select .ng-arrow-wrapper::before {
-  content: 'expand_more';
-  font-family: 'Material Icons';
-  position: relative;
-  top: 2px;
-}
-
-.ng-select.ng-select-opened .ng-arrow-wrapper::before {
-  content: 'expand_less';
-  font-family: 'Material Icons';
-  position: relative;
-  top: 2px;
-}
-
-.ng-select .ng-clear-wrapper {
-  position: relative;
-  top: 2px;
-}
-
-.ng-select.search {
-  font-size: 14px;
-  line-height: 25px;
-
-  .ng-select-container {
-    width: 216px;
-  }
-
-  .ng-arrow-wrapper .ng-arrow {
-    display: none;
-  }
-}
-
-/* apply material form control highlight animation on focus for filter bar dropdowns */
-.filter-bar {
-  &__dropdown {
-    &.ng-select-opened {
-      @include themify($platform_form_contrasts) {
-        border-color: apply('formSelectOpened') !important;
-        box-shadow: apply('formSelectShadow');
-      }
-      border-radius: 0.375rem;
-      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    }
-  }
-}
+$min-dropdown-panel-width: 215px;
+
+.ng-select:not(.unset) {
+  width: 100% !important;
+  padding-bottom: 0 !important;
+  font-family: roboto-regular !important;
+
+  &.ng-select-disabled {
+    .ng-select-container {
+      @include themify($platform_form_contrasts) {
+        background: apply('formInputDisabled') !important;
+      }
+    }
+  }
+
+  &.invalid .ng-select-container {
+    @include themify($platform_form_contrasts) {
+      border-color: apply('formInvalid') !important;
+    }
+  }
+
+  &.ng-select-opened .ng-select-container{
+    @include themify($platform_form_contrasts) {
+      border: 1px solid apply('formInputBorderActive');
+    }
+  }
+
+  .ng-clear-wrapper {
+    @include themify($platform_text_contrasts) {
+      color: apply('textDefaultMuted') !important;
+    }
+  }
+
+  .ng-select-container {
+    min-height: 32px;
+    height: 32px;
+    @include form-element-border-fill;
+    @include themify($platform_form_contrasts) {
+      color: apply('formText') !important;
+    }
+  }
+
+  .ng-dropdown-panel {
+    min-width: $min-dropdown-panel-width;
+    max-height: 200px;
+
+    .ng-dropdown-panel-items .ng-option {
+      display: flex;
+    }
+
+    &::-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;
+      border-top: 0.5px solid apply('formInputBorderActive') !important;
+      border-right: none;
+      border-bottom: none;
+      border-left: none;
+      box-shadow: 0px 3px 7px 2px #00000029;
+
+      .ng-dropdown-header {
+        border-bottom: 1px solid apply('formInputBorder') !important;
+      }
+
+      .ng-option {
+        color: apply('formText') !important;
+        background: apply('formInputBackground') !important;
+        &.ng-option-selected {
+          background: apply('formControlSelected') !important;
+        }
+        &:hover {
+          background: apply('formSelectOptionHover') !important;
+          @include font-weight--bold;
+        }
+      }
+    }
+  }
+
+  &.ng-select-multiple .ng-value {
+    @include font-weight--semibold;
+    @include themify($platform_form_contrasts) {
+      background: apply('formHighlightOrange') !important;
+      color: apply('formHighlightOrangeText') !important;
+    }
+
+    border-radius: 8px !important;
+    margin-right: 8px !important;
+
+    .ng-value-label {
+      padding: 1px 0px 1px 5px !important;
+    }
+
+    .ng-value-icon {
+      z-index: 1001;
+      padding-left: 0px !important;
+      &:hover {
+        @include themify($platform_form_contrasts) {
+          background: transparent !important;
+          color: apply('formHighlightOrangeText') !important;
+        }
+      }
+
+      mat-icon {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+        position: relative;
+        top: 0.2rem;
+      }
+    }
+  }
+
+  // For use with platform-selection-list: makes each select as wide as its placeholder text
+  &.platform-filter-select {
+    border-radius: 4px;
+    font-size: 14px;
+
+    &.ng-select-multiple .ng-value {
+      @include font-weight--semibold;
+      @include themify($platform_filter_contrasts) {
+        background: apply('filterDropdownFocus') !important;
+        color: apply('filterDropdownText') !important;
+      }
+    }
+
+    .ng-select-container {
+      background: transparent !important;
+      &.ng-has-value {
+        @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) {
+            color: apply('filterDropdownText') !important;
+          }
+          text-wrap: nowrap;
+          position: unset;
+        }
+      }
+    }
+
+    .ng-input, .ng-clear-wrapper {
+      display: none;
+    }
+  }
+}
+
+/* Replace default dropdown triangle look with a mat-icon */
+.ng-select .ng-arrow-wrapper .ng-arrow {
+  border-color: none !important;
+  border-style: none !important;
+  border-width: 0 !important;
+}
+
+.ng-select .ng-arrow-wrapper::before {
+  content: 'expand_more';
+  font-family: 'Material Icons';
+  position: relative;
+  top: 2px;
+}
+
+.ng-select.ng-select-opened .ng-arrow-wrapper::before {
+  content: 'expand_less';
+  font-family: 'Material Icons';
+  position: relative;
+  top: 2px;
+}
+
+.ng-select .ng-clear-wrapper {
+  position: relative;
+  top: 2px;
+}
+
+.ng-select.search {
+  font-size: 14px;
+  line-height: 25px;
+
+  .ng-select-container {
+    width: 216px;
+  }
+
+  .ng-arrow-wrapper .ng-arrow {
+    display: none;
+  }
+}
+
+/* apply material form control highlight animation on focus for filter bar dropdowns */
+.filter-bar {
+  &__dropdown {
+    &.ng-select-opened {
+      @include themify($platform_form_contrasts) {
+        border-color: apply('formSelectOpened') !important;
+        box-shadow: apply('formSelectShadow');
+      }
+      border-radius: 0.375rem;
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+  }
+}

package/styles/_widgets.scss

@@ -9,6 +9,7 @@ $platform_widget_contrasts: (
     widgetBorder: $beacon-dark-blue-200,
     widgetHighlight: $beacon-dark-blue-200,
     widgetHeaderColor: $beacon-black,
+    widgetTitle: $beacon-dark-blue-300,
     widgetInfoBox: $beacon-gray-50,
     eventContainerBg: $beacon-gray-300,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -23,6 +24,7 @@ $platform_widget_contrasts: (
     widgetBorder: $beacon-gray-400,
     widgetHighlight: $beacon-gray-700,
     widgetHeaderColor: $beacon-gray-300,
+    widgetTitle: $beacon-gray-300,
     widgetInfoBox: $beacon-gray-600,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -37,6 +39,7 @@ $platform_widget_contrasts: (
     widgetBorder: $beacon-white,
     widgetHighlight: $beacon-gray-700,
     widgetHeaderColor: $beacon-white,
+    widgetTitle: $beacon-white,
     widgetInfoBox: $beacon-gray-700,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -91,6 +94,14 @@ $platform_widget_contrasts: (
     }
   }
 
+  &__title {
+    @include themify($platform_widget_contrasts) {
+      color: apply('widgetTitle');
+    }
+    @include font-size--md;
+    display: flex;
+  }
+
   &__body {
     @include themify($platform_widget_contrasts) {
       background: apply('widgetBackground') !important;
@@ -375,4 +386,4 @@ $platform_widget_contrasts: (
       color: apply('textDefaultInvert');
     }
   }
-}
+}

package/styles/styles.scss

@@ -15,6 +15,7 @@
 @import "forms";
 @import "filters";
 @import "fullcalendar";
+@import "global-search";
 @import "layout";
 @import "leftnav";
 @import "material-tabs";
@@ -224,9 +225,9 @@ $icon-sizes: 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px;
 
 @each $size in $icon-sizes {
   mat-icon.size--#{$size} {
-    font-size: $size;
-    height: $size;
-    width: $size;
+    font-size: $size !important;
+    height: $size !important;
+    width: $size !important;
   }
 }