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:
bmauger 2023-04-11 09:20:35 -04:00 committed by GitHub
commit 892ae67e15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 59 additions and 287 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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 {

View file

@ -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

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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() {

View file

@ -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;
}
}
}