From 931c2cad0da1a84e3df0745b385ec06d29cc2634 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 20 Jun 2022 11:52:15 +0300
Subject: fix Modals, Tables and Pages: event logs, inventoty, post logs,
 operttions, global styles

---
 src/assets/styles/bmc/custom/_base.scss       | 35 ++++++++++++--
 src/assets/styles/bmc/custom/_buttons.scss    | 23 ++++++++-
 src/assets/styles/bmc/custom/_card.scss       | 14 ++++++
 src/assets/styles/bmc/custom/_dropdown.scss   |  5 ++
 src/assets/styles/bmc/custom/_forms.scss      | 27 +++++++++--
 src/assets/styles/bmc/custom/_logs.scss       | 62 +++++++++++++++++++++++++
 src/assets/styles/bmc/custom/_modal.scss      | 67 +++++++++++++++++++++++++--
 src/assets/styles/bmc/custom/_tables.scss     | 49 ++++----------------
 src/assets/styles/bmc/custom/_toasts.scss     |  2 +-
 src/assets/styles/bmc/helpers/_colors.scss    | 13 ++++--
 src/assets/styles/bmc/helpers/_variables.scss | 11 ++++-
 11 files changed, 244 insertions(+), 64 deletions(-)

(limited to 'src/assets/styles/bmc')

diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 42e4a848..906f3717 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -4,7 +4,7 @@ body {
 
 .scroll-container {
   overflow-y: overlay;
-  height: calc(100vh - 95px);
+  height: calc(100vh - #{$header-height});
   &::-webkit-scrollbar {
     margin-top: $header-height;
     position: absolute;
@@ -19,6 +19,17 @@ body {
   }
 }
 
+@-moz-document url-prefix() {
+  #logs-table-wrapper div,
+  #table-event-logs div,
+  .scroll-container,
+  .nav-container {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: $faint-secondary-primary-20 transparent;
+}
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -156,6 +167,10 @@ h6,
   color: $text-primary;
 }
 
+.modal-body,
+.page-network dd,
+.page-inventory dd,
+#date-time .custom-radio,
 .regular-14px {
   font-family: 'Inter', sans-serif;
   font-size: 14px;
@@ -167,7 +182,18 @@ h6,
   color: $text-secondary;
 }
 
+.page-network dt,
+.page-inventory dt,
+.semi-bold-14px {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: $text-primary;
+}
 
+#date-time dd,
 .regular-16px {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
@@ -178,7 +204,7 @@ h6,
   text-align: left;
 }
 
-
+#date-time dt,
 .semi-bold-16px {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
@@ -221,14 +247,15 @@ h6,
   color: $text-secondary;
 }
 
+h2, .h2,
+.modal-title,
 .semi-bold-20px {
   font-family: 'Inter', sans-serif;
-  font-size: 20px;
+  font-size: 20px !important;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
   letter-spacing: 0em;
-  text-align: center;
 }
 
 .bold-24px {
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 26a11dbd..51e2d073 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
+  height: 36px;
   &:disabled {
     color: gray("600");
     fill: currentColor;
@@ -11,6 +12,9 @@
       background-color: gray("400");
     }
   }
+  &svg {
+    padding-right: 8px;
+  }
 }
 
 .btn-md {
@@ -19,10 +23,11 @@
 }
 
 .btn-lg {
-  width: 270px;
+  width: 290px;
   height: 36px;
 }
 
+.btn-danger,
 .btn-primary {
   background-color: $red-brand-primary;
   border-radius: 8px;
@@ -54,7 +59,8 @@
   }
 }
 
-.btn-secondary {
+.btn-secondary,
+.modal-header button {
   background-color: $faint-secondary-primary-5;
   color: $red-brand-primary;
   border-radius: 8px;
@@ -82,6 +88,19 @@
     color: $red-brand-primary;
     background-color: $faint-secondary-primary-20;
   }
+  // style for standard close button in modal and popups
+  &.close {
+    width: 32px;
+    height: 22px;
+    padding: 0px;
+    margin: 0px;
+    background-color: $faint-secondary-primary-1;
+    border: 1px solid $faint-secondary-primary-10;
+    border-radius: 7px;
+    &:hover {
+      background-color: $faint-secondary-primary-2;
+    }
+  }
 }
 
 .btn-unstiled {
diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index 5f2a5962..db8d076b 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -2,4 +2,18 @@
   .bg-success {
     background-color: theme-color-light('success')!important;
   }
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 16px;
+}
+
+.card-header {
+  border-radius: 15px 15px 0 0;
+  background-color: $faint-secondary-primary-10 !important;
+  color: $text-primary !important;
+  .nav-tabs .nav-link {
+    border-radius: 10px 10px 0 0 ;
+    &:hover {
+      background-color: $faint-secondary-primary-2;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 010b9b3f..1ea80d9f 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -1,11 +1,16 @@
 // Make calendar visible over the table
 .dropdown-menu {
+  border-radius: 5px;
   z-index: $zindex-dropdown + 1;
   padding: 0;
+  a {
+    border-radius: 5px;
+  }
 }
 .dropdown-item {
   padding-left: $spacer/4;
   margin-top: -1 * $spacer/4;
+  background-color: $white;
 }
 // .b-dropdown-form {
 //   padding: $spacer/2;
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8cb8e242..d8f2cecb 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -61,6 +61,16 @@
   }
 }
 
+.select-per-page {
+  padding: 0 0 0 5px;
+  width: 146px !important;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+  background-image: url('~@/assets/images/icon-chevron.svg');
+}
+
 // Inverted form colors
 .form-background {
   background-color: none;
@@ -91,6 +101,14 @@
   line-height: $form-line-height;
 }
 
+.custom-checkbox {
+  line-height: 23px;
+}
+
+.custom-radio {
+  line-height: 23px !important;
+}
+
 .custom-checkbox ::before {
   box-shadow: none !important;
   border: 2px solid $on-surface-secondary;
@@ -123,7 +141,6 @@
 .custom-switch {
   width: 28px;
   height: 16px;
-  margin: -4px 0 -4px auto;
 }
 
 .custom-switch
@@ -216,7 +233,7 @@
   padding-top: 4px;
 }
 
-//radio buttons global style
+//radio buttons style
   .custom-radio ::before {
     border: 1px solid $red-brand-primary;
   background-color: #fff;
@@ -228,7 +245,7 @@
 ~ .custom-control-label::before {
   border: 2px solid $red-brand-primary;
   background-color: $red-brand-primary;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-radius: 100%;
 }
 
@@ -236,7 +253,7 @@
   .custom-control-input:hover
   ~ .custom-control-label::before {
   background-color: $red-brand-primary-hover !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-color: $red-brand-primary-hover;
 }
 
@@ -251,6 +268,6 @@
 .custom-control-input:active
 ~ .custom-control-label::before {
   background-color: $red-brand-primary-active !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-color: $red-brand-primary-active;
 }
diff --git a/src/assets/styles/bmc/custom/_logs.scss b/src/assets/styles/bmc/custom/_logs.scss
index ae0099e0..2a8dcff7 100644
--- a/src/assets/styles/bmc/custom/_logs.scss
+++ b/src/assets/styles/bmc/custom/_logs.scss
@@ -10,3 +10,65 @@
 .logs-section .b-table-sort-icon-left {
   background-size: 15px !important;
 }
+
+.logs-head-container {
+  position: absolute;
+  width: 50%;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 6px;
+  z-index: 1001;
+}
+
+#logs-table-wrapper div {
+  max-height: calc(100vh - 194px - #{$header-height});
+}
+
+#logs-table,
+#table-event-logs {
+  margin: 0 !important;
+}
+
+// scrollbar styles
+#logs-table-wrapper div,
+#table-event-logs div {
+  overflow-y: overlay;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-top: 52px solid transparent;
+    background: $faint-secondary-primary-20;
+    border-radius: 16px;
+    background-clip: content-box;
+  }
+}
+
+.logs-table__th {
+  background-color: #f8f8f8 !important;
+  border-bottom: 1px solid $faint-secondary-primary-20 !important;
+  border-top: 1px solid $faint-secondary-primary-20 !important;
+  color: $text-primary !important;
+}
+
+.logs-table__td {
+  border-bottom: 1px solid $faint-secondary-primary-10 !important;
+  height: 64px;
+}
+
+.logs-pagination-container {
+  width: calc(100% - #{$navigation-width});
+  height: $toolbar-height;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
+  z-index: $zindex-dropdown;
+  background-color: $white;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index e2fa0cd8..725d4672 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,12 +1,69 @@
+.modal-dialog {
+  margin: 25vh auto 0;
+}
+
+.modal-content {
+  border-radius: 16px;
+}
+
 .modal-header {
+  align-items: center;
+  border-bottom: 1px solid $faint-secondary-primary-10;
   .close {
     font-weight: normal;
     color: theme-color("dark");
     opacity: 1;
   }
-  .modal-title {
-    font-size: 1.25rem;
-    font-weight: normal;
-    line-height: 1.3;
-  }
 }
+
+.modal-body {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.modal-footer {
+  border-top: 1px solid $faint-secondary-primary-10;
+}
+
+#modal-reset .modal-body {
+  flex-direction: column;
+}
+
+#generate-csr .custom-select,
+#upload-certificate .custom-select,
+#modal-user .custom-select {
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+  background-image: url('~@/assets/images/icon-chevron.svg');
+}
+
+// file-input-modal
+.modal-file-body {
+  display: flex;
+  padding: 0;
+  justify-content: center;
+}
+
+.file-input_container > .custom-file {
+  width: 432px;
+  height: 357px;
+}
+
+.custom-file-input ~ .custom-file-label {
+  background-color: transparent;
+  border: 1px dashed rgba(12, 28, 41, 0.6);
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 432px;
+  height: 357px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
+  justify-content: center;
+}
+
+.custom-file-input ~ .custom-file-label::after {
+  display: none;
+}
\ 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 d86d40de..84dc5f99 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -17,9 +17,9 @@
 
     // Table action buttons
     .btn-link {
-      width: 40px;
-      height: 40px;
-      padding: 5px !important;
+      height: 20px;
+      border-radius: 2px;
+      padding: 4px !important;
       display: inline-flex;
       justify-content: center;
       align-items: center;
@@ -44,7 +44,7 @@
   }
 
   .status-icon svg {
-    width: 1rem;
+    width: 1.2rem;
     height: auto;
   }
 
@@ -79,10 +79,7 @@
     width: 50px;
     .btn {
       padding: 0;
-      width: 50px;
-    }
-    svg {
-      fill: theme-color("dark");
+      width: 27px;
     }
   }
   .b-table-sort-icon-left {
@@ -170,6 +167,10 @@
   // }
 }
 
