mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
54e04dc93f
* make applyStyles private and clean up comments * fix box shadow in input elements * fix dropdown element width * remove old/unused plugin-survey.css file * add survey.css to dist archive * add changeset
68 lines
2.1 KiB
SCSS
68 lines
2.1 KiB
SCSS
@use "survey-core/defaultV2.min.css";
|
|
|
|
// move buttons to right (couldn't figure out a way to do this with the SurveyJS class name map
|
|
div#sv-nav-complete.sv-action, div#sv-nav-next.sv-action {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
// TO DO: get this to work with the SurveyJS class name map
|
|
input[type="text"] {
|
|
width: auto;
|
|
}
|
|
|
|
// center the question content
|
|
.jspsych-question-content {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
// prevent question content from overflowing question border/panel
|
|
.jspsych-question-root {
|
|
overflow: scroll;
|
|
}
|
|
|
|
// left-align all text in the main questions section (title is still centered)
|
|
.jspsych-body-container {
|
|
text-align: left;
|
|
align-items: center;
|
|
}
|
|
|
|
// For some reason, when there is no survey title, the content's max-width is not restricted.
|
|
// This means that the left text align for sv-components-row pushes the content to the far left in this case.
|
|
// The CSS below fixes this by restricting the max-width and centering the content (and setting padding).
|
|
.jspsych-body {
|
|
width: auto;
|
|
max-width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
}
|
|
|
|
// removing the padding around the question content helps align the content with the nav buttons
|
|
.jspsych-page {
|
|
padding: 0;
|
|
min-width: 400px;
|
|
}
|
|
|
|
// removing the padding around the navigation button container helps align the content with the nav buttons
|
|
.jspsych-footer {
|
|
padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
|
|
}
|
|
|
|
// change the 'complete' button colors to match the previous/next buttons
|
|
.jspsych-nav-complete {
|
|
background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
|
|
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
display: block;
|
|
}
|
|
|
|
// remove the complete button from page flow when it is hidden
|
|
div#sv-nav-complete.sv-action.sv-action--hidden {
|
|
display: none;
|
|
}
|
|
|
|
// remove min-width from questions that appear in the same row
|
|
.jspsych-row-multiple > div {
|
|
min-width: unset !important;
|
|
} |