blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Setup Screen: Style tweak to current and done steps

Browse Source 
Based on idea by Francesco.
This commit is contained in:
Pablo Vazquez 2022-07-20 18:40:11 +02:00 committed by Francesco Siddi
parent 9d7fe1e479
commit 2741f900b9
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/src/components/steps/StepsWrapper.vue
View File

@ -31,7 +31,7 @@ function prevStepTitle() {
<ul class="progress"> <ul class="progress">
<li <li
v-for="(title, index) in stepTitles" v-for="(title, index) in stepTitles"
:class="{active: selectedStep == title}" :class="{current: selectedStep == title, done: index < selectedStepNumber() }"
@click="updateStepTitle(title)" @click="updateStepTitle(title)"
> >
<span></span> <span></span>
@ -52,9 +52,6 @@ function prevStepTitle() {
class="btn btn-primary">Next</button> class="btn btn-primary">Next</button>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@ -64,7 +61,7 @@ function prevStepTitle() {
--wiz-progress-indicator-size: 8px; --wiz-progress-indicator-size: 8px;
--wiz-progress-indicator-border-width: 2px; --wiz-progress-indicator-border-width: 2px;
--wiz-progress-indicator-color: var(--color-text-hint); --wiz-progress-indicator-color: var(--color-text-hint);
--wiz-progress-indicator-color-active: var(--color-accent); --wiz-progress-indicator-color-current: var(--color-accent);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -74,14 +71,13 @@ function prevStepTitle() {
position: relative; position: relative;
} }
/* Progress indicator dot. */
.progress li { .progress li {
cursor: pointer; cursor: pointer;
} }
/* Progress indicator dot. */
.progress li span { .progress li span {
background-color: var(--wiz-progress-indicator-color); background-color: var(--color-background-column);
border-radius: 50%; border-radius: 50%;
border: var(--wiz-progress-indicator-border-width) solid var(--color-background-column); border: var(--wiz-progress-indicator-border-width) solid var(--color-background-column);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color); box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color);
@ -93,16 +89,21 @@ function prevStepTitle() {
width: var(--wiz-progress-indicator-size); width: var(--wiz-progress-indicator-size);
} }
.progress li.active span { .progress li.done span {
background-color: var(--color-accent); background-color: var(--wiz-progress-indicator-color-current);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-active); box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current);
} }
.progress li.active+li span, .progress li.current span {
.progress li.active+li+li span {
background-color: var(--color-background-column); background-color: var(--color-background-column);
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current);
} }
.progress li.current span {
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current);
}
/* Progress indicator line between dots. */ /* Progress indicator line between dots. */
.progress:before { .progress:before {
background-color: var(--wiz-progress-indicator-color); background-color: var(--wiz-progress-indicator-color);