From 5c7a1dd3d6a22e02b983a01be39b654b8eaa6ad1 Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Mon, 23 May 2022 16:46:24 +0300 Subject: Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles. --- src/assets/styles/bmc/custom/_base.scss | 147 ++++++++++++++++++--- src/assets/styles/bmc/custom/_buttons.scss | 8 +- src/assets/styles/bmc/custom/_forms.scss | 90 ++++++++++--- src/assets/styles/bmc/custom/_index.scss | 3 +- src/assets/styles/bmc/custom/_popover.scss | 23 ++++ src/assets/styles/bmc/custom/_section-divider.scss | 6 +- src/assets/styles/bmc/custom/_tables.scss | 101 +++++++++++--- src/assets/styles/bmc/helpers/_colors.scss | 6 + 8 files changed, 325 insertions(+), 59 deletions(-) create mode 100644 src/assets/styles/bmc/custom/_popover.scss (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 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; -- cgit v1.2.3