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",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",
thirdparty: "Tiers professionel",
person: "Usager"
},
holder: "Titulaire"

View File

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

View File

@ -16,7 +16,10 @@
{{ thirdparty.id }}
</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'">
{{ $t('tparty.child')}}
</span>
@ -26,7 +29,7 @@
<span class="badge rounded-pill bg-thirdparty-contact" v-else>
{{ $t('tparty.contact')}}
</span>
</template>
</span>
</div>
<div v-if="hasParent">