Increase size between user-groups in AddresseeSelectorComponent.vue

This commit is contained in:
Julien Fastré 2024-06-04 11:59:26 +02:00
parent e45af94c78
commit 154fc3e2f6
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB

View File

@ -1,13 +1,13 @@
<template> <template>
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 col-md-6 text-center"> <div class="col-12 col-lg-6 col-md-6 text-center">
<div class="mb-2"> <div class="mb-5 level-line">
<span <span
v-for="userGroupItem in userGroups.filter( v-for="userGroupItem in userGroups.filter(
(userGroup) => userGroup.excludeKey == 'level' (userGroup) => userGroup.excludeKey == 'level'
)" )"
:key="userGroupItem.id" :key="userGroupItem.id"
class="m-1" class="m-2 as-user-group"
> >
<input <input
type="radio" type="radio"
@ -34,13 +34,13 @@
</label> </label>
</span> </span>
</div> </div>
<div class="mb-2"> <div class="mb-2 level-line">
<span <span
v-for="userGroupItem in userGroups.filter( v-for="userGroupItem in userGroups.filter(
(userGroup) => userGroup.excludeKey == '' (userGroup) => userGroup.excludeKey == ''
)" )"
:key="userGroupItem.id" :key="userGroupItem.id"
class="m-1" class="m-2"
> >
<input <input
type="checkbox" type="checkbox"
@ -146,7 +146,8 @@ export default defineComponent({
function getUserGroupBtnColor(userGroup: UserGroup) { function getUserGroupBtnColor(userGroup: UserGroup) {
return [ return [
`.btn-check:checked + .btn-${userGroup.id} { `color: ${userGroup.foregroundColor};
.btn-check:checked + .btn-${userGroup.id} {
color: ${userGroup.foregroundColor}; color: ${userGroup.foregroundColor};
background-color: ${userGroup.backgroundColor}; background-color: ${userGroup.backgroundColor};
}`, }`,
@ -238,4 +239,8 @@ export default defineComponent({
box-shadow: 0 0 0 0.2rem var(--bs-chill-green); box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
outline: 0; outline: 0;
} }
.as-user-group {
display: inline-block;
}
</style> </style>