+.b-table-details > td {
+  padding: 0px !important;
+}
+
 .indicators-Critical {
   color: $indicators-errors !important;
 }
@@ -318,35 +319,3 @@
   -o-border-radius: 0;
   -khtml-border-radius: 0;
 }
-
-// logs tables styles 
-#logs-table {
-  margin: 0 !important;
-}
-
-#logs-table-wrapper div {
-  overflow-y: overlay;
-  &::-webkit-scrollbar {
-    position: absolute;
-    width: 10px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border: 4px solid transparent;
-    border-top: 52px solid transparent;
-    background: $faint-secondary-primary-20;
-    border-radius: 16px;
-    background-clip: content-box;
-  }
-}
-
-.logs-table__th {
-  background-color: #f8f8f8 !important;
-  border-bottom: 1px solid $faint-secondary-primary-20 !important;
-  border-top: 1px solid $faint-secondary-primary-20 !important;
-  color: $text-primary !important;
-}
-
-.logs-table__td {
-  border-bottom: 1px solid $faint-secondary-primary-10 !important;
-  height: 64px;
-}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 4e2ad7fa..a3480fda 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -1,5 +1,5 @@
 .b-toaster {
-  top: 75px!important; // make sure toasts do not hide top header
+  top: 95px!important; // make sure toasts do not hide top header
 }
 
 // Toast component and status icon style
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index e15aef87..028d962b 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -3,9 +3,9 @@ $black: #000;
 $white: #FFFFFF;
 
 $blue-500: #2d60e5;
-$green-500: #0a7d06;
-$red-500: #da1416;
-$yellow-500: #efc100;
+$green-500: #4EBF19;
+$red-500: #FF4141;
+$yellow-500: #F0AC0C;
 $dark-blue: #1A3E5B;
 
 $gray-100: #f4f4f4;
@@ -32,7 +32,7 @@ $dark: $dark-blue;
 $info: $blue;
 $light: $white;
 $primary: $dark-blue;
-$secondary: $gray-800;
+$secondary: #1A3E5B;
 $success: $green;
 $warning: $yellow;
 
@@ -57,9 +57,12 @@ $surface-secondary: #F3F4F5;
 $on-surface-secondary: rgba(4, 10, 15, 0.6);
 $on-surface-tretiatry: #040A0F4D;
 
+$faint-secondary-primary-1:  rgba(26, 62, 91, 0.01);
 $faint-secondary-primary-2:  rgba(26, 62, 91, 0.02);
+$faint-secondary-primary-2-hover:  rgba(26, 62, 91, 0.03);
+
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
-$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.1);
 $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);
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index babb0b89..9e3a3aed 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -7,11 +7,18 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 
 // OpenBMC Custom Variables
 $responsive-layout-bp: lg;
-$top-header-height: 56px;
-$header-height: 95px;
+$first-header-height: 48px;
+$second-header-height: 39px;
+$header-height: 87px;
+$headerHeight: 40px;
 $navigation-width: 320px;
+$toolbar-height: 60px;
 $form-label-font-size: .875rem;
 $form-line-height: 1.25rem;
 $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
 $focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+// :export {
+//     headerHeight: $header-height;
+//   }
\ No newline at end of file
-- 
cgit v1.2.3