From 7042b075cc5e22289cf3526e3bd116195affa9cf Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Sun, 18 Aug 2019 11:35:58 -0700
Subject: [PATCH] move custom sass classes to overrides

---
 hyperglass/static/main.scss      | 168 ------------
 hyperglass/static/overrides.sass | 450 ++++++++++++++++++++++++-------
 2 files changed, 350 insertions(+), 268 deletions(-)

diff --git a/hyperglass/static/main.scss b/hyperglass/static/main.scss
index b306400..17dddb8 100644
--- a/hyperglass/static/main.scss
+++ b/hyperglass/static/main.scss
@@ -1,173 +1,5 @@
 // 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 "./theme.sass";
 @import "./node_modules/bootstrap/scss/bootstrap";
diff --git a/hyperglass/static/overrides.sass b/hyperglass/static/overrides.sass
index 14c7245..3a63e2e 100644
--- a/hyperglass/static/overrides.sass
+++ b/hyperglass/static/overrides.sass
@@ -1,94 +1,344 @@
+// Custom Utility 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
+@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
+
+// hyperglass overrides
 #hg-form
-	margin-top: 15% !important
-	margin-bottom: 10% !important
-	padding: unset
+    margin-top: 15% !important
+    margin-bottom: 10% !important
+    padding: unset
 
 #hg-results
-	margin-top: 5% !important
-	margin-bottom: 5% !important
-	padding: unset
+    margin-top: 5% !important
+    margin-bottom: 5% !important
+    padding: unset
 
 .nav-masthead
-	.nav-link
-		& + .nav-link
-			margin-left: 1rem
+    .nav-link
+        & + .nav-link
+            margin-left: 1rem
 
 // Fixes input group issue where button is 1px taller than the input element (default is 2px)
 .input-group-lg > .form-control:not(textarea),
 .input-group-lg > .custom-select,
 .bootstrap-select.form-control-lg .dropdown-toggle
-	height: calc(1.5em + 1rem + 3px) !important
+    height: calc(1.5em + 1rem + 3px) !important
 
 .hg-back:hover
-	text-decoration: none 
-	border: 1px solid $hg-primary !important
+    text-decoration: none 
+    border: 1px solid $hg-primary !important
 
 .hg-back:focus
-	text-decoration: none
+    text-decoration: none
 
 .hg-back
-	position: fixed !important
-	width: 3rem !important
-	height: 3rem !important
-	left: 2rem !important
-	bottom: 2rem !important
-	border-radius: 50rem !important
-	border: 1px solid $card-border-color !important
-	transition: all .3s !important
-	font-weight: 200 !important
-	font-size: 1.4rem !important
-	opacity: 1 !important
-	pointer-events: auto !important
+    position: fixed !important
+    width: 3rem !important
+    height: 3rem !important
+    left: 2rem !important
+    bottom: 2rem !important
+    border-radius: 50rem !important
+    border: 1px solid $card-border-color !important
+    transition: all .3s !important
+    font-weight: 200 !important
+    font-size: 1.4rem !important
+    opacity: 1 !important
+    pointer-events: auto !important
 
 #hg-accordion
-	.btn-link
-		font-weight: 200
-		font-size: 1.4rem
+    .btn-link
+        font-weight: 200
+        font-size: 1.4rem
 
 .hg-menu-btn
-	-webkit-transition: none
-	-moz-transition: none
-	-o-transition: none
-	transition: none
+    -webkit-transition: none
+    -moz-transition: none
+    -o-transition: none
+    transition: none
 
 .hg-menu-icon
-	-webkit-transition: all 0.5s ease
-	-moz-transition: all 0.5s ease
-	-o-transition: all 0.5s ease
-	transition: all 0.5s ease
+    -webkit-transition: all 0.5s ease
+    -moz-transition: all 0.5s ease
+    -o-transition: all 0.5s ease
+    transition: all 0.5s ease
 
 .tab-content
-	overflow: hidden
+    overflow: hidden
 
 .tab-pane
-	& > pre
-		min-height: 45vh
-		max-height: 60vh
-		-ms-overflow-style: none
-		scrollbar-width: none
+    & > pre
+        min-height: 45vh
+        max-height: 60vh
+        -ms-overflow-style: none
+        scrollbar-width: none
 
 ::-webkit-scrollbar
-	width: 0px
-	background: transparent
+    width: 0px
+    background: transparent
 
 .hg-status-container
-	display: inline-block
-	text-align: center
-	vertical-align: middle
-	line-height: 1.5
+    display: inline-block
+    text-align: center
+    vertical-align: middle
+    line-height: 1.5
 
 .hg-loading
