diff --git a/src/components/questionnaire/questionnaire-question.css b/src/components/questionnaire/questionnaire-question.css index 8071d11d3..75ea0a3e0 100644 --- a/src/components/questionnaire/questionnaire-question.css +++ b/src/components/questionnaire/questionnaire-question.css @@ -19,24 +19,26 @@ .questionnaire-question__form .questionnaire-question__boolean-input { margin: var(--input-label-gap) 0 0; } + .questionnaire-question__form .questionnaire-question__single-choice-input, .questionnaire-question__form .questionnaire-question__multiple-choice-input { margin: var(--input-label-gap) 0 calc(var(--padding-small) * (-1)); } + .questionnaire-question__form .questionnaire-question__date-input .fieldset__row { margin: calc(var(--padding-small) * (-1)) 0; } + .questionnaire-question__form .questionnaire-question__date-input .fieldset__item { margin: var(--padding-small); } + .questionnaire-question__form .questionnaire-question__date-input .date-input-datepicker { margin: var(--padding-medium) auto; width: 24px; } -.questionnaire-question__form - .questionnaire-question__single-choice-dropdown-input - [id^='autocomplete-option-'] { +.questionnaire-question__form .questionnaire-question__single-choice-dropdown-input [id^='autocomplete-option-'] { cursor: pointer; } @@ -55,3 +57,12 @@ margin: var(--padding-small) 0 var(--padding-small) var(--padding-medium); } } + +.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox { + cursor: not-allowed; + color: var(--color-primary-lightest); +} + +.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox::before { + border-color: var(--color-primary-lightest); +} \ No newline at end of file diff --git a/src/components/questionnaire/questions/multiple-choice-question.tsx b/src/components/questionnaire/questions/multiple-choice-question.tsx index b968d3775..e58bd0122 100644 --- a/src/components/questionnaire/questions/multiple-choice-question.tsx +++ b/src/components/questionnaire/questions/multiple-choice-question.tsx @@ -1,5 +1,6 @@ import { h } from '@stencil/core'; import { QuestionnaireQuestionComponentProps } from './types'; +import stores from 'stores'; export const MultipleChoiceQuestion = ({ question, @@ -8,25 +9,39 @@ export const MultipleChoiceQuestion = ({ }: QuestionnaireQuestionComponentProps) => { return (
-
+