From: Sebastian Krah <skrah@suse.com>
Date: Wed, 30 Jan 2019 10:47:19 +0000 (+0100)
Subject: mgr/dashboard: Use scss variable for media queries
X-Git-Tag: v14.1.0~190^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F26198%2Fhead;p=ceph.git

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 5eb340cf47c..17d0134b91b 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 aa74c0e0d71..1ec12366edd 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 0986e42db82..dd0ce775e04 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;
   }