From c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 Mon Sep 17 00:00:00 2001 From: Maksim Zakharov Date: Tue, 24 May 2022 10:04:19 +0300 Subject: Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles --- src/assets/images/clear-icon.svg | 3 -- src/assets/images/icon-chevron-red.svg | 3 ++ src/assets/images/icon-clear-red.svg | 3 ++ src/assets/images/icon-options.svg | 3 ++ src/assets/images/icon-settings-red.svg | 3 ++ src/assets/styles/bmc/custom/_base.scss | 23 +++++++++++ src/assets/styles/bmc/custom/_buttons.scss | 65 ++++++++++++++++++++++++++---- src/assets/styles/bmc/custom/_forms.scss | 2 +- src/assets/styles/bmc/custom/_popover.scss | 54 +++++++++++++++++++++++-- src/assets/styles/bmc/custom/_tables.scss | 49 +++++++++++++++++----- 10 files changed, 182 insertions(+), 26 deletions(-) delete mode 100644 src/assets/images/clear-icon.svg create mode 100644 src/assets/images/icon-chevron-red.svg create mode 100644 src/assets/images/icon-clear-red.svg create mode 100644 src/assets/images/icon-options.svg create mode 100644 src/assets/images/icon-settings-red.svg (limited to 'src/assets') diff --git a/src/assets/images/clear-icon.svg b/src/assets/images/clear-icon.svg deleted file mode 100644 index 2f50ed01..00000000 --- a/src/assets/images/clear-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/icon-chevron-red.svg b/src/assets/images/icon-chevron-red.svg new file mode 100644 index 00000000..7fcd68d4 --- /dev/null +++ b/src/assets/images/icon-chevron-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-clear-red.svg b/src/assets/images/icon-clear-red.svg new file mode 100644 index 00000000..2f50ed01 --- /dev/null +++ b/src/assets/images/icon-clear-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-options.svg b/src/assets/images/icon-options.svg new file mode 100644 index 00000000..b9ab31bb --- /dev/null +++ b/src/assets/images/icon-options.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icon-settings-red.svg b/src/assets/images/icon-settings-red.svg new file mode 100644 index 00000000..8ed9156a --- /dev/null +++ b/src/assets/images/icon-settings-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss index 6009774c..0e555455 100644 --- a/src/assets/styles/bmc/custom/_base.scss +++ b/src/assets/styles/bmc/custom/_base.scss @@ -19,6 +19,17 @@ body { } } +.pointer { + cursor: pointer; +} + +.icon-edit, +.icon-options { + display: block; + margin: 2px 12px 0 auto; + cursor: pointer; +} + h3, .h3 { font-size: 1.75rem; @@ -56,8 +67,12 @@ h6, letter-spacing: 0em; text-align: left; color: $text-primary; + &.red { + color: $red-brand-primary + } &.underline { text-decoration: underline; + cursor: pointer; } &.tretiatry { color: $text-tretiatry; @@ -242,4 +257,12 @@ h6, float: right; transition: 0.3s linear; margin: $spacer/4 35px 0 auto; +} + +.icon-expand-right { + height: 1.2rem; + width: 1.2rem; + float: right; + transition: 0.3s linear; + margin: $spacer/4 5px 0 0; } \ 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 e128a6db..04c612ec 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -1,14 +1,7 @@ .btn { - // padding-top: $spacer / 2; - // padding-right: $spacer; - // padding-bottom: $spacer / 2; - // padding-left: $spacer; display: inline-flex; align-items: center; justify-content: space-around; - svg { - // margin-right: $spacer / 4; - } &:disabled { color: gray("600"); fill: currentColor; @@ -24,6 +17,7 @@ background-color: $red-brand-primary; border-radius: 8px; border: none; + box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; @@ -55,6 +49,7 @@ color: $red-brand-primary; border-radius: 8px; border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; @@ -79,7 +74,57 @@ } } -// Global style for all button link +.btn-unstiled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red-brand-primary; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; + transition: ease-in 0.2s; + &:hover { + color: $white; + transition: ease-in 0.2s; + } + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } + &.selected-unit-button { + transition: ease-in 0.2s; + color: $white; + } + &.selected-choice-button { + transition: ease-in 0.2s; + color: $white; + } +} + +.btn-toogle-popover { + justify-content: flex-start; + width: 25px; + height: 16px; + padding: 0; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + .btn-link { // font-weight: $headings-font-weight; color: $text-primary; @@ -104,6 +149,10 @@ transform: rotate(180deg); transition: 0.3s linear; } + .icon-expand-right { + transform: rotate(180deg); + transition: 0.3s linear; + } } } diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 7c0a0bd6..51dc0ed6 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -123,7 +123,7 @@ .custom-switch { width: 28px; height: 16px; - margin: 0 0 0 auto; + margin: -4px 0 -4px auto; } .custom-switch diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss index f539ef54..a33f108f 100644 --- a/src/assets/styles/bmc/custom/_popover.scss +++ b/src/assets/styles/bmc/custom/_popover.scss @@ -6,8 +6,8 @@ box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); border-radius: 4px; position: relative; - max-width: 389px; - width: 389px; + max-width: 400px; + width: 400px; height: auto; } @@ -20,4 +20,52 @@ .arrow { visibility: hidden; -} \ No newline at end of file +} + +.popover-heigth-100 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 100px; +} + +.popover-heigth-100 .popover-body { + padding: 0px; + +} + +.apply-reload-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 250px; +} + +.apply-reload-popover .popover-body { + padding: 0px; +} + +.boot-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 200px; +} diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index bc3be1b2..d76d4982 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -171,6 +171,34 @@ // } } +.bootstrap-table__stripes tr:nth-of-type(even) { + background-color: rgb(255 255 255); +} + + +////// не работает +.bootstrap-table__stripes_odd tr:nth-of-type(odd) { + background-color: rgb(255 255 255); +} + +.bootstrap-table__head_bg { + border-top: none; + display: none; +} + +.bootstrap-table__column-first { + border-right: 1px solid rgba(26, 62, 91, 0.1); + border-top: none; +} + +.bootstrap-table__column-last { + border-top: none; +} + +.bootstrap-table__td { + border-top: 1px solid rgba(26, 62, 91, 0.1); +} + .bootstrap-table__section { position: relative; margin: 16px 2rem 0 2rem; @@ -245,23 +273,24 @@ border-radius: 4px; } -.bootstrap-analytical-table__head_bg { - background-color: transparent !important; +.bootstrap-analytical-th { + border-bottom: 1px solid rgba(26, 62, 91, 0.3) !important; + background-color: $white !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; + border-radius: 4px 0 0 0; + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 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; + border-radius: 0 4px 0 0; + -webkit-border-radius: 0 4px 0 0; + -moz-border-radius: 0 4px 0 0; } .bootstrap-analytical-table__column-center { @@ -272,13 +301,11 @@ } .bootstrap-analytical-table__td { + padding: 10px !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; - } } \ No newline at end of file -- cgit v1.2.3