diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index e874a40f6..e60dcbebc 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -5,7 +5,10 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com :class=" isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question' "> -
+
{{ questionText }}
@@ -123,6 +126,7 @@ export default { useTextForValue: Boolean, valueToLogType: String, additionalButtonStyling: String, + isSmallQuestionText: Boolean, }, beforeMount() { if (this.buttonTypeObject) { @@ -136,13 +140,15 @@ export default { }, computed: { getFieldSetClasses() { - if (this.isOverflowScrollable) { - return "container-fluid overflow-scroll position-absolute px-5 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 withSmallQuestionClass = this.isSmallQuestionText + ? baseClasses + " small-question-text" + : baseClasses; + return withSmallQuestionClass; }, getComponentLoopWrapperClasses() { let classes; @@ -255,19 +261,18 @@ export default { text-align: center; } } - -.vehicle-parts { - .question-text { +.small-question-text { + &.question-text { span { font-size: 0.875rem; text-align: left; - margin: 0 0 0.5rem 0; + margin: 1rem 0 0.5rem 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 a6f5e3f0a..7317b743d 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/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 5723cd0a8..56ac2ed15 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -1,6 +1,6 @@