Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

highlight current step in stepper

Browse Source
This commit is contained in:
Tykayn 2021-11-16 16:23:32 +01:00 committed by tykayn
parent 4233a8eb7e
commit a3db9b7cd5
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/features/administration/stepper/stepper.component.html
View File

@ -17,10 +17,42 @@
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div> <div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div> </div>
<div class="shortcuts"> <div class="shortcuts">
<a class="shortcut" href="#" [routerLink]="['/administration/step/1']">1</a> <a
<a class="shortcut" href="#" [routerLink]="['/administration/step/2']">2</a> class="shortcut"
<a class="shortcut" href="#" [routerLink]="['/administration/step/3']">3</a> href="#"
<a class="shortcut" href="#" [routerLink]="['/administration/step/4']">4</a> [routerLink]="['/administration/step/1']"
<a class="shortcut" href="#" [routerLink]="['/administration/step/5']">5</a> [ngClass]="{ 'is-active': pollService.step_current == 1 }"
>1</a
>
<a
class="shortcut"
href="#"
[routerLink]="['/administration/step/2']"
[ngClass]="{ 'is-active': pollService.step_current == 2 }"
>2</a
>
<a
class="shortcut"
href="#"
[routerLink]="['/administration/step/3']"
[ngClass]="{ 'is-active': pollService.step_current == 3 }"
>3</a
>
<a
class="shortcut"
href="#"
[routerLink]="['/administration/step/4']"
[ngClass]="{ 'is-active': pollService.step_current == 4 }"
>4</a
>
<a
class="shortcut"
href="#"
[routerLink]="['/administration/step/5']"
[ngClass]="{ 'is-active': pollService.step_current == 5 }"
>5</a
>
<!-- <a class="shortcut" href="#" [routerLink]="['/administration/step/6']" [ngClass]="{'is-active':pollService.step_current == 6}">6</a>-->
<!-- <a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
</div> </div>
</section> </section>

8
src/app/features/administration/stepper/stepper.component.scss
View File

@ -18,7 +18,7 @@
background: $primary_color; background: $primary_color;
} }
.shortcut { .shortcut {
background: $secondary_color; background: $dark-lavender;
color: white; color: white;
padding: 1em; padding: 1em;
margin: 1em; margin: 1em;
@ -26,4 +26,10 @@
border-radius: 100%; border-radius: 100%;
text-align: center; text-align: center;
width: 4em; width: 4em;
&.is-active {
background: $font_color;
}
}
.poll-title {
color: $d-neutral;
} }

4
src/styles/variables.scss
View File

@ -25,8 +25,8 @@ $beige-lighter: #eff0eb;
$d-primary: #3e3882; // bleu 800 $d-primary: #3e3882; // bleu 800
$d-primary-intense: #6359cf; // bleu 600 $d-primary-intense: #6359cf; // bleu 600
$d-grey: #f6f5fd; // bleu 30 $d-grey: #f6f5fd;
$d-neutral: #767486; // bleu 30 $d-neutral: #767486;
$d-alt: #a9607f; $d-alt: #a9607f;
$d-info: #ecf4ff; $d-info: #ecf4ff;