pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles for multi-step header in modal form

Browse Source
This commit is contained in:
dandds 2019-03-24 16:10:52 -04:00
parent 1bc434be8c
commit 0d3387b0fe
3 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/icons/checkmark-alt.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M434.539,98.499l-38.828-38.828c-5.324-5.328-11.799-7.993-19.41-7.993c-7.618,0-14.093,2.665-19.417,7.993L169.59,247.248 l-83.939-84.225c-5.33-5.33-11.801-7.992-19.412-7.992c-7.616,0-14.087,2.662-19.417,7.992L7.994,201.852 C2.664,207.181,0,213.654,0,221.269c0,7.609,2.664,14.088,7.994,19.416l103.351,103.349l38.831,38.828 c5.327,5.332,11.8,7.994,19.414,7.994c7.611,0,14.084-2.669,19.414-7.994l38.83-38.828L434.539,137.33 c5.325-5.33,7.994-11.802,7.994-19.417C442.537,110.302,439.864,103.829,434.539,98.499z" fill="#fff" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

19
styles/components/_modal.scss
View File

@ -139,4 +139,23 @@ body {
}
}
}
.modal--form {
.progress-menu ul {
width: 40%;
margin-left: 30%;
font-size: 2rem;
.progress-menu__item::before {
width: 2.8rem;
height: 2.8rem;
margin-left: -1.25rem;
}
.progress-menu__item--complete::before {
content: url('#{$asset-path}/icons/checkmark-alt.svg');
padding-top: 0.4rem;
}
}
}
}

2
templates/components/multi_step_modal_form.html
View File

@ -33,7 +33,7 @@
{{ form.csrf_token }}
{% call Modal(name=name, dismissable=dismissable) %}
{% for step in steps %}
<div v-show="step === {{ loop.index0 }}">
<div class="modal--form" v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>