Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.

8 files changed, 325 insertions, 59 deletions

diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index dcf563d6..8281ff52 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,26 +1,22 @@
-// dt,
-// legend,
-// label {
-//   color: gray("800");
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 1.4285;
-// }
-
-
-
-h1,
-.h1 {
-  font-size: 2.625rem;
-  font-weight: 300;
-  line-height: 1.238;
+body {
+  overflow-y: hidden;
 }
 
-h2,
-.h2 {
-  font-size: 2.25rem;
-  font-weight: 300;
-  line-height: 1.3333;
+.main-container {
+  overflow-y: overlay;
+  height: calc(100vh - 167px);
+  &::-webkit-scrollbar {
+    margin-top: $header-height;
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    margin-top: $header-height;
+    border: 4px solid transparent;
+    background: rgba(14, 32, 48, 0.384);
+    border-radius: 16px;
+    background-clip: content-box;
+  }
 }
 
 h3,
@@ -51,10 +47,109 @@ h6,
   line-height: 1.2857;
 }
 
-.text__h1 {
+.regular-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+    &.underline {
+      text-decoration: underline;
+    }
+    &.tretiatry {
+      color: $text-tretiatry;
+    }
+}
+
+.light-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+}
+
+.semi-bold-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+.semi-bold-12px__caps {
+  font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: left;
+    text-transform: uppercase;
+    color: $text-primary !important;
+    &:hover {
+      color: $text-primary !important;
+    }
+}
+
+.bold-12px__caps {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+  text-transform: uppercase;
+}
+
+.medium-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+}
+
+.semi-bold-16px {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: $text-primary;
+}
+
+.bold-16px__caps {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  text-transform: uppercase;
+  color: $text-secondary;
+}
+
+
+.bold-24px {
   font-family: Inter;
   font-style: normal;
   font-weight: bold;
+  font-weight: 700;
   font-size: 24px;
   line-height: 28px;
   color: $text-primary;
@@ -78,4 +173,12 @@ h6,
   font-size: 12px;
   line-height: 16px;
   color: $login-page-description-color;
+}
+
+.icon-expand {
+  height: 1.2rem;
+  width: 1.2rem;
+  float: right;
+  transition: 0.3s linear;
+  margin: $spacer/4 35px 0 auto;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index c80c62a6..1afcac0b 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -61,7 +61,7 @@
 
 // Global style for all button link
 .btn-link {
-  font-weight: $headings-font-weight;
+  // font-weight: $headings-font-weight;
   color: $text-primary;
   text-decoration: none !important;
   &:hover {
@@ -79,6 +79,12 @@
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
 }
 
 // Icon only buttons
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 693b5e0b..9e30359c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -23,14 +23,14 @@
 
 .custom-select,
 .form-control {
-  &:active {
+  // &:active {
     // border: 1px solid $primary!important;
-  }
-  &:focus {
+  // }
+  // &:focus {
     // color: theme-color("dark");
     // background-color: gray("100");
     // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
-  }
+  // }
   &:disabled {
     background-color: gray("400");
     color: gray("600");
@@ -41,13 +41,13 @@
   }
 }
 
-.custom-select,
-.custom-control-label,
-.form-control {
-  color: theme-color("dark") !important;
-  font-size: 1rem;
-  border-radius: 8px;
-}
+// .custom-select,
+// .custom-control-label,
+// .form-control {
+  // color: theme-color("dark") !important;
+  // font-size: 1rem;
+  // border-radius: 8px;
+// }
 
 // Inverted form colors
 .form-background {
@@ -82,9 +82,13 @@
 .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: $black;
-  border-color: $black;
+  border-radius: 3px;
+  background-color: $red-brand-primary;
+  border-color: $red-brand-primary;
   cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
 }
 
 .custom-control {
@@ -97,8 +101,43 @@
   }
 }
 
-.custom-control-input:focus ~ .custom-control-label::before{
-  // box-shadow: 0 0 0 2px  theme-color("primary");
+.custom-switch {
+  width: 28px;
+  height: 16px;
+  margin: 0 0 0 auto;
+}
+
+.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 $faint-secondary-primary-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $faint-secondary-primary-20;
+  background: rgba(4, 10, 15, 0.3);
+}
+
+.custom-switch
+.custom-control-input:checked ~ .custom-control-label::before {
+  background: $red-brand-primary;
+  border: 1px solid $faint-secondary-primary-20;
+  border-radius: 8px;
 }
 
 .custom-control-label::after {
@@ -133,3 +172,24 @@
     background-position: right 3rem bottom 50%;
   }
 }
