From 6189a62c69b8ff43dacdeed19683646bb2bf0829 Mon Sep 17 00:00:00 2001 From: Ishan Rai Date: Fri, 28 Aug 2020 06:53:35 +0000 Subject: [PATCH] mgr/dashboard: fix style being applied globally fixes: https://tracker.ceph.com/issues/45018 Signed-off-by: Ishan Rai --- .../cephfs-directories.component.scss | 2 +- .../configuration.component.scss | 2 +- .../cluster/crushmap/crushmap.component.scss | 2 +- .../app/ceph/cluster/logs/logs.component.scss | 2 +- .../dashboard/health/health.component.scss | 2 +- .../pool/pool-list/pool-list.component.scss | 24 +++++++++-------- .../blank-layout/blank-layout.component.scss | 25 ------------------ .../login-layout/login-layout.component.scss | 2 +- .../workbench-layout.component.scss | 24 ----------------- .../navigation/navigation.component.scss | 2 +- .../components/modal/modal.component.scss | 18 +++++++------ ...pwd-expiration-notification.component.scss | 2 +- .../telemetry-notification.component.scss | 2 +- .../datatable/table/table.component.html | 4 --- .../datatable/table/table.component.scss | 12 +-------- .../src/styles/ceph-custom/_toast.scss | 26 +++++++++++++++++++ 16 files changed, 59 insertions(+), 92 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss index 95a3298fbe4d..6a3121191987 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss @@ -1,7 +1,7 @@ @use './src/styles/defaults/bootstrap-defaults' as bd; // Angular2-Tree Component -::ng-deep tree-root { +::ng-deep cd-cephfs-directories tree-root { .tree-children { overflow: inherit; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss index edf636b28503..33f2ebaa2fa9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss @@ -11,6 +11,6 @@ } } -::ng-deep datatable-body-cell.wrap { +::ng-deep cd-configuration datatable-body-cell.wrap { word-break: break-all; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss index 629646246dbe..478ac776408f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/crushmap/crushmap.component.scss @@ -1,4 +1,4 @@ -::ng-deep tree-root { +::ng-deep cd-crushmap tree-root { tree-viewport { div:first-child { height: unset !important; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss index a12196c2f198..b5b4cff0a465 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss @@ -39,6 +39,6 @@ p { } } -::ng-deep ngb-timepicker input.ngb-tp-input { +::ng-deep cd-logs ngb-timepicker input.ngb-tp-input { width: 3.5rem !important; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss index f5afb8b968ef..fe26f5db0312 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss @@ -4,7 +4,7 @@ cd-info-card { padding: 0 0.5vw; } -::ng-deep .pg-status-popover-wrapper { +::ng-deep cd-health .pg-status-popover-wrapper { position: relative; .popover { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss index 2fc086ab56a0..7a3906e4750a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss @@ -1,17 +1,19 @@ @use './src/styles/defaults/bootstrap-defaults' as bd; -::ng-deep .pg-clean { - color: bd.$success; -} +::ng-deep cd-pool-list { + .pg-clean { + color: bd.$success; + } -::ng-deep .pg-working { - color: bd.$primary; -} + .pg-working { + color: bd.$primary; + } -::ng-deep .pg-warning { - color: bd.$warning; -} + .pg-warning { + color: bd.$warning; + } -::ng-deep .pg-unknown { - color: bd.$danger; + .pg-unknown { + color: bd.$danger; + } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss index 360d55369227..e69de29bb2d1 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss @@ -1,25 +0,0 @@ -@use './src/styles/defaults/bootstrap-defaults' as bd; - -::ng-deep #toast-container { - margin-top: 2vw; - - @media (max-width: 1600px) { - margin-top: 2.5vw; - } - - @media (max-width: bd.$screen-md-max) { - margin-top: 9vw; - } - - @media (max-width: 900px) { - margin-top: 10vw; - } - - @media (max-width: 319px) { - margin-top: 11vw; - } - - @media (max-width: 260px) { - margin-top: 14vw; - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss index cc6770b77332..686d02b8b424 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss @@ -1,6 +1,6 @@ @use './src/styles/defaults/bootstrap-defaults' as bd; -::ng-deep .login { +::ng-deep cd-login-layout .login { background-color: bd.$secondary; background-image: url('../../../../assets/ceph_background.gif'); background-position: right bottom; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss index f193f2414200..44e07b322e82 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss @@ -9,27 +9,3 @@ .container-fluid { overflow: auto; } - -::ng-deep #toast-container { - margin-top: 2vw; - - @media (max-width: 1600px) { - margin-top: 2.5vw; - } - - @media (max-width: bd.$screen-md-max) { - margin-top: 9vw; - } - - @media (max-width: 900px) { - margin-top: 10vw; - } - - @media (max-width: 319px) { - margin-top: 11vw; - } - - @media (max-width: 260px) { - margin-top: 14vw; - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss index 0b5d5568cd0b..288bc1e9729f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss @@ -4,7 +4,7 @@ NAVBAR STYLE --------------------------------------------------- */ -::ng-deep .cd-navbar-top { +::ng-deep cd-navigation .cd-navbar-top { .cd-navbar-brand { background: bd.$secondary; border-top: 4px solid bd.$primary; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss index 51af300723b0..ceeb614273b9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss @@ -5,15 +5,17 @@ border-radius: 5px 5px 0 0; } -::ng-deep .modal-footer { - @include mixins.hf; - border-radius: 0 0 5px 5px; -} +::ng-deep cd-modal { + .modal-footer { + @include mixins.hf; + border-radius: 0 0 5px 5px; + } -::ng-deep .modal-body { - max-height: 70vh; - overflow-x: hidden; - overflow-y: auto; + .modal-body { + max-height: 70vh; + overflow-x: hidden; + overflow-y: auto; + } } button.close { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss index 6862c2f55743..96dbaa6573c9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss @@ -1,3 +1,3 @@ -::ng-deep .no-margin-bottom { +::ng-deep cd-pwd-expiration-notification .no-margin-bottom { margin-bottom: 0; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss index 6862c2f55743..e6af78a6271c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss @@ -1,3 +1,3 @@ -::ng-deep .no-margin-bottom { +::ng-deep cd-telemetry-notification .no-margin-bottom { margin-bottom: 0; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html index 84501beb015f..3525877b922c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html @@ -14,10 +14,6 @@ - - - -
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss index 51d059bb4cac..b19c25391781 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss @@ -47,16 +47,6 @@ float: left; } - ::ng-deep .table-filters { - border-left: 1px solid bd.$datatable-divider-color; - float: right; - padding-left: 8px; - } - - ::ng-deep .table-filters label { - margin-right: 4px; - } - .form-group { padding-left: 8px; } @@ -90,7 +80,7 @@ } } -::ng-deep .cd-datatable { +::ng-deep cd-table .cd-datatable { border: 1px solid bd.$gray-400; margin-bottom: 0; max-width: none !important; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss index 1cbab1ac8727..e5a6a01d77a6 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss @@ -1,3 +1,29 @@ +@use './src/styles/defaults/bootstrap-defaults' as bd; + +#toast-container { + margin-top: 2vw; + + @media (max-width: 1600px) { + margin-top: 2.5vw; + } + + @media (max-width: bd.$screen-md-max) { + margin-top: 9vw; + } + + @media (max-width: 900px) { + margin-top: 10vw; + } + + @media (max-width: 319px) { + margin-top: 11vw; + } + + @media (max-width: 260px) { + margin-top: 14vw; + } +} + .toast-message > ul { margin: 0; padding-left: 1rem; -- 2.47.3