ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Fix some Survey styling issues introduced with update

This commit is contained in:
Ramon Wenger 2022-12-15 12:01:28 +01:00
parent e256eac55b
commit c7134f99c2
2 changed files with 621 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/styles/_survey.scss
View File

@ -116,17 +116,25 @@
}
@mixin table-row {
display: flex;
width: 100%;
flex-direction: row;
> td {
@include small-text;
}
}
.matrix {
margin-bottom: $large-spacing;
&__row {
display: flex;
width: 100%;
flex-direction: row;
@include table-row;
border-top: 1px solid $color-silver;
> td {
@include small-text;
display: flex;
align-items: center;
}
}
@ -148,14 +156,16 @@
$half-spacing: calc($small-spacing / 2);
thead {
tr {
@include table-row;
}
th {
text-align: left;
@include small-text;
vertical-align: bottom;
padding: $half-spacing $half-spacing $half-spacing 0;
padding: $small-spacing 0;
> span {
margin-right: $small-spacing;
}
}
}

626
client/src/survey.config.js
View File

@ -1,3 +1,579 @@
/**
* possible values to override, taken from the documentation:
* https://surveyjs.io/form-library/examples/survey-customcss/reactjs#content-docs
*
* {
* "root": "sd-root-modern",
* "rootMobile": "sd-root-modern--mobile",
* "rootReadOnly": "sd-root--readonly",
* "container": "sd-container-modern",
* "header": "sd-title sd-container-modern__title",
* "body": "sd-body",
* "bodyWithTimer": "sd-body--with-timer",
* "clockTimerRoot": "sd-timer",
* "clockTimerRootTop": "sd-timer--top",
* "clockTimerRootBottom": "sd-timer--bottom",
* "clockTimerProgress": "sd-timer__progress",
* "clockTimerProgressAnimation": "sd-timer__progress--animation",
* "clockTimerTextContainer": "sd-timer__text-container",
* "clockTimerMinorText": "sd-timer__text--minor",
* "clockTimerMajorText": "sd-timer__text--major",
* "bodyEmpty": "sd-body sd-body--empty",
* "footer": "sd-footer sd-body__navigation sd-clearfix",
* "title": "sd-title",
* "description": "sd-description",
* "logo": "sd-logo",
* "logoImage": "sd-logo__image",
* "headerText": "sd-header__text",
* "headerClose": "sd-hidden",
* "navigationButton": "",
* "bodyNavigationButton": "sd-btn",
* "completedPage": "sd-completedpage",
* "timerRoot": "sd-body__timer",
* "navigation": {
* "complete": "sd-btn--action sd-navigation__complete-btn",
* "prev": "sd-navigation__prev-btn",
* "next": "sd-navigation__next-btn",
* "start": "sd-navigation__start-btn",
* "preview": "sd-navigation__preview-btn",
* "edit": ""
* },
* "panel": {
* "title": "sd-title sd-element__title sd-panel__title",
* "titleExpandable": "sd-element__title--expandable",
* "titleExpanded": "sd-element__title--expanded",
* "titleCollapsed": "sd-element__title--collapsed",
* "titleDisabled": "sd-element__title--disabled",
* "titleOnExpand": "sd-panel__title--expanded",
* "titleBar": "sd-action-title-bar",
* "description": "sd-description sd-panel__description",
* "container": "sd-element sd-element--complex sd-panel sd-row__panel",
* "withFrame": "sd-element--with-frame",
* "content": "sd-panel__content",
* "icon": "sd-panel__icon",
* "iconExpanded": "sd-panel__icon--expanded",
* "footer": "sd-panel__footer",
* "requiredText": "sd-panel__required-text",
* "header": "sd-panel__header sd-element__header sd-element__header--location-top",
* "collapsed": "sd-element--collapsed",
* "expanded": "sd-element--expanded",
* "nested": "sd-element--nested",
* "invisible": "sd-element--invisible",
* "navigationButton": ""
* },
* "paneldynamic": {
* "mainRoot": "sd-element sd-question sd-question--paneldynamic sd-element--complex sd-question--complex sd-row__question",
* "empty": "sd-question--empty",
* "root": "sd-paneldynamic",
* "navigation": "sd-paneldynamic__navigation",
* "title": "sd-title sd-element__title sd-question__title",
* "button": "sd-action sd-paneldynamic__btn",
* "buttonRemove": "sd-action--negative sd-paneldynamic__remove-btn",
* "buttonAdd": "sd-paneldynamic__add-btn",
* "buttonPrev": "sd-paneldynamic__prev-btn sd-action--icon sd-action",
* "buttonPrevDisabled": "sd-action--disabled",
* "buttonNextDisabled": "sd-action--disabled",
* "buttonNext": "sd-paneldynamic__next-btn sd-action--icon sd-action",
* "progressContainer": "sd-paneldynamic__progress-container",
* "progress": "sd-progress",
* "progressBar": "sd-progress__bar",
* "progressText": "sd-paneldynamic__progress-text",
* "separator": "sd-paneldynamic__separator",
* "panelWrapper": "sd-paneldynamic__panel-wrapper",
* "footer": "sd-paneldynamic__footer",
* "panelFooter": "sd-paneldynamic__panel-footer",
* "footerButtonsContainer": "sd-paneldynamic__buttons-container",
* "panelWrapperInRow": "sd-paneldynamic__panel-wrapper--in-row",
* "progressBtnIcon": "icon-progressbuttonv2",
* "noEntriesPlaceholder": "sd-paneldynamic__placeholder sd-question__placeholder"
* },
* "progress": "sd-progress sd-body__progress",
* "progressBar": "sd-progress__bar",
* "progressText": "sd-progress__text",
* "progressButtonsContainerCenter": "sd-progress-buttons__container-center",
* "progressButtonsContainer": "sd-progress-buttons__container",
* "progressButtonsImageButtonLeft": "sd-progress-buttons__image-button-left",
* "progressButtonsImageButtonRight": "sd-progress-buttons__image-button-right",
* "progressButtonsImageButtonHidden": "sd-progress-buttons__image-button--hidden",
* "progressButtonsListContainer": "sd-progress-buttons__list-container",
* "progressButtonsList": "sd-progress-buttons__list",
* "progressButtonsListElementPassed": "sd-progress-buttons__list-element--passed",
* "progressButtonsListElementCurrent": "sd-progress-buttons__list-element--current",
* "progressButtonsListElementNonClickable": "sd-progress-buttons__list-element--nonclickable",
* "progressButtonsPageTitle": "sd-progress-buttons__page-title",
* "progressButtonsPageDescription": "sd-progress-buttons__page-description",
* "progressTextInBar": "sd-hidden",
* "page": {
* "root": "sd-page sd-body__page",
* "emptyHeaderRoot": "sd-page__empty-header",
* "title": "sd-title sd-page__title",
* "description": "sd-description sd-page__description"
* },
* "pageTitle": "sd-title sd-page__title",
* "pageDescription": "sd-description sd-page__description",
* "row": "sd-row sd-clearfix",
* "rowMultiple": "sd-row--multiple",
* "pageRow": "sd-page__row",
* "question": {
* "mainRoot": "sd-element sd-question sd-row__question",
* "flowRoot": "sd-element sd-question sd-row__question sd-row__question--flow",
* "withFrame": "sd-element--with-frame",
* "asCell": "sd-table__cell",
* "answered": "sd-question--answered",
* "header": "sd-question__header sd-element__header",
* "headerLeft": "sd-question__header--location--left",
* "headerTop": "sd-question__header--location-top sd-element__header--location-top",
* "headerBottom": "sd-question__header--location--bottom",
* "content": "sd-question__content",
* "contentLeft": "sd-question__content--left",
* "titleLeftRoot": "sd-question--left",
* "titleOnAnswer": "sd-question__title--answer",
* "titleOnError": "sd-question__title--error",
* "title": "sd-title sd-element__title sd-question__title",
* "titleExpandable": "sd-element__title--expandable",
* "titleExpanded": "sd-element__title--expanded",
* "titleCollapsed": "sd-element__title--collapsed",
* "titleDisabled": "sd-element__title--disabled",
* "titleBar": "sd-action-title-bar",
* "requiredText": "sd-question__required-text",
* "number": "sd-element__num",
* "description": "sd-description sd-question__description",
* "descriptionUnderInput": "sd-description sd-question__description",
* "comment": "sd-input sd-comment",
* "other": "sd-input sd-comment",
* "required": "sd-question--required",
* "titleRequired": "sd-question__title--required",
* "indent": 20,
* "footer": "sd-question__footer",
* "formGroup": "sd-question__form-group",
* "hasError": "sd-question--error",
* "collapsed": "sd-element--collapsed",
* "expanded": "sd-element--expanded",
* "nested": "sd-element--nested",
* "invisible": "sd-element--invisible",
* "composite": "sd-element--complex",
* "disabled": "sd-question--disabled"
* },
* "image": {
* "mainRoot": "sd-question sd-question--image",
* "root": "sd-image",
* "image": "sd-image__image",
* "adaptive": "sd-image__image--adaptive",
* "withFrame": ""
* },
* "html": {
* "mainRoot": "sd-question sd-row__question sd-question--html",
* "root": "sd-html",
* "withFrame": ""
* },
* "error": {
* "root": "sd-question__erbox",
* "icon": "",
* "item": "",
* "tooltip": "sd-question__erbox--tooltip",
* "outsideQuestion": "sd-question__erbox--outside-question",
* "aboveQuestion": "sd-question__erbox--above-question",
* "belowQuestion": "sd-question__erbox--below-question",
* "locationTop": "sd-question__erbox--location--top",
* "locationBottom": "sd-question__erbox--location--bottom"
* },
* "checkbox": {
* "root": "sd-selectbase",
* "rootRow": "sd-selectbase--row",
* "rootMultiColumn": "sd-selectbase--multi-column",
* "item": "sd-item sd-checkbox sd-selectbase__item",
* "itemOnError": "sd-item--error",
* "itemSelectAll": "sd-checkbox--selectall",
* "itemNone": "sd-checkbox--none",
* "itemDisabled": "sd-item--disabled sd-checkbox--disabled",
* "itemChecked": "sd-item--checked sd-checkbox--checked",
* "itemHover": "sd-item--allowhover sd-checkbox--allowhover",
* "itemInline": "sd-selectbase__item--inline",
* "label": "sd-selectbase__label",
* "labelChecked": "",
* "itemControl": "sd-visuallyhidden sd-item__control sd-checkbox__control",
* "itemDecorator": "sd-item__svg sd-checkbox__svg",
* "itemSvgIconId": "#icon-v2check",
* "controlLabel": "sd-item__control-label",
* "materialDecorator": "sd-item__decorator sd-checkbox__decorator",
* "other": "sd-input sd-comment sd-selectbase__other",
* "column": "sd-selectbase__column"
* },
* "radiogroup": {
* "root": "sd-selectbase",
* "rootRow": "sd-selectbase--row",
* "rootMultiColumn": "sd-selectbase--multi-column",
* "item": "sd-item sd-radio sd-selectbase__item",
* "itemOnError": "sd-item--error",
* "itemInline": "sd-selectbase__item--inline",
* "label": "sd-selectbase__label",
* "labelChecked": "",
* "itemDisabled": "sd-item--disabled sd-radio--disabled",
* "itemChecked": "sd-item--checked sd-radio--checked",
* "itemHover": "sd-item--allowhover sd-radio--allowhover",
* "itemControl": "sd-visuallyhidden sd-item__control sd-radio__control",
* "itemDecorator": "sd-item__svg sd-radio__svg",
* "controlLabel": "sd-item__control-label",
* "materialDecorator": "sd-item__decorator sd-radio__decorator",
* "other": "sd-input sd-comment sd-selectbase__other",
* "clearButton": "",
* "column": "sd-selectbase__column"
* },
* "boolean": {
* "mainRoot": "sd-element sd-question sd-row__question sd-question--boolean",
* "root": "sv_qcbc sv_qbln sd-scrollable-container",
* "rootRadio": "sv_qcbc sv_qbln sd-scrollable-container sd-scrollable-container--compact",
* "item": "sd-boolean",
* "itemOnError": "sd-boolean--error",
* "control": "sd-boolean__control sd-visuallyhidden",
* "itemChecked": "sd-boolean--checked",
* "itemIndeterminate": "sd-boolean--indeterminate",
* "itemDisabled": "sd-boolean--disabled",
* "label": "sd-boolean__label",
* "switch": "sd-boolean__switch",
* "disabledLabel": "sd-checkbox__label--disabled",
* "sliderText": "sd-boolean__thumb-text",
* "slider": "sd-boolean__thumb",
* "radioItem": "sd-item",
* "radioItemChecked": "sd-item--checked sd-radio--checked",
* "radioLabel": "sd-selectbase__label",
* "radioControlLabel": "sd-item__control-label",
* "radioFieldset": "sd-selectbase",
* "itemRadioDecorator": "sd-item__svg sd-radio__svg",
* "materialRadioDecorator": "sd-item__decorator sd-radio__decorator",
* "itemRadioControl": "sd-visuallyhidden sd-item__control sd-radio__control",
* "rootCheckbox": "sd-selectbase",
* "checkboxItem": "sd-item sd-selectbase__item sd-checkbox",
* "checkboxLabel": "sd-selectbase__label",
* "checkboxItemOnError": "sd-item--error",
* "checkboxItemIndeterminate": "sd-checkbox--intermediate",
* "checkboxItemChecked": "sd-item--checked sd-checkbox--checked",
* "checkboxItemDecorator": "sd-item__svg sd-checkbox__svg",
* "checkboxItemDisabled": "sd-checkbox--disabled",
* "controlCheckbox": "sd-visuallyhidden sd-item__control sd-checkbox__control",
* "checkboxMaterialDecorator": "sd-item__decorator sd-checkbox__decorator",
* "checkboxControlLabel": "sd-item__control-label",
* "svgIconCheckedId": "#icon-v2check"
* },
* "text": {
* "root": "sd-input sd-text",
* "small": "sd-row__question--small",
* "controlDisabled": "sd-input--disabled",
* "onError": "sd-input--error"
* },
* "multipletext": {
* "root": "sd-multipletext",
* "itemLabel": "sd-multipletext__item-container sd-input",
* "itemLabelOnError": "sd-multipletext__item-container--error",
* "item": "sd-multipletext__item",
* "itemTitle": "sd-multipletext__item-title",
* "row": "sd-multipletext__row",
* "cell": "sd-multipletext__cell"
* },
* "dropdown": {
* "root": "sd-selectbase",
* "small": "sd-row__question--small",
* "selectWrapper": "",
* "other": "sd-input sd-comment sd-selectbase__other",
* "onError": "sd-input--error",
* "label": "sd-selectbase__label",
* "item": "sd-item sd-radio sd-selectbase__item",
* "itemDisabled": "sd-item--disabled sd-radio--disabled",
* "itemChecked": "sd-item--checked sd-radio--checked",
* "itemHover": "sd-item--allowhover sd-radio--allowhover",
* "itemControl": "sd-visuallyhidden sd-item__control sd-radio__control",
* "itemDecorator": "sd-item__svg sd-radio__svg",
* "cleanButton": "sd-dropdown_clean-button",
* "cleanButtonSvg": "sd-dropdown_clean-button-svg",
* "cleanButtonIconId": "icon-clear",
* "control": "sd-input sd-dropdown",
* "controlInputFieldComponent": "sd-dropdown__input-field-component",
* "controlValue": "sd-dropdown__value",
* "controlDisabled": "sd-input--disabled",
* "controlEmpty": "sd-dropdown--empty",
* "controlLabel": "sd-item__control-label",
* "filterStringInput": "sd-dropdown__filter-string-input",
* "materialDecorator": "sd-item__decorator sd-radio__decorator"
* },
* "imagepicker": {
* "mainRoot": "sd-element sd-question sd-row__question",
* "root": "sd-selectbase sd-imagepicker",
* "rootColumn": "sd-imagepicker--column",
* "item": "sd-imagepicker__item",
* "itemOnError": "sd-imagepicker__item--error",
* "itemInline": "sd-imagepicker__item--inline",
* "itemChecked": "sd-imagepicker__item--checked",
* "itemDisabled": "sd-imagepicker__item--disabled",
* "itemHover": "sd-imagepicker__item--allowhover",
* "label": "sd-imagepicker__label",
* "itemDecorator": "sd-imagepicker__item-decorator",
* "imageContainer": "sd-imagepicker__image-container",
* "itemControl": "sd-imagepicker__control sd-visuallyhidden",
* "image": "sd-imagepicker__image",
* "itemText": "sd-imagepicker__text",
* "other": "sd-input sd-comment",
* "itemNoImage": "sd-imagepicker__no-image",
* "itemNoImageSvgIcon": "sd-imagepicker__no-image-svg",
* "itemNoImageSvgIconId": "#icon-no-image",
* "column": "sd-selectbase__column sd-imagepicker__column"
* },
* "matrix": {
* "mainRoot": "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
* "tableWrapper": "sd-matrix",
* "root": "sd-table sd-matrix__table",
* "rootVerticalAlignTop": "sd-table--align-top",
* "rootVerticalAlignMiddle": "sd-table--align-middle",
* "rootAlternateRows": "sd-table--alternate-rows",
* "rowError": "sd-matrix__row--error",
* "cell": "sd-table__cell sd-matrix__cell",
* "row": "sd-table__row",
* "headerCell": "sd-table__cell sd-table__cell--header",
* "rowTextCell": "sd-table__cell sd-matrix__cell sd-table__cell--row-text",
* "label": "sd-item sd-radio sd-matrix__label",
* "itemOnError": "sd-item--error",
* "itemValue": "sd-visuallyhidden sd-item__control sd-radio__control",
* "itemChecked": "sd-item--checked sd-radio--checked",
* "itemDisabled": "sd-item--disabled sd-radio--disabled",
* "itemHover": "sd-radio--allowhover",
* "materialDecorator": "sd-item__decorator sd-radio__decorator",
* "itemDecorator": "sd-item__svg sd-radio__svg",
* "cellText": "sd-matrix__text",
* "cellTextSelected": "sd-matrix__text--checked",
* "cellTextDisabled": "sd-matrix__text--disabled",
* "cellResponsiveTitle": "sd-matrix__responsive-title"
* },
* "matrixdropdown": {
* "mainRoot": "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
* "rootScroll": "sd-question--scroll",
* "root": "sd-table sd-matrixdropdown",
* "rootVerticalAlignTop": "sd-table--align-top",
* "rootVerticalAlignMiddle": "sd-table--align-middle",
* "rootAlternateRows": "sd-table--alternate-rows",
* "cell": "sd-table__cell",
* "row": "sd-table__row",
* "headerCell": "sd-table__cell sd-table__cell--header",
* "rowTextCell": "sd-table__cell sd-table__cell--row-text",
* "cellRequiredText": "sd-question__required-text",
* "detailButton": "sd-table__cell--detail-button",
* "detailButtonExpanded": "sd-table__cell--detail-button--expanded",
* "detailIcon": "sd-detail-panel__icon",
* "detailIconExpanded": "sd-detail-panel__icon--expanded",
* "detailIconId": "icon-expanddetail",
* "detailIconExpandedId": "icon-collapsedetail",
* "actionsCell": "sd-table__cell sd-table__cell--actions",
* "emptyCell": "sd-table__cell--empty",
* "verticalCell": "sd-table__cell--vertical",
* "cellQuestionWrapper": "sd-table__question-wrapper"
* },
* "matrixdynamic": {
* "mainRoot": "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
* "rootScroll": "sd-question--scroll",
* "empty": "sd-question--empty",
* "root": "sd-table sd-matrixdynamic",
* "cell": "sd-table__cell",
* "row": "sd-table__row",
* "headerCell": "sd-table__cell sd-table__cell--header",
* "rowTextCell": "sd-table__cell sd-table__cell--row-text",
* "cellRequiredText": "sd-question__required-text",
* "button": "sd-action sd-matrixdynamic__btn",
* "detailRow": "sd-table__row sd-table__row--detail",
* "detailButton": "sd-table__cell--detail-button",
* "detailButtonExpanded": "sd-table__cell--detail-button--expanded",
* "detailIcon": "sd-detail-panel__icon",
* "detailIconExpanded": "sd-detail-panel__icon--expanded",
* "detailIconId": "icon-expanddetail",
* "detailIconExpandedId": "icon-collapsedetail",
* "detailPanelCell": "sd-table__cell--detail-panel",
* "actionsCell": "sd-table__cell sd-table__cell--actions",
* "buttonAdd": "sd-matrixdynamic__add-btn",
* "buttonRemove": "sd-action--negative sd-matrixdynamic__remove-btn",
* "iconAdd": "",
* "iconRemove": "",
* "dragElementDecorator": "sd-drag-element__svg",
* "iconDragElement": "#icon-v2dragelement_16x16",
* "footer": "sd-matrixdynamic__footer",
* "emptyRowsSection": "sd-matrixdynamic__placeholder sd-question__placeholder",
* "iconDrag": "sv-matrixdynamic__drag-icon",
* "ghostRow": "sv-matrix-row--drag-drop-ghost-mod",
* "emptyCell": "sd-table__cell--empty",
* "verticalCell": "sd-table__cell--vertical",
* "cellQuestionWrapper": "sd-table__question-wrapper"
* },
* "rating": {
* "rootDropdown": "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
* "root": "sd-scrollable-container sd-rating",
* "rootWrappable": "sd-scrollable-container sd-rating sd-rating--wrappable",
* "item": "sd-rating__item",
* "itemOnError": "sd-rating__item--error",
* "itemHover": "sd-rating__item--allowhover",
* "selected": "sd-rating__item--selected",
* "minText": "sd-rating__item-text sd-rating__min-text",
* "itemText": "sd-rating__item-text",
* "maxText": "sd-rating__item-text sd-rating__max-text",
* "itemDisabled": "sd-rating__item--disabled",
* "control": "sd-input sd-dropdown",
* "controlValue": "sd-dropdown__value",
* "controlDisabled": "sd-input--disabled",
* "controlEmpty": "sd-dropdown--empty",
* "filterStringInput": "sd-dropdown__filter-string-input",
* "onError": "sd-input--error"
* },
* "comment": {
* "root": "sd-input sd-comment",
* "small": "sd-row__question--small",
* "controlDisabled": "sd-input--disabled",
* "onError": "sd-input--error"
* },
* "expression": "",
* "file": {
* "root": "sd-file",
* "other": "sd-input sd-comment",
* "placeholderInput": "sd-visuallyhidden",
* "preview": "sd-file__preview",
* "fileSign": "",
* "fileList": "sd-file__list",
* "fileSignBottom": "sd-file__sign",
* "dragArea": "sd-file__drag-area",
* "dragAreaActive": "sd-file__drag-area--active",
* "fileDecorator": "sd-file__decorator",
* "onError": "sd-file__decorator--error",
* "fileDecoratorDrag": "sd-file__decorator--drag",
* "fileInput": "sd-visuallyhidden",
* "noFileChosen": "sd-description sd-file__no-file-chosen",
* "chooseFile": "sd-file__choose-btn",
* "chooseFileAsText": "sd-action sd-file__choose-btn--text",
* "chooseFileAsTextDisabled": "sd-action--disabled",
* "chooseFileAsIcon": "sd-context-btn sd-file__choose-btn--icon",
* "chooseFileIconId": "icon-choosefile",
* "disabled": "sd-file__choose-btn--disabled",
* "removeButton": "sd-context-btn sd-context-btn--negative sd-file__btn sd-file__clean-btn",
* "removeButtonBottom": "",
* "removeButtonIconId": "icon-clear",
* "removeFile": "sd-hidden",
* "removeFileSvg": "",
* "removeFileSvgIconId": "icon-delete",
* "wrapper": "sd-file__wrapper",
* "defaultImage": "sd-file__default-image",
* "defaultImageIconId": "icon-defaultfile",
* "leftIconId": "icon-arrowleft",
* "rightIconId": "icon-arrowright",
* "removeFileButton": "sd-context-btn sd-context-btn--negative sd-file__remove-file-button",
* "dragAreaPlaceholder": "sd-file__drag-area-placeholder",
* "imageWrapper": "sd-file__image-wrapper",
* "single": "sd-file--single",
* "singleImage": "sd-file--single-image",
* "mobile": "sd-file--mobile"
* },
* "signaturepad": {
* "mainRoot": "sd-element sd-question sd-question--signature sd-row__question",
* "root": "sd-signaturepad sjs_sp_container",
* "small": "sd-row__question--small",
* "controls": "sjs_sp_controls sd-signaturepad__controls",
* "placeholder": "sjs_sp_placeholder",
* "clearButton": "sjs_sp_clear sd-context-btn sd-context-btn--negative sd-signaturepad__clear",
* "clearButtonIconId": "icon-clear"
* },
* "saveData": {
* "root": "",
* "saving": "",
* "error": "",
* "success": "",
* "saveAgainButton": ""
* },
* "window": {
* "root": "sv_window",
* "body": "sv_window_content",
* "header": {
* "root": "sv_window_title",
* "title": "",
* "button": "",
* "buttonExpanded": "",
* "buttonCollapsed": ""
* }
* },
* "ranking": {
* "root": "sv-ranking",
* "rootMobileMod": "sv-ranking--mobile",
* "rootDragMod": "sv-ranking--drag",
* "rootDisabled": "sd-ranking--disabled",
* "rootDesignMode": "sv-ranking--design-mode",
* "item": "sv-ranking-item",
* "itemContent": "sv-ranking-item__content sd-ranking-item__content",
* "itemIndex": "sv-ranking-item__index",
* "controlLabel": "sv-ranking-item__text",
* "itemGhostNode": "sv-ranking-item__ghost",
* "itemIconContainer": "sv-ranking-item__icon-container",
* "itemIcon": "sv-ranking-item__icon",
* "itemIconHoverMod": "sv-ranking-item__icon--hover",
* "itemIconFocusMod": "sv-ranking-item__icon--focus",
* "itemGhostMod": "sv-ranking-item--ghost",
* "itemDragMod": "sv-ranking--drag",
* "itemOnError": "sv-ranking-item--error"
* },
* "buttongroup": {
* "root": "sv-button-group",
* "item": "sv-button-group__item",
* "itemIcon": "sv-button-group__item-icon",
* "itemDecorator": "sv-button-group__item-decorator",
* "itemCaption": "sv-button-group__item-caption",
* "itemHover": "sv-button-group__item--hover",
* "itemSelected": "sv-button-group__item--selected",
* "itemDisabled": "sv-button-group__item--disabled",
* "itemControl": "sv-visuallyhidden"
* },
* "list": {
* "root": "sv-list__container sd-list",
* "item": "sv-list__item sd-list__item",
* "itemBody": "sv-list__item-body sd-list__item-body",
* "itemSelected": "sv-list__item--selected sd-list__item--selected"
* },
* "actionBar": {
* "root": "sd-action-bar",
* "item": "sd-action",
* "defaultSizeMode": "",
* "smallSizeMode": "",
* "itemPressed": "sd-action--pressed",
* "itemAsIcon": "sd-action--icon",
* "itemIcon": "sd-action__icon",
* "itemTitle": "sd-action__title"
* },
* "variables": {
* "mobileWidth": "--sd-mobile-width",
* "imagepickerGapBetweenItems": "--sd-imagepicker-gap",
* "themeMark": "--sv-defaultV2-mark"
* },
* "tagbox": {
* "root": "sd-selectbase",
* "small": "sd-row__question--small",
* "selectWrapper": "",
* "other": "sd-input sd-comment sd-selectbase__other",
* "onError": "sd-input--error",
* "label": "sd-selectbase__label",
* "item": "sd-item sd-radio sd-selectbase__item",
* "itemDisabled": "sd-item--disabled sd-radio--disabled",
* "itemChecked": "sd-item--checked sd-radio--checked",
* "itemHover": "sd-item--allowhover sd-radio--allowhover",
* "itemControl": "sd-visuallyhidden sd-item__control sd-radio__control",
* "itemDecorator": "sd-item__svg sd-radio__svg",
* "cleanButton": "sd-tagbox_clean-button sd-dropdown_clean-button",
* "cleanButtonSvg": "sd-tagbox_clean-button-svg sd-dropdown_clean-button-svg",
* "cleanButtonIconId": "icon-clear",
* "cleanItemButton": "sd-tagbox-item_clean-button",
* "cleanItemButtonSvg": "sd-tagbox-item_clean-button-svg",
* "cleanItemButtonIconId": "icon-clear_16x16",
* "control": "sd-input sd-tagbox sd-dropdown",
* "controlValue": "sd-tagbox__value sd-dropdown__value",
* "controlValueItems": "sd-tagbox__value-items",
* "placeholderInput": "sd-tagbox__placeholder",
* "controlDisabled": "sd-input--disabled",
* "controlEmpty": "sd-dropdown--empty sd-tagbox--empty",
* "controlLabel": "sd-item__control-label",
* "filterStringInput": "sd-tagbox__filter-string-input sd-dropdown__filter-string-input",
* "materialDecorator": "sd-item__decorator sd-checkbox__decorator"
* }
* }
*
*/
export const css = {
'root': 'survey',
'header': 'survey__header',
@ -10,14 +586,14 @@ export const css = {
'complete': 'button button--primary',
'prev': 'button button--primary',
'next': 'button button--primary',
'start': 'button button--primary'
'start': 'button button--primary',
},
'progress': 'survey__progress',
'progressBar': 'survey__progress-bar',
'page': {
'root': 'survey__page',
'title': 'survey__page-title',
'description': 'survey__page-description'
'description': 'survey__page-description',
},
'pageTitle': 'survey__page-title',
'pageDescription': 'survey__page-description',
@ -27,65 +603,71 @@ export const css = {
'flowRoot': 'sv_q_flow sv_qstn',
'titleLeftRoot': 'sv_qstn_left',
'title': 'survey__question-title',
'titleOnError': 'survey__question-title--error',
'content': 'survey__question-content',
'number': 'sv_q_num',
'survey__question-description': 'small',
'comment': 'survey__question-input skillbox-input question__input',
'required': '',
'titleRequired': '',
'hasError': 'survey__question--error question--error',
'indent': 20
'indent': 20,
},
'panel': {
'title': 'survey__panel-title',
'titleOnError': 'survey__panel-title--error',
'description': 'small survey__panel-description',
'container': 'sv_p_container'
'container': 'sv_p_container',
},
'error': {
'root': 'alert alert-danger',
'icon': 'glyphicon glyphicon-exclamation-sign',
'item': 'survey__error-item',
'locationTop': 'survey__error survey__error--top',
'locationBottom': 'survey__error survey__error--bottom'
'locationBottom': 'survey__error survey__error--bottom',
},
'boolean': {
'root': 'sv_qbln form-inline checkbox',
'item': '',
'label': '',
'materialDecorator': 'checkbox-material'
'materialDecorator': 'checkbox-material',
},
'checkbox': {
'root': 'survey__checkbox-group',
'item': 'base-input-container base-input-container--survey',
'itemControl': 'base-input-container__input',
"itemChecked": "base-input-container__input--checked",
"itemDecorator": "",
'label': 'base-input-container__label-container',
'controlLabel': 'base-input-container__label',
'materialDecorator': 'base-input-container__checkbox base-input-container__icon',
'other': 'sv_q_checkbox_other skillbox-input',
'column': 'sv_q_select_column'
'column': 'sv_q_select_column',
},
'comment': 'survey__input skillbox-input question__input',
'dropdown': {
'root': '',
'control': 'survey__input skillbox-input skillbox-dropdown',
'other': 'sv_q_dd_other skillbox-input'
'other': 'sv_q_dd_other skillbox-input',
},
'html': {
'root': ''
'root': '',
},
'matrix': {
'root': 'survey__matrix matrix',
'label': 'base-input-container__label-container matrix__label',
'item': 'survey__matrix-item',
'itemValue': 'survey__matrix-item matrix__item base-input-container__input',
'headerCell': 'matrix__header-cell',
'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio',
'row': 'survey__radiogroup-group matrix__row',
'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',
'cellText': 'survey__matrix-cell-text',
'cellTextSelected': 'survey__matrix-cell-text--selected',
'cellLabel': 'survey__matrix-cell-label'
'cellLabel': 'survey__matrix-cell-label',
},
'matrixdropdown': {
'root': 'table'
'root': 'table',
},
'matrixdynamic': {
'root': 'table',
@ -93,7 +675,7 @@ export const css = {
'buttonAdd': '',
'buttonRemove': '',
'iconAdd': '',
'iconRemove': ''
'iconRemove': '',
},
'paneldynamic': {
'root': '',
@ -101,12 +683,12 @@ export const css = {
'buttonPrev': '',
'buttonNext': '',
'buttonAdd': '',
'buttonRemove': ''
'buttonRemove': '',
},
'multipletext': {
'root': 'table',
'itemTitle': '',
'itemValue': 'sv_q_mt_item_value skillbox-input'
'itemValue': 'sv_q_mt_item_value skillbox-input',
},
'radiogroup': {
'root': 'survey__radiogroup-group',
@ -117,7 +699,7 @@ export const css = {
'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
'other': 'sv_q_radiogroup_other skillbox-input',
'clearButton': 'sv_q_radiogroup_clear button',
'column': 'sv_q_select_column'
'column': 'sv_q_select_column',
},
'imagepicker': {
'root': 'sv_imgsel',
@ -126,7 +708,7 @@ export const css = {
'itemControl': 'sv_q_imgsel_control_item',
'image': 'sv_q_imgsel_image',
'itemText': 'sv_q_imgsel_text',
'clearButton': 'sv_q_radiogroup_clear'
'clearButton': 'sv_q_radiogroup_clear',
},
'rating': {
'root': 'btn-group',
@ -134,7 +716,7 @@ export const css = {
'selected': 'active',
'minText': '',
'itemText': '',
'maxText': ''
'maxText': '',
},
'text': 'survey__input skillbox-input question__input',
'expression': 'survey__input skillbox-input',
@ -144,14 +726,14 @@ export const css = {
'preview': 'sv_q_file_preview',
'removeButton': 'sv_q_file_remove_button',
'fileInput': 'sv_q_file_input',
'removeFile': 'sv_q_file_remove'
'removeFile': 'sv_q_file_remove',
},
'saveData': {
'root': 'save-data',
'saving': 'alert alert-info',
'error': 'alert alert-danger',
'success': 'alert alert-success',
'saveAgainButton': ''
'saveAgainButton': '',
},
'window': {
'root': 'modal-content',
@ -161,7 +743,7 @@ export const css = {
'title': 'pull-left',
'button': 'glyphicon pull-right',
'buttonExpanded': 'glyphicon pull-right glyphicon-chevron-up',
'buttonCollapsed': 'glyphicon pull-right glyphicon-chevron-down'
}
}
'buttonCollapsed': 'glyphicon pull-right glyphicon-chevron-down',
},
},
};