mgr/dashboard: Use scss variable for media queries

Uses the newly created scss breakpoint variables for every media query that was hardcoded so far.

Signed-off-by: Sebastian Krah <skrah@suse.com>

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 5eb340cf47c8057a804ca6dc8d54be879bbbef3b..17d0134b91bb363731b27edf3680f8c13adbc47f 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
@@ -25,19 +25,19 @@ cd-info-card {
   }
 }
 
-@media (max-width: 1199px) {
+@media (max-width: $screen-md-max) {
   .cd-col-5 {
     width: 33%;
   }
 }
 
-@media (max-width: 991px) {
+@media (max-width: $screen-sm-max) {
   .cd-col-5 {
     width: 50%;
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: $screen-xs-max) {
   cd-info-card {
     padding: 0;
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
index aa74c0e0d71fe25e5e8502188e8b9465c145f7fd..1ec12366edd9036a7870af5f060c607c51ee7ee4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
@@ -1,3 +1,5 @@
+@import '../../../../defaults';
+
 .info-card-popover-cluster-status {
   max-width: 23vw;
   max-height: 20vh;
@@ -9,18 +11,18 @@
   }
 }
 
-@media (max-width: 1199px) {
+@media (max-width: $screen-md-max) {
   .info-card-popover-cluster-status {
     max-width: 31vw;
   }
 }
 
-@media (max-width: 991px) {
+@media (max-width: $screen-sm-max) {
   .info-card-popover-cluster-status {
     max-width: 46vw;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: $screen-xs-max) {
   .info-card-popover-cluster-status {
     max-width: 83vw;
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index 0986e42db82680a804d803eadba2129f0070e877..dd0ce775e04559e394cf19bbca62255540466ba3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -96,7 +96,7 @@ $logs-text-font-size: $card-font-min-size;
   }
 }
 
-@media (max-width: 1199px) {
+@media (max-width: $screen-md-max) {
   .card-medium {
     min-height: $card-medium-height * 1.5;
   }
@@ -106,7 +106,7 @@ $logs-text-font-size: $card-font-min-size;
   }
 }
 
-@media (max-width: 991px) {
+@media (max-width: $screen-sm-max) {
   .card {
     min-height: $card-height * 2;
   }
@@ -116,7 +116,7 @@ $logs-text-font-size: $card-font-min-size;
   }
 }
 
-@media (max-width: 991px) and (min-width: 768px) {
+@media (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
   .card-medium {
     min-height: $card-medium-height * 2.2;
   }