From b413d2f2343a989c4ebeae3adced5637d67ba750 Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Tue, 13 Aug 2019 00:50:10 -0700
Subject: [PATCH] :lipstick: Add responsive max-width classes

---
 hyperglass/static/main.scss | 170 ++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)

diff --git a/hyperglass/static/main.scss b/hyperglass/static/main.scss
index 284b8f0..94c1f38 100644
--- a/hyperglass/static/main.scss
+++ b/hyperglass/static/main.scss
@@ -10,6 +10,176 @@
   }
 }
 
+// Custom Classes
+
+@media (min-width: 576px) {
+  .mw-sm-25 {
+    max-width: 25% !important;
+  }
+
+  .mw-sm-50 {
+    max-width: 50% !important;
+  }
+
+  .mw-sm-75 {
+    max-width: 75% !important;
+  }
+
+  .mw-sm-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-sm-auto {
+    max-width: auto !important;
+  }
+
+  .mh-sm-25 {
+    max-height: 25% !important;
+  }
+
+  .mh-sm-50 {
+    max-height: 50% !important;
+  }
+
+  .mh-sm-75 {
+    max-height: 75% !important;
+  }
+
+  .mh-sm-100 {
+    max-height: 100% !important;
+  }
+
+  .mh-sm-auto {
+    max-height: auto !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .mw-md-25 {
+    max-width: 25% !important;
+  }
+
+  .mw-md-50 {
+    max-width: 50% !important;
+  }
+
+  .mw-md-75 {
+    max-width: 75% !important;
+  }
+
+  .mw-md-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-md-auto {
+    max-width: auto !important;
+  }
+
+  .mh-md-25 {
+    max-height: 25% !important;
+  }
+
+  .mh-md-50 {
+    max-height: 50% !important;
+  }
+
+  .mh-md-75 {
+    max-height: 75% !important;
+  }
+
+  .mh-md-100 {
+    max-height: 100% !important;
+  }
+
+  .mh-md-auto {
+    max-height: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .mw-lg-25 {
+    max-width: 25% !important;
+  }
+
+  .mw-lg-50 {
+    max-width: 50% !important;
+  }
+
+  .mw-lg-75 {
+    max-width: 75% !important;
+  }
+
+  .mw-lg-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-lg-auto {
+    max-width: auto !important;
+  }
+
+  .mh-lg-25 {
+    max-height: 25% !important;
+  }
+
+  .mh-lg-50 {
+    max-height: 50% !important;
+  }
+
+  .mh-lg-75 {
+    max-height: 75% !important;
+  }
+
+  .mh-lg-100 {
+    max-height: 100% !important;
+  }
+
+  .mh-lg-auto {
+    max-height: auto !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .mw-xl-25 {
+    max-width: 25% !important;
+  }
+
+  .mw-xl-50 {
+    max-width: 50% !important;
+  }
+
+  .mw-xl-75 {
+    max-width: 75% !important;
+  }
+
+  .mw-xl-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-xl-auto {
+    max-width: auto !important;
+  }
+
+  .mh-xl-25 {
+    max-height: 25% !important;
+  }
+
+  .mh-xl-50 {
+    max-height: 50% !important;
+  }
+
+  .mh-xl-75 {
+    max-height: 75% !important;
+  }
+
+  .mh-xl-100 {
+    max-height: 100% !important;
+  }
+
+  .mh-xl-auto {
+    max-height: auto !important;
+  }
+}
+
 // Imports
 @import "./node_modules/bootstrap/scss/bootstrap";
 @import "./overrides.sass";
\ No newline at end of file