mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
move custom sass classes to overrides
This commit is contained in:
checktheroads
@@ -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";
|
||||
|
||||
@@ -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
|
||||
padding-bottom: 1rem !important
|
||||
Reference in New Issue
Block a user