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

Add styling for survey progress bar

This commit is contained in:
Ramon Wenger 2019-07-09 14:56:26 +02:00
parent a9b10fdf88
commit d5a63a0c7e
2 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
@include main-title; @include main-title;
margin-bottom: $large-spacing*2; margin-bottom: $large-spacing*2;
span { span {
@include main-title; @include main-title;
} }
} }
@ -26,8 +26,58 @@
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
} }
&__radiogroup-group { &__body {
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
justify-content: space-between;
//grid-template-areas: "content content" "navigation progress";
&--completed {
flex-direction: column;
}
}
&__page {
width: 100%;
//grid-area: content;
order: 1;
}
&__footer {
//grid-area: navigation;
order: 2;
}
$progress-margin-right: 120px;
&__progress {
background-color: $color-silver;
height: 0.3em;
order: 3;
width: 40%;
//grid-area: progress;
position: relative;
margin-right: $progress-margin-right;
box-sizing: border-box;
display: flex;
align-content: center;
}
&__progress-bar {
background-color: $color-brand;
height: 100%;
> span {
position: absolute;
right: -$progress-margin-right;
top: -0.25em;
@include regular-text;
}
&__radiogroup-group {
display: flex;
flex-direction: column;
}
} }
} }

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

@ -1,26 +1,26 @@
export const css = { export const css = {
'root': 'survey', 'root': 'survey',
'header': '', 'header': 'survey__header',
'body': '', 'body': 'survey__body',
'bodyEmpty': '', 'bodyEmpty': '',
'footer': '', 'footer': 'survey__footer',
'navigationButton': 'button button--primary', 'navigationButton': 'button button--primary',
'completedPage': '', 'completedPage': 'survey__body--completed',
'navigation': { 'navigation': {
'complete': 'button button--primary', 'complete': 'button button--primary',
'prev': 'button button--primary', 'prev': 'button button--primary',
'next': 'button button--primary', 'next': 'button button--primary',
'start': 'button button--primary' 'start': 'button button--primary'
}, },
'progress': 'progress center-block mx-auto mb-4', 'progress': 'survey__progress',
'progressBar': 'progress-bar', 'progressBar': 'survey__progress-bar',
'page': { 'page': {
'root': '', 'root': 'survey__page',
'title': '', 'title': '',
'survey__page-description': '' 'survey__page-description': ''
}, },
'pageTitle': '', 'pageTitle': 'survey__page-title',
'pageDescription': 'small', 'pageDescription': 'survey__page-description',
'row': 'sv_row', 'row': 'sv_row',
'question': { 'question': {
'mainRoot': 'survey__question question', 'mainRoot': 'survey__question question',
@ -126,9 +126,9 @@ export const css = {
'root': 'btn-group', 'root': 'btn-group',
'item': 'btn btn-default btn-secondary', 'item': 'btn btn-default btn-secondary',
'selected': 'active', 'selected': 'active',
'minText': 'sv_q_rating_min_text', 'minText': '',
'itemText': 'sv_q_rating_item_text', 'itemText': '',
'maxText': 'sv_q_rating_max_text' 'maxText': ''
}, },
'text': 'survey__input skillbox-input', 'text': 'survey__input skillbox-input',
'expression': 'survey__input skillbox-input', 'expression': 'survey__input skillbox-input',
@ -141,7 +141,7 @@ export const css = {
'removeFile': 'sv_q_file_remove' 'removeFile': 'sv_q_file_remove'
}, },
'saveData': { 'saveData': {
'root': '', 'root': 'save-data',
'saving': 'alert alert-info', 'saving': 'alert alert-info',
'error': 'alert alert-danger', 'error': 'alert alert-danger',
'success': 'alert alert-success', 'success': 'alert alert-success',