try badge with hover

This commit is contained in:
Mathieu Jaumotte 2021-12-08 15:33:01 +01:00
parent b888211ef9
commit 56ab304af1
3 changed files with 37 additions and 20 deletions

View File

@ -65,7 +65,7 @@ const messages = {
household_without_address: "Le ménage de l'usager est sans adresse", household_without_address: "Le ménage de l'usager est sans adresse",
no_data: "Aucune information renseignée", no_data: "Aucune information renseignée",
type: { type: {
thirdparty: "Tiers", thirdparty: "Tiers professionel",
person: "Usager" person: "Usager"
}, },
holder: "Titulaire" holder: "Titulaire"

View File

@ -1,24 +1,38 @@
@import 'ChillMainAssets/module/bootstrap/shared'; @import 'ChillMainAssets/module/bootstrap/shared';
/// Specific badge rounded-pill /// Specific badge rounded-pill
.badge { /// bg-thirdparty-child -> Personne de contact
// Personne de contact /// bg-thirdparty-company -> Personne morale
&.bg-thirdparty-child { /// bg-thirdparty-contact -> Personne physique
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray; .tp-type {
color: $chill-pink; .badge.rounded-pill {
&[class*='bg-thirdparty-'] {
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray;
color: $chill-pink;
}
&.bg-thirdparty-default {
display: inline-block;
}
&.bg-thirdparty-child,
&.bg-thirdparty-company,
&.bg-thirdparty-contact {
display: none;
}
} }
// Personne morale &:hover {
&.bg-thirdparty-company { .badge.rounded-pill {
//@extend .$chill-ll-gray; &.bg-thirdparty-default {
background-color: $chill-ll-gray; display: none;
color: $chill-pink; }
} &.bg-thirdparty-child,
// Personne physique &.bg-thirdparty-company,
&.bg-thirdparty-contact { &.bg-thirdparty-contact {
//@extend .$chill-ll-gray; display: inline-block;
background-color: $chill-ll-gray; }
color: $chill-pink; }
} }
} }

View File

@ -16,7 +16,10 @@
{{ thirdparty.id }} {{ thirdparty.id }}
</span> </span>
<template v-if="options.addEntity === true"> <span class="tp-type" v-if="options.addEntity === true">
<span class="badge rounded-pill bg-thirdparty-default">
{{ $t('renderbox.type.thirdparty')}}
</span>
<span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind === 'child'"> <span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind === 'child'">
{{ $t('tparty.child')}} {{ $t('tparty.child')}}
</span> </span>
@ -26,7 +29,7 @@
<span class="badge rounded-pill bg-thirdparty-contact" v-else> <span class="badge rounded-pill bg-thirdparty-contact" v-else>
{{ $t('tparty.contact')}} {{ $t('tparty.contact')}}
</span> </span>
</template> </span>
</div> </div>
<div v-if="hasParent"> <div v-if="hasParent">