krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 06:37:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): flex gap is a thing

Browse Source
This commit is contained in:
Sabe Jones
2024-05-22 15:53:24 -05:00
parent 66c56225a4
commit a53a9be4b7
1 changed files with 5 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
website/client/src/components/creatorIntro.vue
View File

@@ -170,7 +170,7 @@
{{ $t('incentiveBackgroundsUnlockedWithCheckins') }} {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
</div> </div>
</div> </div>
<div class="row justify-content-center mb-4"> <div class="background-row d-flex justify-content-center mb-4">
<div <div
v-for="bg in standardBackgrounds" v-for="bg in standardBackgrounds"
:id="bg.key" :id="bg.key"
@@ -209,7 +209,7 @@
<strong>{{ allBackgrounds.eventBackgrounds.text }}</strong> <strong>{{ allBackgrounds.eventBackgrounds.text }}</strong>
</div> </div>
<div <div
class="row justify-content-center mb-4" class="background-row d-flex justify-content-center mb-4"
> >
<div <div
v-for="bg in allBackgrounds.eventBackgrounds.items" v-for="bg in allBackgrounds.eventBackgrounds.items"
@@ -240,7 +240,7 @@
<strong>{{ $t('timeTravelBackgrounds') }}</strong> <strong>{{ $t('timeTravelBackgrounds') }}</strong>
</div> </div>
<div <div
class="row justify-content-center mb-4" class="background-row d-flex justify-content-center mb-4"
> >
<div <div
v-for="bg in timeTravelBackgrounds" v-for="bg in timeTravelBackgrounds"
@@ -270,7 +270,7 @@
> >
<strong>{{ $t('monthlyBackgrounds') }}</strong> <strong>{{ $t('monthlyBackgrounds') }}</strong>
</div> </div>
<div class="d-flex background-row justify-content-left mx-auto mb-4"> <div class="background-row d-flex justify-content-center mx-auto mb-4 px-5">
<div <div
v-for="(bg) in monthlyBackgrounds" v-for="(bg) in monthlyBackgrounds"
:id="bg.key" :id="bg.key"
@@ -795,8 +795,8 @@
#backgrounds { #backgrounds {
.background-row { .background-row {
width: 82%;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1.5rem;
} }
.background-item { .background-item {
@@ -821,14 +821,6 @@
border-radius: 0; border-radius: 0;
} }
&:not(:nth-of-type(8n)) {
margin-right: 24px;
}
&:nth-of-type(n+9) {
margin-top: 24px;
}
&:hover { &:hover {
outline: 4px solid rgba($purple-300, .25); outline: 4px solid rgba($purple-300, .25);
border-radius: 4px; border-radius: 4px;