From e7f707b6d140512340edd3838af132f826bf06d9 Mon Sep 17 00:00:00 2001
From: Sebastian Krah <skrah@suse.com>
Date: Wed, 30 Jan 2019 11:47:19 +0100
Subject: [PATCH] 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>
---
 .../src/app/ceph/dashboard/health/health.component.scss   | 6 +++---
 .../app/ceph/dashboard/info-card/info-card-popover.scss   | 8 +++++---
 .../app/ceph/dashboard/info-card/info-card.component.scss | 6 +++---
 3 files changed, 11 insertions(+), 9 deletions(-)

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 5eb340cf47c80..17d0134b91bb3 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
@@ -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 aa74c0e0d71fe..1ec12366edd90 100644
--- 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 0986e42db8268..dd0ce775e0455 100644
--- 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;
   }
-- 
2.39.5