mgr/dashboard: fix style being applied globally

fixes: https://tracker.ceph.com/issues/45018

Signed-off-by: Ishan Rai <ishanrai05@gmail.com>

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 95a3298fbe4d2f6a133d516a7122cc040f174061..6a3121191987ec1070992ba3e0b28e537232b707 100644 (file)
--- 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 edf636b28503c34bc205720c91fe7322a2c716fb..33f2ebaa2fa9869fed6d5d5a6a6054c35b170697 100644 (file)
--- 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 629646246dbebba602a08ce664ed353598605932..478ac776408fdf4d6a2b43afb041840c0f26e881 100644 (file)
--- 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 a12196c2f198aa9dfb61ecd886dc49822aab038e..b5b4cff0a465c2af64f49546f8d33c18758012f0 100644 (file)
--- 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 f5afb8b968ef4bd373045095c15ff03f7ec17a9f..fe26f5db0312bc0a4e478d527f35dd34cf038a09 100644 (file)
--- 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 2fc086ab56a0f37928283352a432f7b7a5b1a187..7a3906e4750adfffdd38f8477b6161acd3560e17 100644 (file)
--- 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 360d553692273b502a79047c72feb349e289cb95..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- 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 cc6770b77332752dcc598971958e6dfb3cc7fe7d..686d02b8b424b7076920c3deb3f503f7993d3a0b 100644 (file)
--- 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 f193f2414200d6a0cd89e209db3592beef0edc2b..44e07b322e82710de16c28954b22695e5a1078d2 100644 (file)
--- 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 0b5d5568cd0b7517b6f5ed9d5a5ff71950199c2f..288bc1e9729f77b993c0d6e521e4f52d39503594 100644 (file)
--- 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 51af300723b0f3cd597c1768acacf0856cdb5076..ceeb614273b9fdeeefa8cdaa5d6be1f82fce658f 100644 (file)
--- 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 6862c2f557438337830b21812a35df293a1c7295..96dbaa6573c9fcd1985c49c1740235b18617c556 100644 (file)
--- 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 6862c2f557438337830b21812a35df293a1c7295..e6af78a6271c8070670814efec98c751dfe8e11b 100644 (file)
--- 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 84501beb015f81e3e7a1f5b53c8db89d664dcb8f..3525877b922c29d8ffd01dd242be9b3edaaae3b9 100644 (file)
--- 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 @@
     </div>
     <!-- end actions -->
 
-    <!-- filters -->
-    <ng-content select=".table-filters"></ng-content>
-    <!-- end filters -->
-
     <!-- column filters -->
     <div *ngIf="columnFilters.length !== 0"
          class="btn-group widget-toolbar">

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 51d059bb4cac6b2e1ad57b92cc274daca8200889..b19c253917817e72ee3b160a857719b28cb82e96 100644 (file)
--- 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 1cbab1ac872765a10211c05b7caa12ec3593b653..e5a6a01d77a68ddf4ca2fec4a0c7543378200500 100644 (file)
--- 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;