summaryrefslogtreecommitdiff
path: root/src/assets
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets')
-rw-r--r--src/assets/styles/bmc/custom/_base.scss35
-rw-r--r--src/assets/styles/bmc/custom/_buttons.scss23
-rw-r--r--src/assets/styles/bmc/custom/_card.scss14
-rw-r--r--src/assets/styles/bmc/custom/_dropdown.scss5
-rw-r--r--src/assets/styles/bmc/custom/_forms.scss27
-rw-r--r--src/assets/styles/bmc/custom/_logs.scss62
-rw-r--r--src/assets/styles/bmc/custom/_modal.scss67
-rw-r--r--src/assets/styles/bmc/custom/_tables.scss49
-rw-r--r--src/assets/styles/bmc/custom/_toasts.scss2
-rw-r--r--src/assets/styles/bmc/helpers/_colors.scss13
-rw-r--r--src/assets/styles/bmc/helpers/_variables.scss11
11 files changed, 244 insertions, 64 deletions
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
generated by cgit v1.2.3 (git 2.39.0) at 2024-07-06 00:06:33 +0300