-	animation: spinner-border .75s linear infinite
+    animation: spinner-border .75s linear infinite
 
 .accordion
-	div
-		&.card
-			&:only-child
-				border-bottom: $card-border-width solid $card-border-color
+    div
+        &.card
+            &:only-child
+                border-bottom: $card-border-width solid $card-border-color
 
 .btn:focus,.btn:active
-	outline: none !important
-	box-shadow: none
+    outline: none !important
+    box-shadow: none
 
 // .hg-results-loading
 // 	background-color: $hg-loading-bg
@@ -98,80 +348,80 @@
 // 	color: $hg-loading-text
 
 .bg-primary
-	.btn-primary:hover
-		color: findTextColor($hg-primary) !important
-		background-color: darken($hg-primary, 10%) !important
-		border-color: $hg-primary !important
+    .btn-primary:hover
+        color: findTextColor($hg-primary) !important
+        background-color: darken($hg-primary, 10%) !important
+        border-color: $hg-primary !important
 
 .bg-warning
-	.btn-warning:hover
-		color: findTextColor($hg-warning) !important
-		background-color: darken($hg-warning, 10%) !important
-		border-color: $hg-warning !important
+    .btn-warning:hover
+        color: findTextColor($hg-warning) !important
+        background-color: darken($hg-warning, 10%) !important
+        border-color: $hg-warning !important
 
 .bg-danger
-	.btn-danger:hover
-		color: findTextColor($hg-danger) !important
-		background-color: darken($hg-danger, 10%) !important
-		border-color: $hg-danger !important
+    .btn-danger:hover
+        color: findTextColor($hg-danger) !important
+        background-color: darken($hg-danger, 10%) !important
+        border-color: $hg-danger !important
 
 .bg-loading
-	.btn-loading:hover
-		color: findTextColor($hg-loading) !important
-		background-color: darken($hg-loading, 10%) !important
-		border-color: $hg-loading !important
+    .btn-loading:hover
+        color: findTextColor($hg-loading) !important
+        background-color: darken($hg-loading, 10%) !important
+        border-color: $hg-loading !important
 
 .bg-primary
-	*
-		color: findTextColor($hg-primary) !important
+    *
+        color: findTextColor($hg-primary) !important
 
 .bg-danger
-	*
-		color: findTextColor($hg-danger) !important
+    *
+        color: findTextColor($hg-danger) !important
 
 .bg-warning
-	*
-		color: findTextColor($hg-warning) !important
+    *
+        color: findTextColor($hg-warning) !important
 
 .bg-loading
-	*
-		color: findTextColor($hg-primary) !important
+    *
+        color: findTextColor($hg-primary) !important
 
 .bg-primary
-	::selection, ::-moz-selection
-		background-color: findTextColor($hg-primary) !important
-		color: $hg-primary !important
+    ::selection, ::-moz-selection
+        background-color: findTextColor($hg-primary) !important
+        color: $hg-primary !important
 
 .bg-danger
-	::selection, ::-moz-selection
-		background-color: findTextColor($hg-danger) !important
-		color: $hg-danger !important
+    ::selection, ::-moz-selection
+        background-color: findTextColor($hg-danger) !important
+        color: $hg-danger !important
 
 .bg-warning
-	::selection, ::-moz-selection
-		background-color: findTextColor($hg-warning) !important
-		color: $hg-warning !important
+    ::selection, ::-moz-selection
+        background-color: findTextColor($hg-warning) !important
+        color: $hg-warning !important
 
 .bg-loading
-	::selection, ::-moz-selection
-		background-color: findTextColor($hg-loading) !important
-		color: $hg-loading !important
+    ::selection, ::-moz-selection
+        background-color: findTextColor($hg-loading) !important
+        color: $hg-loading !important
 
 .bg-danger
-	.btn-outline-danger
-		border-color: findTextColor($hg-danger) !important
+    .btn-outline-danger
+        border-color: findTextColor($hg-danger) !important
 
 .bg-danger
-	.btn-outline-danger:hover
-		background-color:  findTextColor($hg-danger) !important
-		color: $hg-danger !important
+    .btn-outline-danger:hover
+        background-color:  findTextColor($hg-danger) !important
+        color: $hg-danger !important
 
 .bg-danger
-	hr
-		background-color: darken($hg-danger, 10%)
+    hr
+        background-color: darken($hg-danger, 10%)
 
 .modal-body > p
-	padding-left: 0.3rem !important
+    padding-left: 0.3rem !important
 
 .modal-title
-	padding-bottom: 1rem !important
\ No newline at end of file
+    padding-bottom: 1rem !important
\ No newline at end of file