import 15.2.0 Octopus source

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / dashboard / health / health.component.scss

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index 17d0134b91bb363731b27edf3680f8c13adbc47f..efeb7c56fe6451d11bf5a5d84cfbe1ae537f3d88 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -1,55 +1,10 @@
-@import '../../../../defaults';
+@import 'styles';
 
 cd-info-card {
   padding: 0 0.5vw 0 0.5vw;
-}
-
-.cd-container-flex {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-}
-
-.cd-col-5 {
-  width: 20%;
-}
-
-@media (max-width: 1599px) {
-  .cd-col-5 {
-    width: 25%;
-  }
-}
-
-@media (max-width: $screen-md-max) {
-  .cd-col-5 {
-    width: 33%;
-  }
-}
-
-@media (max-width: $screen-sm-max) {
-  .cd-col-5 {
-    width: 50%;
-  }
-}
-
-@media (max-width: $screen-xs-max) {
-  cd-info-card {
-    padding: 0;
-  }
-
-  .cd-col-5 {
-    width: 100%;
-  }
-}
-
-.info-group {
-  margin: 0;
-  padding: 0;
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .mb-4;
 }
 
 ::ng-deep .pg-status-popover-wrapper {
@@ -87,3 +42,19 @@ cd-info-card {
 .mgr-active-name:hover {
   cursor: pointer;
 }
+
+::ng-deep cd-info-card {
+  @extend .col-12;
+  @extend .col-sm-12;
+  @extend .col-md-6;
+  @extend .col-lg-4;
+
+  &.cd-status-card {
+    @extend .col-xl-3;
+  }
+
+  &.cd-performance-card,
+  &.cd-capacity-card {
+    @extend .col-xl;
+  }
+}