+
+// Global style progress bar
+.progress {
+  width: 120px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: $faint-secondary-primary-10;
+}
+
+.progress-bar {
+  background-color: $red-brand-primary;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red-brand-primary;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index 74594e35..43b4e1a3 100644
--- a/src/assets/styles/bmc/custom/_index.scss
+++ b/src/assets/styles/bmc/custom/_index.scss
@@ -15,4 +15,5 @@
 @import "./section-divider";
 @import "./sol";
 @import "./tables";
-@import "./toasts";
\ No newline at end of file
+@import "./toasts";
+@import "./popover";
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss
new file mode 100644
index 00000000..681547d1
--- /dev/null
+++ b/src/assets/styles/bmc/custom/_popover.scss
@@ -0,0 +1,23 @@
+.b-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: $white;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  position: relative;
+  max-width: 389px;
+  width: 389px;
+  height: auto;
+}
+
+.popover-header {
+  background-color: transparent;
+  border: none;
+  padding: 24px 0px 0px 24px;
+  width: 389px;
+}
+
+.arrow {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_section-divider.scss b/src/assets/styles/bmc/custom/_section-divider.scss
index 620c9e56..79b14476 100644
--- a/src/assets/styles/bmc/custom/_section-divider.scss
+++ b/src/assets/styles/bmc/custom/_section-divider.scss
@@ -1,3 +1,7 @@
 .section-divider {
     border-bottom: 1px solid gray('400');
-  }
\ No newline at end of file
+  }
+
+.page-collapse-decorator {  
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a832..48d49b2b 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,16 +1,18 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
+  border-radius: 10px;
 
   td {
-    border-top: 1px solid gray("300");
-    border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
+    // border-top: 1px solid gray("300");
+    // border-bottom: 1px solid gray("300");
+    // &:first-of-type {
+    //   border-left: 1px solid gray("300");
+      
+    // }
+    // &:last-of-type {
+    //   border-right: 1px solid gray("300");
+    // }
     vertical-align: middle;
 
     // Table action buttons
@@ -27,15 +29,15 @@
   // thead-light added for specificity
   .thead-light th {
     vertical-align: middle;
-    border-top: 1px solid gray("300");
+    // border-top: 1px solid gray("300");
     border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
-    color: theme-color("dark");
+    // &:first-of-type {
+      // border-left: 1px solid gray("300");
+    // }
+    // &:last-of-type {
+      // border-right: 1px solid gray("300");
+    // }
+    // color: theme-color("dark");
     &:focus {
       outline: none;
     }
@@ -109,7 +111,7 @@
     tr {
 
       &:not(:first-child) > td[aria-colindex='1'] {
-        border-top: 1px solid gray("300");
+        // border-top: 1px solid gray("300");
         padding-top: 0.625rem;
       }
 
@@ -165,7 +167,68 @@
     }
   }
 
-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
-    border-top-width: 1px;
+  // .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+    // border-top-width: 1px;
+  // }
+}
+
+.bootstrap-table__section {
+  position: relative;
+  margin: 16px 2rem 0 2rem;
+  width: 90%;
+}
+
+.bootstrap-rounded-table {
+  border: 1px solid rgba(26, 62, 91, 0.3);
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px; 
+  border-radius: 10px; 
+}
+
+.bootstrap-rounded-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 10px 0 0 0;
+  -webkit-border-radius: 10px 0 0 0;
+  -moz-border-radius: 10px 0 0 0;
+}
+
+.bootstrap-rounded-table__column-last {
+  border-top: none !important;
+  border-radius: 0 10px 0 0;
+  -webkit-border-radius: 0 10px 0 0;
+  -moz-border-radius: 0 10px 0 0;
+}
+
+.bootstrap-rounded-table__column-center {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  -moz-border-radius: 0 0 0 0;
+}
+
+.bootstrap-rounded-table__head_bg {
+  background-color: $faint-secondary-primary-10 !important;
+}
+
+.bootstrap-rounded-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  -khtml-border-radius: 0;
+  &:hover {
+    background-color: $faint-secondary-primary-5;
   }
 }
+
+
+.bootstrap-table {
+  border-top: none !important;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  background-color: $faint-secondary-primary-5;
+}
+
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 32e93260..584a7785 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -42,9 +42,15 @@ $navbar-color: $primary;
 $login-page-description-color: rgba(12, 28, 41, 0.6);
 
 $text-primary: #0C1C29;
+$text-secondary: #0C1C29E5;
+$text-tretiatry: rgba(12, 28, 41, 0.6);
+
+$surface-secondary: #F3F4F5;
 
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
 $faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-secondary-primary-10: rgba(26, 62, 91, 0.1);
+$faint-secondary-primary-20: rgba(26, 62, 91, 0.2);
 $faint-brand-primary-40:rgba(225, 23, 23, 0.4);
 
 $red-brand-primary: #E11717;