Merge branch 'checkbox-goes-brrr' into 'develop'

Vertical center the checkboxes

See merge request pleroma/pleroma-fe!1703
This commit is contained in:
HJ 2024-12-19 12:14:46 +00:00
commit 3d68dda5a2
3 changed files with 13 additions and 6 deletions

1
changelog.d/checkbox.fix Normal file
View file

@ -0,0 +1 @@
checkbox vertical alignment has been fixed

View file

@ -34,8 +34,9 @@
id="announcement-all-day" id="announcement-all-day"
v-model="announcement.allDay" v-model="announcement.allDay"
:disabled="disabled" :disabled="disabled"
/> >
<label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label> {{ $t('announcements.all_day_prompt') }}
</Checkbox>
</span> </span>
</div> </div>
</template> </template>

View file

@ -70,21 +70,26 @@ export default {
display: inline-block; display: inline-block;
min-height: 1.2em; min-height: 1.2em;
&-indicator,
& .label {
vertical-align: middle;
}
& > &-indicator { & > &-indicator {
/* Reset .input stuff */ /* Reset .input stuff */
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
line-height: inherit; line-height: inherit;
display: inline; display: inline-block;
padding-left: 1.2em; width: 1.2em;
height: 1.2em;
box-shadow: none; box-shadow: none;
} }
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
right: 0; inset: 0;
top: 0;
display: block; display: block;
content: "✓"; content: "✓";
transition: color 200ms; transition: color 200ms;