From 8e1bffe5619cb72a39ae4333084693f575037670 Mon Sep 17 00:00:00 2001 From: "Andrey V.Kosteltsev" Date: Mon, 20 Jun 2022 16:44:58 +0300 Subject: WEBUI: remove global styles patch --- .../webui/webui-vue/0006-IBS-Global-Styles.patch | 727 --------------------- .../recipes-phosphor/webui/webui-vue_%.bbappend | 1 - 2 files changed, 728 deletions(-) delete mode 100644 meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch (limited to 'meta-ibs') diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch deleted file mode 100644 index 6f6e7a3bd2..0000000000 --- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch +++ /dev/null @@ -1,727 +0,0 @@ -From e52a0e1b581906319ab126da568f8722ffd51ecd Mon Sep 17 00:00:00 2001 -From: "Andrey V.Kosteltsev" -Date: Mon, 20 Jun 2022 14:38:52 +0300 -Subject: [PATCH] IBS: Global Styles - ---- - src/assets/styles/bmc/custom/_alert.scss | 110 ++++++++--------- - src/assets/styles/bmc/custom/_base.scss | 44 ++++--- - src/assets/styles/bmc/custom/_buttons.scss | 130 +++++++++++++++++--- - src/assets/styles/bmc/custom/_card.scss | 24 +++- - src/assets/styles/bmc/custom/_dropdown.scss | 5 +- - src/assets/styles/bmc/custom/_forms.scss | 123 ++++++++++++++---- - src/assets/styles/bmc/custom/_tables.scss | 33 ++--- - 7 files changed, 328 insertions(+), 141 deletions(-) - -diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss -index 0e78ba64..d85e9127 100644 ---- a/src/assets/styles/bmc/custom/_alert.scss -+++ b/src/assets/styles/bmc/custom/_alert.scss -@@ -1,70 +1,70 @@ - .alert { -- display: flex; -- padding: $spacer; -- border-width: 0 0 0 3px; -- color: gray("800"); -- margin-bottom: $spacer; -+ display: flex; -+ padding: $spacer; -+ border-width: 0 0 0 3px; -+ color: gray("800"); -+ margin-bottom: $spacer; - -- &.small { -- padding: $spacer / 2; -- font-size: 1rem; -- } -+ &.small { -+ padding: $spacer / 2; -+ font-size: 1rem; -+ } - -- .close { -- font-weight: 300; -- opacity: 1; -- } -+ .close { -+ font-weight: 300; -+ opacity: 1; -+ } - -- .alert-icon { -- display: inline-flex; -- align-items: flex-start; -- margin-right: $spacer; -- margin-bottom: $spacer; -+ .alert-icon { -+ display: inline-flex; -+ align-items: flex-start; -+ margin-right: $spacer; -+ margin-bottom: $spacer; - -- @include media-breakpoint-up(sm) { -- margin-bottom: 0; -- } -+ @include media-breakpoint-up(sm) { -+ margin-bottom: 0; - } -+ } - -- .alert-content { -- flex: 1 1 auto; -- } -+ .alert-content { -+ flex: 1 1 auto; -+ } - -- .alert-title { -- margin-bottom: $spacer / 2; -- } -+ .alert-title { -+ margin-bottom: $spacer / 2; -+ } - -- .alert-msg { -- p + p { -- margin-bottom: $spacer; -- } -- -- p:last-of-type { -- margin-bottom: 0; -- } -+ .alert-msg { -+ p + p { -+ margin-bottom: $spacer; - } - -- &.alert-info { -- border-left-color: theme-color("info"); -- background-color: theme-color-light("info"); -- fill: theme-color("info"); -+ p:last-of-type { -+ margin-bottom: 0; - } -+ } - -- &.alert-success { -- border-left-color: theme-color("success"); -- background-color: theme-color-light("success"); -- fill: theme-color("success"); -- } -+ &.alert-info { -+ border-left-color: theme-color("info"); -+ background-color: theme-color-light("info"); -+ fill: theme-color("info"); -+ } - -- &.alert-danger { -- border-left-color: theme-color("danger"); -- background-color: theme-color-light("danger"); -- fill: theme-color("danger"); -- } -+ &.alert-success { -+ border-left-color: theme-color("success"); -+ background-color: theme-color-light("success"); -+ fill: theme-color("success"); -+ } - -- &.alert-warning { -- border-left-color: theme-color("warning"); -- background-color: theme-color-light("warning"); -- fill: theme-color("warning"); -- } -- } -\ No newline at end of file -+ &.alert-danger { -+ border-left-color: theme-color("danger"); -+ background-color: theme-color-light("danger"); -+ fill: theme-color("danger"); -+ } -+ -+ &.alert-warning { -+ border-left-color: theme-color("warning"); -+ background-color: theme-color-light("warning"); -+ fill: theme-color("warning"); -+ } -+} -diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss -index c11e046c..baa92b10 100644 ---- a/src/assets/styles/bmc/custom/_base.scss -+++ b/src/assets/styles/bmc/custom/_base.scss -@@ -1,50 +1,60 @@ --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; -+ font-size: 1.75rem !important; -+ font-weight: 700; - line-height: 1.238; - } - - h2, - .h2 { -- font-size: 2.25rem; -- font-weight: 300; -+ font-size: 1.25rem !important; -+ font-weight: 500; - line-height: 1.3333; - } - - h3, - .h3 { -- font-size: 1.75rem; -+ font-size: 1rem !important; - font-weight: 400; - line-height: 1.2857; - } - - h4, - .h4 { -- font-size: 1.25rem; -+ font-size: 0.875rem !important; - font-weight: 400; - line-height: 1.3; - } - - h5, - .h5 { -- font-size: 1rem; -+ font-size: 0.75rem !important; - font-weight: 500; - line-height: 1.375; - } - - h6, - .h6 { -- font-size: 0.875rem; -+ font-size: 0.625rem !important; - font-weight: 500; - line-height: 1.2857; - } -+ -+.page-section { -+ margin-bottom: 2rem !important; -+} -+ -+.nav-link--current{ -+ background-color: $red-light-background !important; -+ color: $red !important; -+ &:hover, -+ &:focus { -+ background-color: $red-light-background !important; -+ color: $red !important; -+ } -+} -+ -+.btn-link:active { -+ background-color: $red-light-background !important; -+ color: $red !important; -+} -diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss -index 2a7b8169..93d329f1 100644 ---- a/src/assets/styles/bmc/custom/_buttons.scss -+++ b/src/assets/styles/bmc/custom/_buttons.scss -@@ -10,7 +10,7 @@ - margin-right: $spacer / 4; - } - &:disabled { -- color: gray("600"); -+ color: $red; - fill: currentColor; - box-shadow: none !important; - &:not(.btn-link) { -@@ -21,27 +21,114 @@ - } - - .btn-primary { -- fill: currentColor; -- &:focus, -- &:not(:disabled):not(.disabled):active:focus { -- border-color: $white; -- box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white; -+ background-color: $red; -+ border-radius: $border-radius; -+ border: none; -+ box-shadow: 1px 2px 2px -1px #4f252566 inset; -+ &:hover { -+ background-color: $red-hover; -+ } -+ &:not(:disabled):not(.disabled):active:focus, -+ &:focus-visible { -+ border: none; -+ box-shadow: none; -+ background-color: $red-click; -+ } -+ &:focus { -+ border: none; -+ box-shadow: 0px 0px 0px 4px $red-shadow; -+ background-color: $red; -+ } -+ &:active { -+ border: none; -+ box-shadow: none; -+ background-color: $red; - } - } - - .btn-secondary { -- fill: currentColor; -- &:focus, -- &:not(:disabled):not(.disabled):active:focus { -- border-color: $white; -- box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white; -+ background-color: $gray-5; -+ color: $red; -+ border-radius: $border-radius; -+ border: none; -+ box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; -+ font-style: normal; -+ font-weight: 600; -+ font-size: 16px; -+ line-height: 20px; -+ &:hover { -+ background-color: $gray-5-hover; -+ color: $red; -+ } -+ &:focus { -+ border: none; -+ box-shadow: 0px 0px 0px 4px $red-shadow; -+ color: $red; -+ background-color: $gray-5; -+ } -+ &:not(:disabled):not(.disabled):active:focus, -+ &:focus-visible { -+ border: none; -+ box-shadow: none; -+ color: $red; -+ background-color: $gray-20; -+ } -+} -+ -+.btn-unstiled { -+ border: none; -+ &:focus { -+ box-shadow: none; -+ } -+ &:active { -+ box-shadow: none; -+ } -+} -+ -+.btn-popover { -+ border: none; -+ color: $red; -+ height: 28px; -+ border-radius: $border-radius; -+ 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; - } - } - - // Global style for all button link - .btn-link { -- font-weight: $headings-font-weight; -- fill: theme-color("primary"); -+ color: $text-primary; - text-decoration: none !important; - &:hover { - background-color: gray("200"); -@@ -50,14 +137,19 @@ - &:active { - background-color: gray("300"); - } -- &:focus { -- box-shadow: inset 0 0 0 2px theme-color("primary"); -- color: theme-color("primary"); -- outline: none; -- } - &:disabled { - box-shadow: $btn-focus-box-shadow; - } -+ &.collapsed { -+ .icon-expand { -+ transform: rotate(180deg); -+ transition: 0.3s linear; -+ } -+ .icon-expand-right { -+ transform: rotate(180deg); -+ transition: 0.3s linear; -+ } -+ } - } - - // Icon only buttons -@@ -79,4 +171,4 @@ - .input-action-btn { - padding: 7px; - margin: 1px; --} -\ No newline at end of file -+} -diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss -index 5f2a5962..34334687 100644 ---- a/src/assets/styles/bmc/custom/_card.scss -+++ b/src/assets/styles/bmc/custom/_card.scss -@@ -1,5 +1,27 @@ - .card { -+ border-radius: $border-radius; - .bg-success { - background-color: theme-color-light('success')!important; - } --} -\ No newline at end of file -+} -+ -+.card-header { -+ .card-header-tabs { -+ border: none !important; -+ -+ .nav-link { -+ border: none !important; -+ color: $text-secondary; -+ font-weight: 500 !important; -+ background: none !important; -+ &:hover { -+ color: $red-hover -+ } -+ } -+ -+ .nav-link.active { -+ color: $red-active !important; -+ text-decoration: underline; -+ } -+ } -+} -diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss -index 969c4c68..8b2e2835 100644 ---- a/src/assets/styles/bmc/custom/_dropdown.scss -+++ b/src/assets/styles/bmc/custom/_dropdown.scss -@@ -3,16 +3,19 @@ - z-index: $zindex-dropdown + 1; - padding: 0; - } -+ - .dropdown-item { - padding-left: $spacer/4; - margin-top: -1 * $spacer/4; - } -+ - .b-dropdown-form { - padding: $spacer/2; - .form-group { - margin-bottom: $spacer/2; - } - } -+ - // Table filter dropdown clear button style - .table-filter { - .dropdown-item { -@@ -28,4 +31,4 @@ - box-shadow: inset 0 0 0 2px theme-color("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 428a40c2..28287688 100644 ---- a/src/assets/styles/bmc/custom/_forms.scss -+++ b/src/assets/styles/bmc/custom/_forms.scss -@@ -14,27 +14,15 @@ - line-height: $form-line-height; - } - --.form-group { -- margin-bottom: $spacer * 2; --} -- - .custom-select, - .form-control, - .input-group-text { -- border-color: gray("500") !important; -- background-color: gray("100"); -+ border-radius: $border-radius; -+ background-color: $white; - } - - .custom-select, - .form-control { -- &:active { -- border: 1px solid $primary!important; -- } -- &: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"); -@@ -48,26 +36,51 @@ - } - } - --.custom-select, --.custom-control-label, -+.form-control::-webkit-outer-spin-button, -+.form-control::-webkit-inner-spin-button { -+ -webkit-appearance: none; -+ margin: 0; -+} -+.form-control[type='number'] { -+ -moz-appearance: textfield; -+} -+ - .form-control { -- color: theme-color("dark") !important; -- font-size: 1rem; -+ color: $text-secondary; -+ border-radius: $border-radius; -+ border: none; -+ background-color: $gray-5; -+ &:focus { -+ color: $text-secondary; -+ } -+ &:hover { -+ background-color: $gray-5-hover; -+ } - } - - // Inverted form colors - .form-background { -- background-color: gray("100"); -+ background-color: none; -+ padding: 0 !important; - .custom-select, - .form-control { -- background-color: $white; -+ color: #0c1c29e6; -+ border-radius: $border-radius; -+ border: none; -+ background-color: $gray-5; -+ &:hover { -+ background-color: $gray-5-hover; -+ } - &:focus { -- background-color: $white; -+ border: 1px solid gray("400"); - } - &:disabled { - background-color: gray("400"); - color: gray("600"); - } -+ &.is-valid { -+ border: 1px solid gray("400"); -+ } - } - } - -@@ -76,12 +89,22 @@ - 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 { -- background-color: $black; -- border-color: $black; -+ background-color: $red; -+ border-color: $red; - cursor: pointer; -+ &:focus { -+ box-shadow: none !important; -+ } - } - - .custom-control { -@@ -94,8 +117,35 @@ - } - } - --.custom-control-input:focus ~ .custom-control-label::before{ -- box-shadow: 0 0 0 2px theme-color("primary"); -+.custom-switch { -+ width: 28px; -+ height: 16px; -+} -+ -+.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 $gray-20; -+ background: $white; -+} -+ -+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { -+ border-color: $gray-20; -+} -+ -+.custom-control-input:not(:disabled):active ~ .custom-control-label::before { -+ background-color: rgba(4, 10, 15, 0.3); -+ border-color: $gray-20; -+} -+ -+.custom-switch -+.custom-control-input ~ .custom-control-label::before { -+ border: 1px solid $gray-20; -+ background: rgba(4, 10, 15, 0.3); - } - - .custom-control-label::after { -@@ -130,3 +180,26 @@ - background-position: right 3rem bottom 50%; - } - } -+// For invisible label of fields -+.invisible { -+ height: 0; -+ margin-bottom: 0; -+} -+// Global style progress bar -+.progress { -+ height: 8px; -+ background-color: $gray-10; -+} -+ -+.progress-bar { -+ background-color: $red; -+ border-radius: 4px; -+} -+ -+.progress_bar_percent { -+ color: $red; -+} -+ -+.system-control__radio label { -+ padding-top: 4px; -+} -diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss -index e8b5a832..0403c5e5 100644 ---- a/src/assets/styles/bmc/custom/_tables.scss -+++ b/src/assets/styles/bmc/custom/_tables.scss -@@ -1,18 +1,11 @@ - .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"); -- } - vertical-align: middle; -- -+ font-size: 0.875rem; - // Table action buttons - .btn-link { - width: 40px; -@@ -26,16 +19,10 @@ - - // thead-light added for specificity - .thead-light th { -+ color: $text-primary; -+ background-color: $gray-2; - vertical-align: middle; -- 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"); - &:focus { - outline: none; - } -@@ -58,8 +45,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; -@@ -109,7 +95,6 @@ - tr { - - &:not(:first-child) > td[aria-colindex='1'] { -- border-top: 1px solid gray("300"); - padding-top: 0.625rem; - } - -@@ -164,8 +149,10 @@ - padding-left: 1rem; - } - } -+} - -- .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { -- border-top-width: 1px; -- } -+.table-responsive, .table-responsive-md { -+ margin-left: -15px; -+ margin-right: -15px; -+ margin-top: 0.5rem; - } --- -2.35.1 - diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend index ba1d1a9159..22335d35b5 100644 --- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend +++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend @@ -20,7 +20,6 @@ SRC_URI += "\ file://0003-GlobalStore-Trim-assetTag-and-serialNumber.patch \ file://0004-main-padding-right-when-media-gt-992px.patch \ file://0005-AppLayout-refresh-UI-on-time.patch \ - file://0006-IBS-Global-Styles.patch \ " do_update_logo () { -- cgit v1.2.3