(home) fix borders in the two-column layout for locale selector

This commit is contained in:
Andrea Vos 2024-06-05 19:43:38 +02:00
parent dd942dafc0
commit a3dc1a26f5
2 changed files with 19 additions and 17 deletions

View File

@ -239,8 +239,8 @@ form[disabled] {
.list-group-item-hoverable { .list-group-item-hoverable {
&:hover { &:hover {
color: $primary; color: $primary;
border-inline-start: 3px solid $primary; border-inline-start: 3px solid $primary !important;
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px); padding-inline-start: calc(#{$list-group-item-padding-x} - 2px) !important;
} }
} }
.list-group-item-active { .list-group-item-active {

View File

@ -1,11 +1,12 @@
<template> <template>
<div class="list-group d-flex flex-wrap flex-row"> <div class="border rounded overflow-hidden">
<div class="list-group d-flex flex-wrap flex-row list-group-flush">
<template v-for="(options, locale) in locales"> <template v-for="(options, locale) in locales">
<a <a
v-if="filter === '' || options.matches(filter)" v-if="filter === '' || options.matches(filter)"
:key="locale" :key="locale"
:href="options.url" :href="options.url"
class="list-group-item list-group-item-action list-group-item-hoverable w-md-50" class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
> >
<div class="h3"> <div class="h3">
<LocaleIcon :locale="options" class="mx-2" /> <LocaleIcon :locale="options" class="mx-2" />
@ -15,6 +16,7 @@
</a> </a>
</template> </template>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">