[ref] Rends plus lisible les boutons Accepter / Refuser

master
Jérôme Lebleu 2017-09-27 21:22:12 +02:00
Parent d9b1128a85
révision 1aa509cfb0
2 fichiers modifiés avec 91 ajouts et 4 suppressions

Voir le fichier

@ -3,7 +3,7 @@
<div class="panel">
<div class="panel-content">
<ul class="items-list">
{{# repeat 5 }}
{{# repeat 3 }}
<li class="reservation item grid-x grid-margin-x align-middle">
<div class="medium-5 cell">
<a href="{{ root }}evenement.html" class="evenement-nom">
@ -20,13 +20,57 @@
</a>
</div>
<div class="item-actions medium-shrink cell">
<div class="expanded button-group compact">
<button type="button" class="success button"{{# ifequal @index 1 }} disabled{{/ ifequal }}>Valider</button>
<button type="button" class="alert button"{{# ifequal @index 2 }} disabled{{ else }} data-open="confirm-refus"{{/ ifequal }}>Refuser</button>
<div class="reservation-traiter expanded button-group compact">
<button type="submit" class="accepter button">Accepter</button>
<button type="button" class="refuser alert button" data-open="confirm-refus">Refuser</button>
</div>
</div>
</li>
{{/ repeat }}
<li class="reservation item grid-x grid-margin-x align-middle">
<div class="medium-5 cell">
<a href="{{ root }}evenement.html" class="evenement-nom">
Harmonie municipale : Concert d’automne
</a>
<div class="evenement-date compact">
dim. 15 octobre à 15:00
</div>
</div>
<div class="medium-auto cell">
<span class="hide-for-medium">par</span>
<a href="{{ root }}agent.html">
<h5 class="personne-nom compact">Jean-Michel Dupont</h5>
</a>
</div>
<div class="item-actions medium-shrink cell">
<div class="reservation-traiter expanded button-group compact">
<div class="accepter button is-active">Accepter</div>
<button type="button" class="refuser alert button" data-open="confirm-refus">Refuser</button>
</div>
</div>
</li>
<li class="reservation item grid-x grid-margin-x align-middle">
<div class="medium-5 cell">
<a href="{{ root }}evenement.html" class="evenement-nom">
Harmonie municipale : Concert d’automne
</a>
<div class="evenement-date compact">
dim. 15 octobre à 15:00
</div>
</div>
<div class="medium-auto cell">
<span class="hide-for-medium">par</span>
<a href="{{ root }}agent.html">
<h5 class="personne-nom compact">Jean-Michel Dupont</h5>
</a>
</div>
<div class="item-actions medium-shrink cell">
<div class="reservation-traiter expanded button-group compact">
<button type="submit" class="accepter button">Accepter</button>
<div class="refuser button is-active">Refuser</div>
</div>
</div>
</li>
</ul>
</div>
</div>

Voir le fichier

@ -47,3 +47,46 @@
.evenement-places {
color: $dark-gray;
}
/// Réservations -------------------------------------------------------------
.reservation-traiter {
.button {
min-width: 90px;
background-color: $white;
&.accepter {
color: $success-color;
border: 1px solid $success-color;
border-right: 0;
&:hover,
&:focus,
&.is-active {
background-color: $success-color;
}
}
&.refuser {
color: $alert-color;
border: 1px solid $alert-color;
border-left: 1px solid $black;
&:hover,
&:focus,
&.is-active {
background-color: $alert-color;
}
}
&:hover,
&:focus,
&.is-active {
color: $white;
}
&.is-active {
cursor: default;
}
}
}