Merge pull request #235 from Safelite/SSR-348-consolidate-css
Consolidate CSS. Remove comments. Set scroll to auto vs scroll.
This commit is contained in:
commit
892ae67e15
18 changed files with 59 additions and 287 deletions
|
|
@ -233,16 +233,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// .button-question-overflow {
|
||||
// height: calc(100vh - 274px);
|
||||
//
|
||||
// .overflow-scroll {
|
||||
// // Height will be determined by overall height of content above list
|
||||
// height: calc(100% - 400px);
|
||||
// overflow-x: hidden !important;
|
||||
// -webkit-overflow-scrolling: touch;
|
||||
// }
|
||||
// }
|
||||
.button-question {
|
||||
color: $black;
|
||||
|
||||
|
|
|
|||
|
|
@ -103,19 +103,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
.questions-page {
|
||||
.question-text {
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -352,17 +352,3 @@ components: {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -149,19 +149,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
ol {
|
||||
margin-left: -1rem;
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -316,19 +316,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
#license-plate-question-wrapper .form-test-error {
|
||||
/**
|
||||
Override extra margin-bottom in the error message in TextboxQuestion
|
||||
|
|
|
|||
|
|
@ -135,17 +135,6 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.fade-on-route-transition {
|
||||
height: calc(100% - 120px);
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.fade-on-route-transition {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.alert.alert-warning
|
||||
{
|
||||
margin-top: 20px;
|
||||
|
|
|
|||
|
|
@ -125,33 +125,21 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
#sub-header span{
|
||||
color: $black;
|
||||
color: $black;
|
||||
}
|
||||
.body-text {
|
||||
color: $darker-gray;
|
||||
p, li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
color: $darker-gray;
|
||||
p, li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
.modal-link a{
|
||||
color: $blue-700;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: $blue-700;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.question-text {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -76,18 +76,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -478,18 +478,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -106,18 +106,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,18 +100,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,21 +109,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-fluid {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -232,20 +232,7 @@ components: {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="scss">
|
||||
#vehicle-parts-alert {
|
||||
.alert-heading {
|
||||
margin-top: 0.25rem !important;
|
||||
|
|
|
|||
|
|
@ -122,21 +122,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-fluid {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,18 +99,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -254,18 +254,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-on-route-transition {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.page-container-grouped-styles {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -348,19 +348,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.fade-on-route-transition {
|
||||
height: calc(100% - 80px);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
.fade-on-route-transition {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.my-2
|
||||
{
|
||||
.my-2 {
|
||||
margin-bottom: 0rem !important;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
|
|
|
|||
|
|
@ -5,56 +5,62 @@ body {
|
|||
background-color: #fff;
|
||||
color: #4D5151;
|
||||
.container-fluid {
|
||||
max-width: 576px; //Remove once desktop app is complete
|
||||
&.container-shadow {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
|
||||
}
|
||||
&.make-tall {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.prevent-squish{
|
||||
overflow-x: unset;
|
||||
}
|
||||
max-width: 576px; //Remove once desktop app is complete
|
||||
&.container-shadow {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
|
||||
}
|
||||
&.make-tall {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.prevent-squish{
|
||||
overflow-x: unset;
|
||||
}
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container,
|
||||
.container-fluid {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sub-container{
|
||||
&.make-tall {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
&.make-tall {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container-grouped-styles {
|
||||
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
|
||||
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
|
||||
}
|
||||
|
||||
//Footer modal backdrop adjustments for positioning
|
||||
.modal-backdrop {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 576px;
|
||||
height: calc(100% - 72px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 576px;
|
||||
height: calc(100% - 72px);
|
||||
}
|
||||
|
||||
}
|
||||
// Scroll page when modal isn't open
|
||||
.fade-on-route-transition {
|
||||
height: calc(100% - 80px);
|
||||
overflow: auto;
|
||||
}
|
||||
// Prevent scroll when modal is open
|
||||
.modal-open {
|
||||
.fade-on-route-transition {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue