From 6facd12596ec8b55bab4be04b473de65e1f22018 Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Tue, 24 May 2022 09:43:34 +0300 Subject: Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components. --- src/assets/styles/bmc/custom/_base.scss | 107 ++++++++++++++++++++++------- src/assets/styles/bmc/custom/_buttons.scss | 50 ++++++++++++-- src/assets/styles/bmc/custom/_forms.scss | 29 ++++++-- src/assets/styles/bmc/custom/_popover.scss | 2 +- src/assets/styles/bmc/custom/_tables.scss | 56 ++++++++++++++- src/assets/styles/bmc/helpers/_colors.scss | 18 +++-- 6 files changed, 217 insertions(+), 45 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 8281ff52..6009774c 100644 --- a/src/assets/styles/bmc/custom/_base.scss +++ b/src/assets/styles/bmc/custom/_base.scss @@ -13,7 +13,7 @@ body { &::-webkit-scrollbar-thumb { margin-top: $header-height; border: 4px solid transparent; - background: rgba(14, 32, 48, 0.384); + background: $faint-secondary-primary-20; border-radius: 16px; background-clip: content-box; } @@ -48,7 +48,7 @@ h6, } .regular-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; @@ -62,10 +62,13 @@ h6, &.tretiatry { color: $text-tretiatry; } + &.quaternary { + color: $text-quaternary; + } } .light-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 300; @@ -75,8 +78,20 @@ h6, color: $text-secondary; } +.caption-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-tretiatry; +} + + .semi-bold-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 600; @@ -86,7 +101,7 @@ h6, } .semi-bold-12px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 600; @@ -94,14 +109,17 @@ h6, letter-spacing: 0em; text-align: left; text-transform: uppercase; - color: $text-primary !important; + color: $text-primary; &:hover { - color: $text-primary !important; + color: $text-primary; + } + &.tretiatry { + color: $text-tretiatry !important; } } .bold-12px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; @@ -113,7 +131,7 @@ h6, } .medium-12px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 12px; font-style: normal; font-weight: 500; @@ -123,8 +141,31 @@ h6, color: $text-primary; } +.regular-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + + +.regular-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + + .semi-bold-16px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 16px; font-style: normal; font-weight: 600; @@ -132,8 +173,29 @@ h6, color: $text-primary; } +.medium-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + .bold-16px__caps { - font-family: Inter; + font-family: 'Inter', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; @@ -144,9 +206,18 @@ h6, color: $text-secondary; } +.semi-bold-20px { + font-family: 'Inter', sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; + letter-spacing: 0em; + text-align: center; +} .bold-24px { - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: bold; font-weight: 700; @@ -156,18 +227,8 @@ h6, margin: 0; } -.text-login { - font-family: Inter; - font-style: normal; - font-weight: 500; - font-size: 12px; - line-height: 16px; - color: $login-page-description-color; - margin: 0 0 0 15px; -} - .auth-description { - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: normal; font-size: 12px; diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 1afcac0b..e128a6db 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -24,7 +24,7 @@ background-color: $red-brand-primary; border-radius: 8px; border: none; - font-family: Inter; + font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 16px; @@ -51,11 +51,31 @@ } .btn-secondary { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 2px theme-color('secondary'); + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + border: none; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $faint-secondary-primary-5-hover; + color: $red-brand-primary; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + color: $red-brand-primary; + background-color: $faint-secondary-primary-5; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red-brand-primary; + background-color: $faint-secondary-primary-20; } } @@ -106,4 +126,22 @@ .input-action-btn { padding: 7px; margin: 1px; +} + +.collapse-button { + height: 56px; + width: 100%; + padding: 0 0 0 2rem; + margin: 0; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } } \ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 9e30359c..7c0a0bd6 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -41,13 +41,25 @@ } } +.form-control::-webkit-outer-spin-button, +.form-control::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.form-control[type='number'] { + -moz-appearance: textfield; +} + // .custom-select, // .custom-control-label, -// .form-control { - // color: theme-color("dark") !important; - // font-size: 1rem; - // border-radius: 8px; -// } +.form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + background-color: $faint-secondary-primary-5-hover; + } +} // Inverted form colors .form-background { @@ -79,6 +91,13 @@ 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 { diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss index 681547d1..f539ef54 100644 --- a/src/assets/styles/bmc/custom/_popover.scss +++ b/src/assets/styles/bmc/custom/_popover.scss @@ -15,7 +15,7 @@ background-color: transparent; border: none; padding: 24px 0px 0px 24px; - width: 389px; + width: 400px; } .arrow { diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index 48d49b2b..bc3be1b2 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -60,8 +60,7 @@ .b-table-details { background-color: theme-color("light"); td { - padding-left: calc(50px + (#{$table-cell-padding} * 2)); - padding-right: calc(50px + (#{$table-cell-padding} * 2)); + padding: 0px 16px 16px 16px; } dl { margin: 0; @@ -208,8 +207,16 @@ -moz-border-radius: 0 0 0 0; } +.bootstrap-rounded-table__without-border { + 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; + color: $text-primary !important; } .bootstrap-rounded-table__td { @@ -225,10 +232,53 @@ } } - .bootstrap-table { border-top: none !important; border: 1px solid rgba(26, 62, 91, 0.1); background-color: $faint-secondary-primary-5; } +.bootstrap-analytical-table { + border: 1px solid rgba(26, 62, 91, 0.3); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; +} + +.bootstrap-analytical-table__head_bg { + background-color: transparent !important; + color: $text-primary !important; +} + +.bootstrap-analytical-table__column-first { + 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-analytical-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-analytical-table__column-center { + 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-analytical-table__td { + 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; + } +} \ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss index 584a7785..e15aef87 100644 --- a/src/assets/styles/bmc/helpers/_colors.scss +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -44,9 +44,20 @@ $login-page-description-color: rgba(12, 28, 41, 0.6); $text-primary: #0C1C29; $text-secondary: #0C1C29E5; $text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; $surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); $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); @@ -59,10 +70,3 @@ $red-brand-primary-active: #df2323; $red-brand-primary-disabled: #E17171; $red-brand-primary-click: #C71414; $red-brand-primary-5: rgba(225, 23, 23, 0.05); - -$button-color: #E11717; -$button-color-hover: #FC2A2A; -$button-color-active: #df2323; -$button-color-disabled: #E17171; -$button-color-click: #C71414; - -- cgit v1.2.3