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