IBS: _ibs UI Theme

28 files changed, 1199 insertions, 0 deletions

diff --git a/src/assets/images/_ibs/login-aside-vector.svg b/src/assets/images/_ibs/login-aside-vector.svg
new file mode 100644
index 00000000..8d1c1731
--- /dev/null
+++ b/src/assets/images/_ibs/login-aside-vector.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="40" height="32" viewBox="0 0 40 32"
+  fill="none">
+  <path d="M40 0L40 32L0 32L1.59859e-06 13.7143L13.3333 13.7143L13.3333 -2.33127e-06L40 0Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/_ibs/login-company-logo.svg b/src/assets/images/_ibs/login-company-logo.svg
new file mode 100644
index 00000000..57d11ff4
--- /dev/null
+++ b/src/assets/images/_ibs/login-company-logo.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="220px" height="50px" viewBox="0 0 89 13"
+  version="1.1">
+  <style type="text/css">
+    .st0{fill:#e11717;}
+  </style>
+  <g id="surface1">
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 5.648438 3.261719 C 5.351562 3.253906 5.0625 3.363281 4.847656 3.566406 C 4.628906 3.773438 4.503906 4.054688 4.496094 4.351562 L 4.496094 8.160156 C 4.511719 8.773438 5.019531 9.261719 5.636719 9.246094 L 19.867188 9.246094 L 19.867188 12.960938 L 3.414062 12.960938 C 1.578125 13 0.0625 11.542969 0.0195312 9.710938 C -0.0273438 9.664062 0.0195312 3.28125 0.0195312 3.28125 C 0.0625 1.449219 1.578125 -0.0078125 3.414062 0.03125 L 19.867188 0.03125 L 19.867188 3.261719 Z M 5.648438 3.261719 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 38.398438 0.0390625 L 28.191406 9.738281 L 28.191406 3.199219 L 30.476562 3.195312 L 30.476562 0.0390625 L 23.609375 0.0390625 L 23.609375 12.96875 L 29.929688 12.96875 L 39.78125 3.296875 L 39.78125 12.96875 L 44.269531 12.96875 L 44.269531 0.0390625 Z M 38.398438 0.0390625 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 59.210938 0.0390625 L 50.109375 0.0390625 L 50.109375 3.226562 L 51.542969 3.226562 L 46.457031 12.96875 L 50.761719 12.96875 L 55.828125 3.269531 L 57.519531 3.269531 L 62.582031 12.96875 L 67.132812 12.96875 L 60.347656 0.0390625 Z M 59.210938 0.0390625 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 82.214844 0.0390625 L 72.0625 0.0390625 L 72.0625 3.226562 L 73.410156 3.226562 L 68.34375 12.96875 L 72.648438 12.96875 L 73.46875 11.347656 L 83.597656 11.347656 L 84.441406 12.96875 L 88.996094 12.96875 Z M 75.160156 8.117188 L 77.6875 3.261719 L 79.378906 3.261719 L 81.910156 8.109375 Z M 75.160156 8.117188 "/>
+  </g>
+</svg>
diff --git a/src/assets/images/_ibs/login-main-vector.svg b/src/assets/images/_ibs/login-main-vector.svg
new file mode 100644
index 00000000..69d2dd75
--- /dev/null
+++ b/src/assets/images/_ibs/login-main-vector.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="80" height="64" viewBox="0 0 80 64"
+  fill="none">
+  <path d="M0 64L0 0L80 0V36.5714H53.3333V64L0 64Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/_ibs/logo-header.svg b/src/assets/images/_ibs/logo-header.svg
new file mode 100644
index 00000000..3ba2b022
--- /dev/null
+++ b/src/assets/images/_ibs/logo-header.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="90px" height="36px" viewBox="0 0 89 13"
+  version="1.1">
+  <style type="text/css">
+    .st0{fill:#e11717;}
+  </style>
+  <g id="surface1">
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 5.648438 3.261719 C 5.351562 3.253906 5.0625 3.363281 4.847656 3.566406 C 4.628906 3.773438 4.503906 4.054688 4.496094 4.351562 L 4.496094 8.160156 C 4.511719 8.773438 5.019531 9.261719 5.636719 9.246094 L 19.867188 9.246094 L 19.867188 12.960938 L 3.414062 12.960938 C 1.578125 13 0.0625 11.542969 0.0195312 9.710938 C -0.0273438 9.664062 0.0195312 3.28125 0.0195312 3.28125 C 0.0625 1.449219 1.578125 -0.0078125 3.414062 0.03125 L 19.867188 0.03125 L 19.867188 3.261719 Z M 5.648438 3.261719 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 38.398438 0.0390625 L 28.191406 9.738281 L 28.191406 3.199219 L 30.476562 3.195312 L 30.476562 0.0390625 L 23.609375 0.0390625 L 23.609375 12.96875 L 29.929688 12.96875 L 39.78125 3.296875 L 39.78125 12.96875 L 44.269531 12.96875 L 44.269531 0.0390625 Z M 38.398438 0.0390625 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 59.210938 0.0390625 L 50.109375 0.0390625 L 50.109375 3.226562 L 51.542969 3.226562 L 46.457031 12.96875 L 50.761719 12.96875 L 55.828125 3.269531 L 57.519531 3.269531 L 62.582031 12.96875 L 67.132812 12.96875 L 60.347656 0.0390625 Z M 59.210938 0.0390625 "/>
+    <path class="st0" style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 82.214844 0.0390625 L 72.0625 0.0390625 L 72.0625 3.226562 L 73.410156 3.226562 L 68.34375 12.96875 L 72.648438 12.96875 L 73.46875 11.347656 L 83.597656 11.347656 L 84.441406 12.96875 L 88.996094 12.96875 Z M 75.160156 8.117188 L 77.6875 3.261719 L 79.378906 3.261719 L 81.910156 8.109375 Z M 75.160156 8.117188 "/>
+  </g>
+</svg>
diff --git a/src/assets/styles/_obmc-ibs.scss b/src/assets/styles/_obmc-ibs.scss
new file mode 100644
index 00000000..eb22535d
--- /dev/null
+++ b/src/assets/styles/_obmc-ibs.scss
@@ -0,0 +1,6 @@
+// Vendor styles
+@import "./bootstrap";
+@import "~bootstrap-vue/src/index";
+
+// IBS BMC styles
+@import "./bmc/_ibs";
diff --git a/src/assets/styles/bmc/_ibs/_alert.scss b/src/assets/styles/bmc/_ibs/_alert.scss
new file mode 100644
index 00000000..d85e9127
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_alert.scss
@@ -0,0 +1,70 @@
+.alert {
+  display: flex;
+  padding: $spacer;
+  border-width: 0 0 0 3px;
+  color: gray("800");
+  margin-bottom: $spacer;
+
+  &.small {
+    padding: $spacer / 2;
+    font-size: 1rem;
+  }
+
+  .close {
+    font-weight: 300;
+    opacity: 1;
+  }
+
+  .alert-icon {
+    display: inline-flex;
+    align-items: flex-start;
+    margin-right: $spacer;
+    margin-bottom: $spacer;
+
+    @include media-breakpoint-up(sm) {
+      margin-bottom: 0;
+    }
+  }
+
+  .alert-content {
+    flex: 1 1 auto;
+  }
+
+  .alert-title {
+    margin-bottom: $spacer / 2;
+  }
+
+  .alert-msg {
+    p + p {
+      margin-bottom: $spacer;
+    }
+
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  &.alert-info {
+    border-left-color: theme-color("info");
+    background-color: theme-color-light("info");
+    fill: theme-color("info");
+  }
+
+  &.alert-success {
+    border-left-color: theme-color("success");
+    background-color: theme-color-light("success");
+    fill: theme-color("success");
+  }
+
+  &.alert-danger {
+    border-left-color: theme-color("danger");
+    background-color: theme-color-light("danger");
+    fill: theme-color("danger");
+  }
+
+  &.alert-warning {
+    border-left-color: theme-color("warning");
+    background-color: theme-color-light("warning");
+    fill: theme-color("warning");
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_badge.scss b/src/assets/styles/bmc/_ibs/_badge.scss
new file mode 100644
index 00000000..7d59e9a6
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_badge.scss
@@ -0,0 +1,21 @@
+.badge-pill {
+  // Need to explicitly set border-radius
+  // for pill variant because global $enable-rounded
+  // Bootstrap setting removes rounded pill style
+  border-radius: 10rem;
+  fill: currentColor;
+  font-weight: 400;
+  line-height: 1.5;
+  display: inline-flex;
+  .close {
+    font-size: 1em;
+    margin-left: $spacer/2;
+    font-weight: inherit;
+    color: inherit;
+  }
+}
+
+.badge-primary {
+  background-color: theme-color-light("info");
+  color: theme-color("info");
+}
diff --git a/src/assets/styles/bmc/_ibs/_base.scss b/src/assets/styles/bmc/_ibs/_base.scss
new file mode 100644
index 00000000..40806995
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_base.scss
@@ -0,0 +1,102 @@
+
+//
+// Scrollbars:
+//
+/* W3C standard: Firefox only */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(12,32,64,.7) transparent;
+}
+
+/* For Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(12,32,64,.7);
+  border-radius: 2px;
+  border: 2px solid transparent;
+}
+
+//
+// Headers:
+//
+h1,
+.h1 {
+  font-size: 2.25rem !important;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h2,
+.h2 {
+  font-size: 1.5rem !important;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h3,
+.h3 {
+  font-size: 1.5rem !important;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h4,
+.h4 {
+  font-size: 1.25rem !important;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h5,
+.h5 {
+  font-size: 1rem !important;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h6,
+.h6 {
+  font-size: 0.825rem !important;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+
+.navbar-brand {
+  font-size: 1.4rem !important;
+}
+
+.nav-link--current{
+  background-color: $red-light-background !important;
+  color: $red !important;
+  &:hover,
+  &:focus {
+    background-color: $red-light-background !important;
+    color: $red !important;
+  }
+}
+
+.btn-link:active, .nav-link:active {
+  background-color: $red-light-background !important;
+  color: $red !important;
+}
+
+.app-header .navbar-text, .app-header .nav-link, .app-header .btn-link {
+  &:hover {
+    background-color: $red-40 !important;
+  }
+  &:active {
+    background-color: $red-active !important;
+  }
+  &:focus {
+    outline: 0;
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss b/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss
new file mode 100644
index 00000000..87332f4b
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss
@@ -0,0 +1,28 @@
+.container-xl {
+  // Fluid layout container class sets 100%
+  // width until xl breakpoint. Once a max-width
+  // is set, setting the left margin to 0 is needed
+  // so the content doesn't center align
+  // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
+  margin-left: 0;
+}
+
+@media (min-width: 1200px) {
+  .container-xl {
+    max-width: unset !important;
+  }
+  .col-md-9,
+  .col-xl-9,
+  .col-xl-10,
+  .col-xl-11 {
+    flex: 0 0 100%;
+    max-width: unset !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md-9 {
+    flex: 0 0 100%;
+    max-width: unset !important;
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_buttons.scss b/src/assets/styles/bmc/_ibs/_buttons.scss
new file mode 100644
index 00000000..b3a69757
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_buttons.scss
@@ -0,0 +1,174 @@
+.btn {
+  padding-top: $spacer / 2;
+  padding-right: $spacer;
+  padding-bottom: $spacer / 2;
+  padding-left: $spacer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  svg {
+    margin-right: $spacer / 4;
+  }
+  &:disabled {
+    color: $red;
+    fill: currentColor;
+    box-shadow: none !important;
+    &:not(.btn-link) {
+      border-color: gray("400");
+      background-color: gray("400");
+    }
+  }
+}
+
+.btn-primary {
+  background-color: $red;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 2px -1px #4f252566 inset;
+  &:hover {
+    background-color: $red-hover;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    background-color: $red-click;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    background-color: $red;
+  }
+  &:active {
+    border: none;
+    box-shadow: none;
+    background-color: $red;
+  }
+}
+
+.btn-secondary {
+  background-color: $dark;
+  color: $gray-2;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  &:hover {
+    background-color: $dark-hover;
+    color: $gray-2;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    color: $gray-2;
+    background-color: $dark;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    color: $gray-2;
+    background-color: $dark;
+  }
+}
+
+.btn-unstiled {
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.btn-popover {
+  border: none;
+  color: $red;
+  height: 28px;
+  border-radius: $border-radius;
+  font-weight: 500;
+  font-size: 12px;
+  transition: ease-in 0.2s;
+  &:hover {
+    color: $white;
+    transition: ease-in 0.2s;
+  }
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+  &.selected-unit-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+  &.selected-choice-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+}
+
+.btn-toogle-popover {
+  justify-content: flex-start;
+  width: 25px;
+  height: 16px;
+  padding: 0;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
+// Global style for all button link
+.btn-link {
+  color: $text-primary;
+  text-decoration: none !important;
+  &:hover {
+    background-color: gray("200");
+    color: theme-color("primary");
+  }
+  &:active {
+    background-color: gray("300");
+  }
+  &:disabled {
+    box-shadow: $btn-focus-box-shadow;
+  }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+    .icon-expand-right {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
+}
+
+// Icon only buttons
+.btn-icon-only svg {
+  margin-right: 0;
+}
+
+// Datepicker, clear search and Password toggle buttons
+.input-action-btn,
+.btn-datepicker {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
+}
+
+// Contain input buttons within input
+.btn-datepicker .dropdown-toggle,
+.input-action-btn {
+  padding: 6px;
+  margin: 1px;
+}
diff --git a/src/assets/styles/bmc/_ibs/_calendar.scss b/src/assets/styles/bmc/_ibs/_calendar.scss
new file mode 100644
index 00000000..9a53169d
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_calendar.scss
@@ -0,0 +1,17 @@
+.b-calendar-nav {
+  .btn {
+    &:hover {
+      background: none;
+      color: theme-color("dark");
+    }
+  }
+}
+
+.b-calendar-grid .btn {
+  display: inline-block;
+}
+
+// Date picker focus
+.b-calendar .b-calendar-grid {
+  padding: 6px 12px;
+}
diff --git a/src/assets/styles/bmc/_ibs/_card.scss b/src/assets/styles/bmc/_ibs/_card.scss
new file mode 100644
index 00000000..d7ac04d2
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_card.scss
@@ -0,0 +1,37 @@
+.card {
+  border-radius: $border-radius;
+  .bg-success {
+    background-color: theme-color-light('success')!important;
+  }
+}
+
+.card-header {
+  .card-header-tabs {
+    border: none !important;
+
+    .nav-link {
+      border: none !important;
+      color: $text-secondary;
+      font-weight: 500 !important;
+      background: none !important;
+      &:hover {
+        color: $red-hover
+      }
+    }
+
+    .nav-link.active {
+      color: $red-active !important;
+      text-decoration: underline;
+    }
+  }
+}
+
+.card-body dd .status-icon {
+  line-height: 1.1;
+}
+
+.card-buttons > a {
+  font-weight: 500;
+  font-size: .825rem;
+  vertical-align: baseline;
+}
diff --git a/src/assets/styles/bmc/_ibs/_dropdown.scss b/src/assets/styles/bmc/_ibs/_dropdown.scss
new file mode 100644
index 00000000..02e4e855
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_dropdown.scss
@@ -0,0 +1,49 @@
+// Make calendar visible over the table
+.dropdown-menu {
+  z-index: $zindex-dropdown + 1;
+  padding: $spacer / 2;
+  border-radius: $border-radius;
+}
+
+.dropdown-item {
+  padding: $spacer / 4 $spacer / 2;
+  margin: $spacer / 4;
+  width: auto;
+  border-radius: $border-radius;
+  &:hover {
+    background-color: $red-hover;
+    color: $white;
+  }
+  &:active {
+    background-color: $red-active;
+  }
+  &:focus {
+    outline: none;
+    background-color: $red-click;
+    box-shadow: inset 0 0 0 2px theme-color("primary");
+  }
+}
+
+.b-dropdown-form {
+  padding: $spacer/2;
+  .form-group {
+    margin-bottom: $spacer/2;
+  }
+}
+
+// Table filter dropdown clear button style
+.table-filter {
+  .dropdown-item {
+    &:hover {
+      background-color: gray("200");
+    }
+    &:active {
+      background-color: gray("300");
+    }
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      box-shadow: inset 0 0 0 2px theme-color("primary");
+    }
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_forms.scss b/src/assets/styles/bmc/_ibs/_forms.scss
new file mode 100644
index 00000000..914bf379
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_forms.scss
@@ -0,0 +1,210 @@
+// Helper text
+.form-text {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+  margin-top: -$spacer / 4;
+  margin-bottom: $spacer / 2;
+  color: gray("700")!important;
+}
+
+// Legend label
+.col-form-label {
+  color: gray("800");
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
+.form-group {
+  margin-bottom: $spacer * 2;
+}
+
+.custom-select,
+.form-control,
+.input-group-text {
+  border-radius: $border-radius;
+  background-color: $white;
+}
+
+.custom-select,
+.form-control {
+  &:disabled {
+    background-color: gray("400");
+    color: gray("600");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
+  &.is-invalid,
+  &:invalid {
+    border: 1px solid theme-color("danger") !important;
+  }
+}
+
+.form-control::-webkit-outer-spin-button,
+.form-control::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.form-control[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.form-control {
+  color: $text-secondary;
+  border-radius: $border-radius;
+  border: none;
+  background-color: $gray-5;
+  font-size: 0.875rem;
+  &:focus {
+    color: $text-secondary;
+  }
+  &:hover {
+    background-color: $gray-5-hover;
+  }
+}
+
+// Inverted form colors
+.form-background {
+  background-color: none;
+  padding: 0 !important;
+  .custom-select,
+  .form-control {
+    color: #0c1c29e6;
+    border-radius: $border-radius;
+    border: none;
+    background-color: $gray-5;
+    &:hover {
+      background-color: $gray-5-hover;
+    }
+    &:focus {
+      border: 1px solid gray("400");
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
+    &.is-valid {
+      border: 1px solid gray("400");
+    }
+  }
+}
+
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid $on-surface-secondary;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
+.custom-control-input:checked ~ .custom-control-label::before  {
+  background-color: $red;
+  border-color: $red;
+  cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.custom-control {
+  .custom-control-input[disabled=disabled] {
+    & + .custom-control-label {
+      // Disabled label for checkbox, radio,
+      // switch bootstrap form components
+      color: gray("600")!important;
+    }
+  }
+}
+
+.custom-switch {
+  width: 28px;
+  height: 16px;
+}
+
+.custom-switch
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: none;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::after {
+  border: 1px solid $gray-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $gray-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $gray-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $gray-20;
+  background: rgba(4, 10, 15, 0.3);
+}
+
+.custom-control-label::after {
+  cursor: pointer;
+}
+
+.b-form-tag-remove {
+  // X button to remove tag
+  font-weight: normal;
+}
+
+.b-form-tags-button {
+  // Add button inside input field
+  white-space: nowrap;
+  margin-right: -$spacer;
+  &.btn-link-primary {
+    color: theme-color("primary");
+    fill: currentColor;
+  }
+}
+
+// Form validation icon
+  .form-control.is-invalid,
+  .form-control.is-valid {
+    background-position: right 1rem bottom 50%;
+  }
+
+// Form validation icon with datepicker or password toggle icon
+.form-control-with-button {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right 3rem bottom 50%;
+  }
+}
+// For invisible label of fields
+.invisible {
+  height: 0;
+  margin-bottom: 0;
+}  
+// Global style progress bar
+.progress {
+  height: 8px;
+  background-color: $gray-10;
+}
+
+.progress-bar {
+  background-color: $red;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}
diff --git a/src/assets/styles/bmc/_ibs/_index.scss b/src/assets/styles/bmc/_ibs/_index.scss
new file mode 100644
index 00000000..14c85d70
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_index.scss
@@ -0,0 +1,24 @@
+// OpenBMC Global Style Overrides of out of the box
+// Bootstrap styles
+@import "./alert";
+@import "./badge";
+@import "./base";
+@import "./bootstrap-grid";
+@import "./buttons";
+@import "./calendar";
+@import "./card";
+@import "./dropdown";
+@import "./forms";
+@import "./kvm";
+@import "./modal";
+@import "./pagination";
+@import "./section-divider";
+@import "./sol";
+@import "./tables";
+@import "./toasts";
+@import "./pages/login";
+@import "./pages/virtual-media";
+@import "./pages/firmware";
+@import "./pages/inventory";
+@import "./pages/power-operations";
+@import "./pages/security";
diff --git a/src/assets/styles/bmc/_ibs/_kvm.scss b/src/assets/styles/bmc/_ibs/_kvm.scss
new file mode 100644
index 00000000..8276b8ea
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_kvm.scss
@@ -0,0 +1,12 @@
+#terminal-kvm {
+  height: calc(100vh - 300px);
+  display: flex;
+  &.full-window {
+   height: calc(100vh - 80px); 
+  }
+  div:nth-child(1) {
+    background: transparent !important;
+    display: block !important;
+    overflow: hidden !important;
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_modal.scss b/src/assets/styles/bmc/_ibs/_modal.scss
new file mode 100644
index 00000000..e2fa0cd8
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_modal.scss
@@ -0,0 +1,12 @@
+.modal-header {
+  .close {
+    font-weight: normal;
+    color: theme-color("dark");
+    opacity: 1;
+  }
+  .modal-title {
+    font-size: 1.25rem;
+    font-weight: normal;
+    line-height: 1.3;
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_pagination.scss b/src/assets/styles/bmc/_ibs/_pagination.scss
new file mode 100644
index 00000000..97fe0132
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_pagination.scss
@@ -0,0 +1,24 @@
+.table-pagination-select {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  select {
+    width: fit-content;
+  }
+  label {
+    margin-left: $spacer;
+    line-height: $spacer * 2;
+  }
+}
+
+.b-pagination {
+  @include media-breakpoint-up(sm) {
+    justify-content: flex-end;
+  }
+  .page-item.active button {
+    color: theme-color("dark");
+    background-color: color("white");
+    border-color: $border-color;
+    box-shadow: inset 0px -3px theme-color("primary");
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/_section-divider.scss b/src/assets/styles/bmc/_ibs/_section-divider.scss
new file mode 100644
index 00000000..bca2d77e
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_section-divider.scss
@@ -0,0 +1,3 @@
+.section-divider {
+  border-bottom: 1px solid gray('400');
+}
diff --git a/src/assets/styles/bmc/_ibs/_sol.scss b/src/assets/styles/bmc/_ibs/_sol.scss
new file mode 100644
index 00000000..3641c040
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_sol.scss
@@ -0,0 +1,3 @@
+#terminal .xterm .xterm-viewport {
+  overflow: auto;
+}
diff --git a/src/assets/styles/bmc/_ibs/_tables.scss b/src/assets/styles/bmc/_ibs/_tables.scss
new file mode 100644
index 00000000..d73bfdde
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_tables.scss
@@ -0,0 +1,188 @@
+.table {
+  position: relative;
+  z-index: $zindex-dropdown;
+
+  td {
+    border-top: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
+    border-bottom-width: 0px;
+    &:first-of-type {
+      border-right: 1px solid $gray-10;
+    }
+    &:last-of-type {
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
+    }
+    vertical-align: middle;
+    font-size: 0.875rem;
+    // Table action buttons
+    .btn-link {
+      width: 40px;
+      height: 40px;
+      padding: 5px !important;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // thead-light added for specificity
+  .thead-light th {
+    background-color: $surface-secondary;
+    vertical-align: middle;
+    border-top-width: 0px;
+    border-bottom: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
+    &:first-of-type {
+      border-right: 1px solid $gray-10;
+    }
+    &:last-of-type {
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
+    }
+    text-transform: uppercase;
+    color: $text-primary;
+    &:focus {
+      outline: none;
+    }
+    & > div {
+      font-size: 0.875rem !important;
+    }
+  }
+
+  .custom-switch {
+    width: 100%;
+  }
+
+  .status-icon svg {
+    width: 1rem;
+    height: auto;
+  }
+
+  .b-table-has-details {
+    td {
+      border-bottom: none;
+    }
+    .table-row-expand svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .b-table-details {
+    border-top: 1px solid rgba(26,62,91,.3);
+    background-color: inherit;
+    td {
+      padding-left: $table-cell-padding;
+      padding-right: $table-cell-padding;
+    }
+    dl {
+      margin: 0;
+    }
+    dt {
+      font-size: 0.75rem !important;
+      float: left;
+      clear: left;
+      margin-right: $spacer / 2;
+    }
+    dd {
+      font-size: 0.75rem !important;
+      line-height: 1.5
+    }
+  }
+
+  .table-row-expand {
+    width: 50px;
+    .btn {
+      padding: 0;
+      width: 40px;
+    }
+    svg {
+      fill: theme-color("dark");
+    }
+  }
+
+  .b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
+}
+
+.b-table-sticky-header td {
+  border-top: none;
+}
+
+// Table stacked style for small screen only
+@include media-breakpoint-down(xs) {
+  .b-table-stacked-sm {
+    border: 1px solid $gray-10;
+
+    tr {
+
+      &:not(:first-child) > td[aria-colindex='1'] {
+        border-top: 1px solid $gray-10;
+        padding-top: 0.625rem;
+      }
+
+      &:not(.b-table-empty-row) {
+        position: relative; // Restrict background color to get zebra striping for the row
+
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          z-index: -1;
+        }
+
+        &:before {
+          content: '';
+          background-color: gray("200");
+          width: 40%;
+          border-right: 1px solid gray("300");
+        }
+
+        &:after {
+          content: '';
+          right: 0;
+          width: 60%;
+        }
+
+        &:nth-child(even)::after {
+          background-color: gray("100"); // Zebra striping for the row
+        }
+      }
+
+      td {
+        border: 0;
+        padding: 0.75rem;
+        text-align: left !important;
+
+        &:last-of-type {
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+    &::before {
+      text-align: left;
+      padding-left: $spacer / 2;
+    }
+
+    > div {
+      padding-left: 1rem;
+    }
+  }
+}
+
+.table-responsive, .table-responsive-md {
+  margin-top: 0.5rem;
+}
diff --git a/src/assets/styles/bmc/_ibs/_toasts.scss b/src/assets/styles/bmc/_ibs/_toasts.scss
new file mode 100644
index 00000000..482765ce
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_toasts.scss
@@ -0,0 +1,61 @@
+.b-toaster {
+  top: 75px!important; // make sure toasts do not hide top header
+}
+
+// Toast component and status icon style
+.toast {
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
+  border-width: 0 0 0 3px;
+  box-shadow: $box-shadow;
+  .close {
+    font-weight: 300;
+    opacity: 1;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: flex-start;
+  background-color: inherit!important; //override specificity
+  border: none;
+  color: theme-color("dark")!important; //override specificity
+  padding-bottom: 0;
+}
+
+.toast-icon {
+  display: flex;
+  margin-right: 1rem;
+
+  svg {
+    margin-left: -2.5rem;
+  }
+
+  + .close {
+    line-height: .9;
+  }
+}
+
+.toast-body {
+  color: theme-color("dark");
+  padding-top: 0;
+}
+
+.b-toast-success .toast {
+  border-left-color: theme-color("success")!important;
+  background-color: theme-color-light("success")!important;
+}
+
+.b-toast-info .toast {
+  border-left-color: theme-color("info")!important;
+  background-color: theme-color-light("info")!important;
+}
+
+.b-toast-danger .toast {
+  border-left-color: theme-color("danger")!important;
+  background-color: theme-color-light("danger")!important;
+}
+
+.b-toast-warning .toast {
+  border-left-color: theme-color("warning")!important;
+  background-color: theme-color-light("warning")!important;
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_firmware.scss b/src/assets/styles/bmc/_ibs/pages/_firmware.scss
new file mode 100644
index 00000000..de65dc10
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_firmware.scss
@@ -0,0 +1,13 @@
+
+//
+// Firmware Update:
+//
+.firmware-update .btn,
+.firmware-update label {
+  width: 100%;
+}
+.firmware-update .form-background {
+  padding: $spacer * 2 !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_inventory.scss b/src/assets/styles/bmc/_ibs/pages/_inventory.scss
new file mode 100644
index 00000000..6f065ad4
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_inventory.scss
@@ -0,0 +1,9 @@
+
+//
+// Service Indicators:
+//
+.service-indicators .form-background {
+  padding: $spacer * 2 !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_login.scss b/src/assets/styles/bmc/_ibs/pages/_login.scss
new file mode 100644
index 00000000..cd7ef538
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_login.scss
@@ -0,0 +1,23 @@
+
+//
+// Login Page:
+//
+.login-form {
+  background-color: transparent !important;
+}
+
+.login-form > .btn-primary {
+  width: 100%;
+  margin-top: 2rem !important;
+}
+
+.login-main .h3 {
+  font-weight: 400 !important;
+  font-size: 1.6rem !important;
+}
+
+@media (max-width: 768px) {
+  .login-brand {
+    margin-top: 1rem;
+  }
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_power-operations.scss b/src/assets/styles/bmc/_ibs/pages/_power-operations.scss
new file mode 100644
index 00000000..0921323e
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_power-operations.scss
@@ -0,0 +1,9 @@
+
+//
+// Power Operations:
+//
+.boot-settings .form-background {
+  padding: $spacer * 2 $spacer * 2 $spacer !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_security.scss b/src/assets/styles/bmc/_ibs/pages/_security.scss
new file mode 100644
index 00000000..45473a53
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_security.scss
@@ -0,0 +1,9 @@
+
+//
+// Security and Access:
+//
+.ldap-settings .form-background {
+  padding: $spacer * 2 $spacer * 2 $spacer !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss b/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss
new file mode 100644
index 00000000..040e57b1
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss
@@ -0,0 +1,47 @@
+
+//
+// Media
+//
+.media-start {
+  margin-top: $spacer * 2;
+}
+
+.media-buttons-group >.media-start label {
+  width: 100%;
+}
+
+.media-buttons-group >.media-start .btn {
+  width: 50%;
+}
+
+.media-buttons-group >.media-stop > .btn {
+  width: 50%;
+}
+
+
+//
+// Media Legacy
+//
+.media-legacy label {
+  margin-top: $spacer * 2;
+}
+
+.media-legacy-buttons-group {
+  margin: 0px;
+}
+
+.media-legacy-buttons-group .btn {
+  width: 100%;
+}
+
+.media-legacy-buttons-group > .media-legacy-configure {
+  display: block;
+  width: 50%;
+  margin-bottom: $spacer * 2;
+}
+
+.media-legacy-buttons-group > .media-legacy-start {
+  display: inline-block;
+  width: 50%;
+  margin-bottom: - $spacer * 2;
+}