change on cancel button style

This commit is contained in:
Tykayn 2021-12-08 18:17:28 +01:00 committed by tykayn
parent c393bee2b4
commit 26baa4447d
3 changed files with 22 additions and 9 deletions

View File

@ -10,9 +10,16 @@
background: $d-grey; background: $d-grey;
border: solid white 1px; border: solid white 1px;
transition: background-color ease 1.5s; transition: background-color ease 1.5s;
color: $font-color;
&.is-selected { &.is-selected {
border: solid $primary-color 1px; border: solid $primary-color 1px;
color: $font_color; color: $white;
label {
color: $white;
}
.fa {
color: $white;
}
} }
&:hover { &:hover {
background: $secondary_color; background: $secondary_color;

View File

@ -52,7 +52,7 @@
</div> </div>
<div class="step-info"> <div class="step-info">
<div class="columns"> <div class="columns">
<div class="column is-narrow"> <div class="column is-narrow is-hidden-mobile">
<a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active"> <a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
<img src="assets/img/icone_home.png" alt="logo framadate" /> <img src="assets/img/icone_home.png" alt="logo framadate" />
</a> </a>
@ -66,7 +66,7 @@
</h2> </h2>
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3> <h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
</div> </div>
<div class="column is-half has-text-right"> <div class="column has-text-right is-narrow">
<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a> <a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
</div> </div>
</div> </div>

View File

@ -8,10 +8,12 @@
a { a {
@extend .clickable; @extend .clickable;
&:hover { &:hover {
color: $secondary_color; color: $secondary_color;
} }
} }
.columns, .columns,
.column { .column {
padding-bottom: 0; padding-bottom: 0;
@ -46,24 +48,27 @@
&.is-active { &.is-active {
background: $font_color; background: $font_color;
} }
}
&.cancel-button { .cancel-button {
background: $border-color; margin-top: -0.5em;
margin-top: -0.5em; line-height: 2rem;
display: inline-block;
&:hover { &:hover {
background: $font_color; background: $font_color;
}
} }
} }
.step-info { .step-info {
padding: 0.85rem 0.85rem 2rem; padding: 0.85rem 0.85rem 2rem;
background: $white; background: $white;
i { i {
margin-left: 1ch; margin-left: 1ch;
} }
} }
.step-title-poll { .step-title-poll {
font-size: 0.85rem; font-size: 0.85rem;
color: $d-neutral; color: $d-neutral;
@ -77,6 +82,7 @@
.step-counter-text { .step-counter-text {
font-weight: 600; font-weight: 600;
} }
.cancel-button-reject, .cancel-button-reject,
.cancel-button-confirm { .cancel-button-confirm {
display: block !important; display: block !important;