@beacon-interactive-systems-llc/beacon-platform-ui 17.11.8 → 17.11.10

package/package.json

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

package/styles/_layout.scss

@@ -1,489 +1,501 @@
-$platform_layout_contrasts: (
-  light: (
-    detailBackground: $beacon-white,
-    containerBackground: $beacon-white,
-    containerHeaderBackground: $beacon-gray-100,
-    containerInfoBackground: $beacon-white,
-    containerSidebarTitle: $beacon-gray-400,
-    containerSidebarTitleBorder: $beacon-gray-300,
-    containerSidebarLabel: $beacon-gray-400,
-    containerSidebarBackground: $beacon-dark-blue-50,
-    containerSidebarBorderLeft: 1px solid $beacon-dark-blue-200,
-    containerBorder: $beacon-dark-blue-200,
-    containerShadow: inset 3px 0px 5px 0px $beacon-dark-blue-300,
-    detailWidgetTitle: $beacon-dark-blue-300,
-    headerBackground: linear-gradient(180deg, $beacon-dark-blue-700, $beacon-dark-blue-500),
-    headerText: $beacon-white,
-    headerModule: $beacon-dark-blue-400,
-    headerIconHover: $beacon-dark-blue-200,
-    headerShadow: 0px 3px 6px #00000040,
-    headerBorder: none,
-    headerHeight: 78px,
-    platformLinkColor: $beacon-blue-200,
-    platformLinkColorLight: $beacon-blue-100,
-    platformLinkColorMuted: $beacon-dark-blue-300,
-    platformLinkColorDark: $beacon-dark-blue-500,
-    platformLinkTableStyle: $beacon-dark-blue-400,
-    connectivityGreen: $beacon-green-550,
-    connectivityRed: $beacon-orange-600,
-    connectivityYellow: $beacon-yellow-500
-  ),
-  dark: (
-    detailBackground: $beacon-gray-700,
-    containerBackground: $beacon-gray-600,
-    containerHeaderBackground: $beacon-gray-500,
-    containerInfoBackground: $beacon-black,
-    containerSidebarTitle: $beacon-gray-300,
-    containerSidebarTitleBorder: $beacon-gray-300,
-    containerSidebarLabel: $beacon-gray-400,
-    containerSidebarBackground: $beacon-gray-600,
-    containerSidebarBorderLeft: none,
-    containerBorder: $beacon-gray-400,
-    containerShadow: none,
-    detailWidgetTitle: $beacon-gray-300,
-    headerBackground: $beacon-gray-600,
-    headerText: $beacon-gray-300,
-    headerModule: $beacon-gray-500,
-    headerIconHover: $beacon-dark-blue-400,
-    headerShadow: none,
-    headerBorder: none,
-    headerHeight: 78px,
-    platformLinkColor: $beacon-blue-200,
-    platformLinkColorLight: $beacon-green-550,
-    platformLinkColorMuted: $beacon-gray-200,
-    platformLinkColorDark: $beacon-gray-300,
-    platformLinkTableStyle: $beacon-dark-blue-300,
-    connectivityGreen: $beacon-green-600,
-    connectivityRed: $beacon-orange-700,
-    connectivityYellow: $beacon-yellow-600
-  ),
-  highcontrast: (
-    detailBackground: $beacon-black,
-    containerBackground: $beacon-black,
-    containerHeaderBackground: $beacon-gray-700,
-    containerInfoBackground: $beacon-black,
-    containerSidebarTitle: $beacon-white,
-    containerSidebarTitleBorder: $beacon-white,
-    containerSidebarLabel: $beacon-white,
-    containerSidebarBackground: $beacon-gray-700,
-    containerSidebarBorderLeft: none,
-    containerBorder: $beacon-white,
-    containerShadow: none,
-    detailWidgetTitle: $beacon-white,
-    headerBackground: $beacon-gray-700,
-    headerText: $beacon-white,
-    headerModule: $beacon-gray-600,
-    headerIconHover: $beacon-white,
-    headerShadow: none,
-    headerBorder: 1px solid $beacon-gray-500,
-    headerHeight: 80px, // Expand height slightly to accomodate tabs on a detail header without obscuring the border
-    platformLinkColor: $highcontrast-bright-blue-200,
-    platformLinkColorLight: $highcontrast-bright-blue-200,
-    platformLinkColorMuted: $beacon-dark-blue-300,
-    platformLinkColorDark: $beacon-dark-blue-300,
-    platformLinkTableStyle: $highcontrast-bright-blue-200,
-    connectivityGreen: $highcontrast-bright-green-200,
-    connectivityRed: $highcontrast-bright-orange-300,
-    connectivityYellow: $highcontrast-bright-yellow-200
-  )
-);
-
-$header-height: 50px;
-$header-banner-height: 24px;
-$detail-header-height: 78px;
-$min-detail-width: 1400px;
-$leftnav-width: 212px;
-$leftnav-collapsed-width: 50px;
-$detail-sidebar-width: 300px;
-
-$detail-container-padding: 1rem;
-$detail-view-width: calc(100vw - $leftnav-width);
-$detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
-
-.main-view-container {
-  position: relative;
-  left: calc(#{$leftnav-width});
-  width: calc(100vw - $leftnav-width);
-  transition: all 0.5s ease-in-out;
-
-  &--expanded {
-    left: calc(#{$leftnav-collapsed-width});
-    width: calc(100vw - $leftnav-collapsed-width);
-    transition: all 0.5s ease-in-out;
-
-    .list-view-container, .detail-view-container, .navbar__header {
-      width: calc(100vw - $leftnav-collapsed-width);
-      transition: all 0.5s ease-in-out;
-    }
-  }
-}
-
-.cui-banner {
-  .navbar.navbar__header, .leftnav {
-    margin-top: $header-banner-height !important;
-  }
-  .main-view-container {
-    margin-top: 70px !important;
-  }
-}
-
-.navbar {
-  &__header {
-    @include themify($platform_layout_contrasts) {
-      background: apply('headerBackground');
-      color: apply('headerText');
-      box-shadow: apply('headerShadow');
-    }
-
-    height: $header-height;
-    line-height: $header-height;
-    position: fixed;
-    top: 0;
-    transition: all 0.5s ease-in-out;
-    width: calc(100vw - $leftnav-width);
-    z-index: 1000;
-
-    .module {
-      @include themify($platform_layout_contrasts) {
-        background: apply('headerModule');
-        color: apply('headerText');
-      }
-      text-transform: uppercase;
-      height: 51px;
-    }
-
-    .connectivity-indicator {
-      position: relative;
-      top: 8px;
-
-      @include themify($platform_layout_contrasts) {
-        &.green { color: apply('connectivityGreen') }
-        &.red { color: apply('connectivityRed') }
-        &.yellow { color: apply('connectivityYellow') }
-      }
-    }
-
-    .justify-content-start {
-      position: relative;
-      top: -1px;
-    }
-
-    .justify-content-end {
-      input {
-        height: 36px;
-        font-size: 14px;
-        width: 240px;
-      }
-
-      mat-icon {
-        height: 24px;
-        width: 24px;
-        font-size: 24px;
-        position: relative;
-        top: 7px;
-
-        &:hover {
-          @include themify($platform_layout_contrasts) {
-            color: apply('headerIconHover') !important;
-          }
-          cursor: pointer;
-        }
-
-        .mat-badge-content {
-          top: -4px;
-          right: -4px !important;
-        }
-      }
-    }
-  }
-}
-
-.detail-view-container {
-  @include themify($platform_layout_contrasts) {
-    background: apply('containerBackground');
-  }
-  height: calc(100vh - $header-height);
-  margin-top: $header-height;
-  overflow-y: scroll;
-  transition: all 0.5s ease-in-out;
-  width: $detail-view-width;
-
-  &--expanded {
-    width: $detail-view-width-expanded;
-    transition: all 0.5s ease-in-out;
-
-    .detail {
-      min-width: $detail-view-width-expanded !important;
-      transition: all 0.5s ease-in-out;
-    }
-  }
-
-  .detail {
-    @include themify($platform_layout_contrasts) {
-      background: apply('detailBackground');
-    }
-    height: calc(100vh);
-    min-width: $detail-view-width;
-    transition: all 0.5s ease-in-out;
-    // width: calc($detail-view-width - (2*$detail-container-padding));
-
-    &__header {
-      @include themify($platform_layout_contrasts) {
-        background: apply('containerHeaderBackground');
-        box-shadow: apply('headerShadow');
-        border-top: apply('headerBorder');
-        border-bottom: apply('headerBorder');
-        height: apply('headerHeight');
-      }
-
-      padding: 12px 12px 60px;
-      position: absolute;
-      width: 100%;
-
-      .label {
-        @include font-color--default;
-        font-size: 12px;
-      }
-
-      .value {
-        @include font-weight--semibold;
-        @include font-color--default;
-        font-size: 16px;
-      }
-
-      .infobar {
-        @include themify($platform_layout_contrasts) {
-          background: apply('containerInfoBackground');
-          border: 1px solid apply('containerBorder');
-        }
-        border-radius: 4px;
-        height: 48px;
-        line-height: 46px;
-        display: flex;
-
-        .value {
-          font-size: 14px;
-        }
-
-        span {
-          display: inline-flex;
-          align-items: center;
-        }
-
-        &--secondary {
-          font-size: 12px;
-          border: none;
-          height: 40px;
-
-          .value {
-            font-size: 14px;
-          }
-        }
-
-        .mat-icon {
-          height: 48px;
-          line-height: 46px;
-        }
-      }
-
-      .header-text {
-        display: flex;
-        align-items: center;
-        white-space: pre-wrap;
-      }
-
-      mat-icon.three-dot-menu-trigger {
-        position: relative;
-        top: 13px;
-
-        &--pill {
-          top: 16px;
-        }
-      }
-    }
-
-    &__tabs {
-      min-width: 1002px;
-      width: calc(100% - 32px);
-
-      .action-bar {
-        //position: absolute;
-        //right: 10px;
-        //top: 10px;
-      }
-    }
-
-    &__body {
-      @include themify($platform_layout_contrasts) {
-        background: apply('detailBackground');
-      }
-      display: flex;
-      height: calc(100vh - $header-height - $detail-header-height);
-      position: relative;
-      overflow: hidden;
-      width: calc(100vw - $leftnav-collapsed-width - $detail-sidebar-width);
-
-      &__section {
-        overflow: scroll;
-        padding-top: 16px;
-        position: relative;
-        top: -16px;
-        transition: width 0.5s ease-in-out;
-        width: calc(100vw - $detail-sidebar-width - $leftnav-width - 32px);
-
-        &--expanded {
-          transition: width 0.5s ease-in-out;
-          width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 32px);
-        }
-      }
-
-      &__sidebar {
-        @include themify($platform_layout_contrasts) {
-          background: apply('containerSidebarBackground');
-          border-left: apply('containerSidebarBorderLeft')
-        }
-        height: calc(100vh - $header-height - $detail-header-height);
-        margin-left: 16px;
-        overflow-y: auto;
-        padding: 16px;
-        position: fixed;
-        right: 0px;
-        // Account for header/detail/cui banner height, with an extra few px to account for the detail header shadow
-        top: calc($header-height + $detail-header-height + $header-banner-height + 4px);
-        width: $detail-sidebar-width;
-
-        &__title {
-          @include themify($platform_layout_contrasts) {
-            color: apply('containerSidebarTitle');
-            border-bottom: 1px solid apply('containerSidebarTitleBorder');
-          }
-          @include font-size--md;
-          @include font-weight--semibold;
-          border-bottom: 1px solid $beacon-dark-blue-200;
-          display: flex;
-        }
-
-        .sidebar-label {
-          @include themify($platform_layout_contrasts) {
-            color: apply('containerSidebarLabel');
-          }
-          @include font-size--default;
-          padding-top: 10px;
-        }
-
-        .sidebar-value {
-          @include font-color--default;
-          @include font-size--default-md;
-        }
-      }
-    }
-
-    &__widget {
-      @include themify($platform_layout_contrasts) {
-        background: apply('containerBackground');
-        border: 1px solid apply('containerBorder');
-      }
-      border-radius: 5px;
-      margin-bottom: 16px;
-      min-height: 80px;
-      padding: 12px 16px;
-      width: 100%;
-
-      &__title {
-        @include themify($platform_layout_contrasts) {
-          color: apply('detailWidgetTitle');
-        }
-        @include font-size--md;
-        display: flex;
-      }
-
-      &__body {
-        @include font-size--default-md;
-      }
-
-      &--full-height {
-        min-height: calc(100vh - $header-height - $detail-header-height - 16px);
-      }
-    }
-
-    .widget-title-color {
-      @include themify($platform_layout_contrasts) {
-        color: apply('detailWidgetTitle');
-      }
-    }
-  }
-}
-
-.mat-drawer-container .mat-drawer-content .main-view-container {
-  @include themify($platform_layout_contrasts) {
-    background: apply('containerBackground');
-  }
-}
-
-.list-view-container {
-  @include themify($platform_layout_contrasts) {
-    background: apply('containerBackground');
-  }
-  box-shadow: inset 2px -3px 6px #00000029;
-  margin-top: 50px;
-  height: calc(100vh - $header-height);
-  width: calc(100vw - $leftnav-width);
-  min-width: 800px;
-  overflow-y: scroll;
-  transition: all 0.5s ease-in-out;
-
-  &.nested-list-container {
-    box-shadow: none;
-    margin-top: 0px !important;
-    padding: 0px !important;
-    width: 100%;
-    height: calc(100vh - ($header-height + $detail-header-height + 1rem));  // Container fluid padding: 1rem
-    transition: none;
-  }
-}
-
-.platform-link {
-  @include font-weight--semibold;
-
-  @include themify($platform_layout_contrasts) {
-    color: apply('platformLinkColor');
-  }
-
-  &:hover {
-    cursor: pointer;
-    @include font-weight--bold;
-    text-decoration: underline;
-  }
-
-  &--light {
-    @include themify($platform_layout_contrasts) {
-      color: apply('platformLinkColorLight');
-    }
-  }
-
-  &--muted {
-    @include themify($platform_layout_contrasts) {
-      color: apply('platformLinkColorMuted');
-    }
-  }
-
-  &--dark {
-    @include themify($platform_layout_contrasts) {
-      color: apply('platformLinkColorDark');
-    }
-  }
-
-  &--underlined {
-    text-decoration: underline;
-  }
-
-  &--no-underline {
-    text-decoration: none;
-  }
-
-  &--table-cell-link {
-    @include themify($platform_layout_contrasts) {
-      color: apply('platformLinkTableStyle');
-    }
-  }
-}
+$platform_layout_contrasts: (
+  light: (
+    detailBackground: $beacon-white,
+    containerBackground: $beacon-white,
+    containerHeaderBackground: $beacon-gray-100,
+    containerInfoBackground: $beacon-white,
+    containerSidebarTitle: $beacon-gray-400,
+    containerSidebarTitleBorder: $beacon-gray-300,
+    containerSidebarLabel: $beacon-gray-400,
+    containerSidebarBackground: $beacon-dark-blue-50,
+    containerSidebarBorderLeft: 1px solid $beacon-dark-blue-200,
+    containerBorder: $beacon-dark-blue-200,
+    containerShadow: inset 3px 0px 5px 0px $beacon-dark-blue-300,
+    detailWidgetTitle: $beacon-dark-blue-300,
+    headerBackground: linear-gradient(180deg, $beacon-dark-blue-700, $beacon-dark-blue-500),
+    headerText: $beacon-white,
+    headerModule: $beacon-dark-blue-400,
+    headerIconHover: $beacon-dark-blue-200,
+    headerShadow: 0px 3px 6px #00000040,
+    headerBorder: none,
+    headerHeight: 78px,
+    platformLinkColor: $beacon-blue-200,
+    platformLinkColorLight: $beacon-blue-100,
+    platformLinkColorMuted: $beacon-dark-blue-300,
+    platformLinkColorDark: $beacon-dark-blue-500,
+    platformLinkTableStyle: $beacon-dark-blue-400,
+    connectivityGreen: $beacon-green-550,
+    connectivityRed: $beacon-orange-600,
+    connectivityYellow: $beacon-yellow-500
+  ),
+  dark: (
+    detailBackground: $beacon-gray-700,
+    containerBackground: $beacon-gray-600,
+    containerHeaderBackground: $beacon-gray-500,
+    containerInfoBackground: $beacon-black,
+    containerSidebarTitle: $beacon-gray-300,
+    containerSidebarTitleBorder: $beacon-gray-300,
+    containerSidebarLabel: $beacon-gray-400,
+    containerSidebarBackground: $beacon-gray-600,
+    containerSidebarBorderLeft: none,
+    containerBorder: $beacon-gray-400,
+    containerShadow: none,
+    detailWidgetTitle: $beacon-gray-300,
+    headerBackground: $beacon-gray-600,
+    headerText: $beacon-gray-300,
+    headerModule: $beacon-gray-500,
+    headerIconHover: $beacon-dark-blue-400,
+    headerShadow: none,
+    headerBorder: none,
+    headerHeight: 78px,
+    platformLinkColor: $beacon-blue-200,
+    platformLinkColorLight: $beacon-green-550,
+    platformLinkColorMuted: $beacon-gray-200,
+    platformLinkColorDark: $beacon-gray-300,
+    platformLinkTableStyle: $beacon-dark-blue-300,
+    connectivityGreen: $beacon-green-600,
+    connectivityRed: $beacon-orange-700,
+    connectivityYellow: $beacon-yellow-600
+  ),
+  highcontrast: (
+    detailBackground: $beacon-black,
+    containerBackground: $beacon-black,
+    containerHeaderBackground: $beacon-gray-700,
+    containerInfoBackground: $beacon-black,
+    containerSidebarTitle: $beacon-white,
+    containerSidebarTitleBorder: $beacon-white,
+    containerSidebarLabel: $beacon-white,
+    containerSidebarBackground: $beacon-gray-700,
+    containerSidebarBorderLeft: none,
+    containerBorder: $beacon-white,
+    containerShadow: none,
+    detailWidgetTitle: $beacon-white,
+    headerBackground: $beacon-gray-700,
+    headerText: $beacon-white,
+    headerModule: $beacon-gray-600,
+    headerIconHover: $beacon-white,
+    headerShadow: none,
+    headerBorder: 1px solid $beacon-gray-500,
+    headerHeight: 80px, // Expand height slightly to accomodate tabs on a detail header without obscuring the border
+    platformLinkColor: $highcontrast-bright-blue-200,
+    platformLinkColorLight: $highcontrast-bright-blue-200,
+    platformLinkColorMuted: $beacon-dark-blue-300,
+    platformLinkColorDark: $beacon-dark-blue-300,
+    platformLinkTableStyle: $highcontrast-bright-blue-200,
+    connectivityGreen: $highcontrast-bright-green-200,
+    connectivityRed: $highcontrast-bright-orange-300,
+    connectivityYellow: $highcontrast-bright-yellow-200
+  )
+);
+
+$header-height: 50px;
+$header-banner-height: 24px;
+$detail-header-height: 78px;
+$min-detail-width: 1400px;
+$leftnav-width: 212px;
+$leftnav-collapsed-width: 50px;
+$detail-sidebar-width: 300px;
+
+$detail-container-padding: 1rem;
+$detail-view-width: calc(100vw - $leftnav-width);
+$detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
+
+.main-view-container {
+  position: relative;
+  left: calc(#{$leftnav-width});
+  width: calc(100vw - $leftnav-width);
+  transition: all 0.5s ease-in-out;
+
+  &--expanded {
+    left: calc(#{$leftnav-collapsed-width});
+    width: calc(100vw - $leftnav-collapsed-width);
+    transition: all 0.5s ease-in-out;
+
+    .list-view-container, .detail-view-container, .navbar__header {
+      width: calc(100vw - $leftnav-collapsed-width);
+      transition: all 0.5s ease-in-out;
+    }
+  }
+}
+
+.cui-banner {
+  .navbar.navbar__header, .leftnav {
+    margin-top: $header-banner-height !important;
+  }
+  .main-view-container {
+    margin-top: 70px !important;
+
+    .list-view-container {
+      height: calc(98vh - $header-height);
+
+      &.nested-component-list-container {
+        height: calc(85vh - $header-height) !important;
+      }
+    }
+  }
+
+  .detail-view-container .detail__body__sidebar {
+    height: calc(88vh - $header-height);
+  }
+}
+
+.navbar {
+  &__header {
+    @include themify($platform_layout_contrasts) {
+      background: apply('headerBackground');
+      color: apply('headerText');
+      box-shadow: apply('headerShadow');
+    }
+
+    height: $header-height;
+    line-height: $header-height;
+    position: fixed;
+    top: 0;
+    transition: all 0.5s ease-in-out;
+    width: calc(100vw - $leftnav-width);
+    z-index: 1000;
+
+    .module {
+      @include themify($platform_layout_contrasts) {
+        background: apply('headerModule');
+        color: apply('headerText');
+      }
+      text-transform: uppercase;
+      height: 51px;
+    }
+
+    .connectivity-indicator {
+      position: relative;
+      top: 8px;
+
+      @include themify($platform_layout_contrasts) {
+        &.green { color: apply('connectivityGreen') }
+        &.red { color: apply('connectivityRed') }
+        &.yellow { color: apply('connectivityYellow') }
+      }
+    }
+
+    .justify-content-start {
+      position: relative;
+      top: -1px;
+    }
+
+    .justify-content-end {
+      input {
+        height: 36px;
+        font-size: 14px;
+        width: 240px;
+      }
+
+      mat-icon {
+        height: 24px;
+        width: 24px;
+        font-size: 24px;
+        position: relative;
+        top: 7px;
+
+        &:hover {
+          @include themify($platform_layout_contrasts) {
+            color: apply('headerIconHover') !important;
+          }
+          cursor: pointer;
+        }
+
+        .mat-badge-content {
+          top: -4px;
+          right: -4px !important;
+        }
+      }
+    }
+  }
+}
+
+.detail-view-container {
+  @include themify($platform_layout_contrasts) {
+    background: apply('containerBackground');
+  }
+  height: calc(100vh - $header-height);
+  margin-top: $header-height;
+  overflow-y: scroll;
+  transition: all 0.5s ease-in-out;
+  width: $detail-view-width;
+
+  &--expanded {
+    width: $detail-view-width-expanded;
+    transition: all 0.5s ease-in-out;
+
+    .detail {
+      min-width: $detail-view-width-expanded !important;
+      transition: all 0.5s ease-in-out;
+    }
+  }
+
+  .detail {
+    @include themify($platform_layout_contrasts) {
+      background: apply('detailBackground');
+    }
+    height: calc(100vh);
+    min-width: $detail-view-width;
+    transition: all 0.5s ease-in-out;
+    // width: calc($detail-view-width - (2*$detail-container-padding));
+
+    &__header {
+      @include themify($platform_layout_contrasts) {
+        background: apply('containerHeaderBackground');
+        box-shadow: apply('headerShadow');
+        border-top: apply('headerBorder');
+        border-bottom: apply('headerBorder');
+        height: apply('headerHeight');
+      }
+
+      padding: 12px 12px 60px;
+      position: absolute;
+      width: 100%;
+
+      .label {
+        @include font-color--default;
+        font-size: 12px;
+      }
+
+      .value {
+        @include font-weight--semibold;
+        @include font-color--default;
+        font-size: 16px;
+      }
+
+      .infobar {
+        @include themify($platform_layout_contrasts) {
+          background: apply('containerInfoBackground');
+          border: 1px solid apply('containerBorder');
+        }
+        border-radius: 4px;
+        height: 48px;
+        line-height: 46px;
+        display: flex;
+
+        .value {
+          font-size: 14px;
+        }
+
+        span {
+          display: inline-flex;
+          align-items: center;
+        }
+
+        &--secondary {
+          font-size: 12px;
+          border: none;
+          height: 40px;
+
+          .value {
+            font-size: 14px;
+          }
+        }
+
+        .mat-icon {
+          height: 48px;
+          line-height: 46px;
+        }
+      }
+
+      .header-text {
+        display: flex;
+        align-items: center;
+        white-space: pre-wrap;
+      }
+
+      mat-icon.three-dot-menu-trigger {
+        position: relative;
+        top: 13px;
+
+        &--pill {
+          top: 16px;
+        }
+      }
+    }
+
+    &__tabs {
+      min-width: 1002px;
+      width: calc(100% - 32px);
+
+      .action-bar {
+        //position: absolute;
+        //right: 10px;
+        //top: 10px;
+      }
+    }
+
+    &__body {
+      @include themify($platform_layout_contrasts) {
+        background: apply('detailBackground');
+      }
+      display: flex;
+      height: calc(100vh - $header-height - $detail-header-height);
+      position: relative;
+      overflow: hidden;
+      width: calc(100vw - $leftnav-collapsed-width - $detail-sidebar-width);
+
+      &__section {
+        overflow: scroll;
+        padding-top: 16px;
+        position: relative;
+        top: -16px;
+        transition: width 0.5s ease-in-out;
+        width: calc(100vw - $detail-sidebar-width - $leftnav-width - 32px);
+
+        &--expanded {
+          transition: width 0.5s ease-in-out;
+          width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 32px);
+        }
+      }
+
+      &__sidebar {
+        @include themify($platform_layout_contrasts) {
+          background: apply('containerSidebarBackground');
+          border-left: apply('containerSidebarBorderLeft')
+        }
+        height: calc(100vh - $header-height - $detail-header-height);
+        margin-left: 16px;
+        overflow-y: auto;
+        padding: 16px;
+        position: fixed;
+        right: 0px;
+        // Account for header/detail/cui banner height, with an extra few px to account for the detail header shadow
+        top: calc($header-height + $detail-header-height + $header-banner-height + 4px);
+        width: $detail-sidebar-width;
+
+        &__title {
+          @include themify($platform_layout_contrasts) {
+            color: apply('containerSidebarTitle');
+            border-bottom: 1px solid apply('containerSidebarTitleBorder');
+          }
+          @include font-size--md;
+          @include font-weight--semibold;
+          border-bottom: 1px solid $beacon-dark-blue-200;
+          display: flex;
+        }
+
+        .sidebar-label {
+          @include themify($platform_layout_contrasts) {
+            color: apply('containerSidebarLabel');
+          }
+          @include font-size--default;
+          padding-top: 10px;
+        }
+
+        .sidebar-value {
+          @include font-color--default;
+          @include font-size--default-md;
+        }
+      }
+    }
+
+    &__widget {
+      @include themify($platform_layout_contrasts) {
+        background: apply('containerBackground');
+        border: 1px solid apply('containerBorder');
+      }
+      border-radius: 5px;
+      margin-bottom: 16px;
+      min-height: 80px;
+      padding: 12px 16px;
+      width: 100%;
+
+      &__title {
+        @include themify($platform_layout_contrasts) {
+          color: apply('detailWidgetTitle');
+        }
+        @include font-size--md;
+        display: flex;
+      }
+
+      &__body {
+        @include font-size--default-md;
+      }
+
+      &--full-height {
+        min-height: calc(100vh - $header-height - $detail-header-height - 16px);
+      }
+    }
+
+    .widget-title-color {
+      @include themify($platform_layout_contrasts) {
+        color: apply('detailWidgetTitle');
+      }
+    }
+  }
+}
+
+.mat-drawer-container .mat-drawer-content .main-view-container {
+  @include themify($platform_layout_contrasts) {
+    background: apply('containerBackground');
+  }
+}
+
+.list-view-container {
+  @include themify($platform_layout_contrasts) {
+    background: apply('containerBackground');
+  }
+  box-shadow: inset 2px -3px 6px #00000029;
+  margin-top: 50px;
+  height: calc(100vh - $header-height);
+  width: calc(100vw - $leftnav-width);
+  min-width: 800px;
+  overflow-y: scroll;
+  transition: all 0.5s ease-in-out;
+
+  &.nested-list-container {
+    box-shadow: none;
+    margin-top: 0px !important;
+    padding: 0px !important;
+    width: 100%;
+    height: calc(100vh - ($header-height + $detail-header-height + 1rem));  // Container fluid padding: 1rem
+    transition: none;
+  }
+}
+
+.platform-link {
+  @include font-weight--semibold;
+
+  @include themify($platform_layout_contrasts) {
+    color: apply('platformLinkColor');
+  }
+
+  &:hover {
+    cursor: pointer;
+    @include font-weight--bold;
+    text-decoration: underline;
+  }
+
+  &--light {
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkColorLight');
+    }
+  }
+
+  &--muted {
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkColorMuted');
+    }
+  }
+
+  &--dark {
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkColorDark');
+    }
+  }
+
+  &--underlined {
+    text-decoration: underline;
+  }
+
+  &--no-underline {
+    text-decoration: none;
+  }
+
+  &--table-cell-link {
+    @include themify($platform_layout_contrasts) {
+      color: apply('platformLinkTableStyle');
+    }
+  }
+}