diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 93149d4d..03253171 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -4,7 +4,8 @@
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
-
+
{{ questionText }}
@@ -121,6 +122,8 @@ export default {
useTextForValue: Boolean,
valueToLogType: String,
additionalButtonStyling: String,
+ isSmallQuestionText: Boolean,
+ isSmallQuestionLabelText: Boolean,
},
beforeMount() {
if (this.buttonTypeObject) {
@@ -134,13 +137,20 @@ export default {
},
computed: {
getFieldSetClasses() {
- if (this.isOverflowScrollable) {
- return "container-fluid overflow-scroll position-absolute pt-1 py-0";
- } else if (this.buttonTypeString == "listCard") {
- return "w-100";
- } else {
- return "";
- }
+ const baseClasses = this.isOverflowScrollable
+ ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+ : this.buttonTypeString == "listCard"
+ ? "w-100"
+ : "";
+
+ const SmallQuestionTextClass = this.isSmallQuestionText
+ ? baseClasses + "small-question-text"
+ : baseClasses;
+
+ const SmallQuestionLabelText = this.isSmallQuestionLabelText
+ ? SmallQuestionTextClass + "small-question-label-text"
+ : SmallQuestionTextClass;
+ return SmallQuestionLabelText;
},
getComponentLoopWrapperClasses() {
let classes;
@@ -254,35 +264,35 @@ export default {
}
}
-.vehicle-parts {
- .question-text {
+.small-question-text {
+ &.question-text {
span {
font-size: 0.875rem;
text-align: left;
margin: 0 0 0.5rem 0;
}
}
- .question-text {
+ &.question-text {
margin: 0;
}
- fieldset {
+ &fieldset {
.ui-radio {
margin: 0;
}
}
}
-.welcome {
- .question-text {
- span {
+.small-question-label-text {
+ &.question-text {
+ span {
text-align: left;
margin: 0 0 0.25rem 0;
}
}
- .question-text {
+ &.question-text {
margin: 0;
}
- fieldset {
+ &fieldset {
.ui-radio {
margin: 0;
}
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index a9477134..123d5652 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -25,6 +25,7 @@
textPosition="text-start"
:loaderEnabled="false"
isRequired
+ isSmallQuestionText
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules" />
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 22fcce50..82fe74a2 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -120,6 +120,7 @@
buttonTypeString="listButtonHorizontal"
validationRules="damage-option-required"
isRequired
+ isSmallQuestionLabelText
ref="glassOnlyDamage"
v-if="this.displayGlassOnlyQuestion"
disableAutoFill/>