pleroma-fe

commit: 3d68dda5a2305035adc3bf3285b2014c36873733
parent b0e687692a35be85ce88f231e17a3e756ee7746e
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Thu, 19 Dec 2024 12:14:46 +0000

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

Vertical center the checkboxes

See merge request pleroma/pleroma-fe!1703
Diffstat:
A
changelog.d/checkbox.fix
1
+
M
src/components/announcement_editor/announcement_editor.vue
5
+++--
M
src/components/checkbox/checkbox.vue
13
+++++++++----

3 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/changelog.d/checkbox.fix b/changelog.d/checkbox.fix
@@ -0,0 +1 @@
+checkbox vertical alignment has been fixed
diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
@@ -34,8 +34,9 @@
         id="announcement-all-day"
         v-model="announcement.allDay"
         :disabled="disabled"
-      />
-      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+      >
+        {{ $t('announcements.all_day_prompt') }}
+      </Checkbox>
     </span>
   </div>
 </template>
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
@@ -70,21 +70,26 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
+  &-indicator,
+  & .label {
+    vertical-align: middle;
+  }
+
   & > &-indicator {
     /* Reset .input stuff */
     padding: 0;
     margin: 0;
     position: relative;
     line-height: inherit;
-    display: inline;
-    padding-left: 1.2em;
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
     box-shadow: none;
   }
 
   &-indicator::before {
     position: absolute;
-    right: 0;
-    top: 0;
+    inset: 0;
     display: block;
     content: "✓";
     transition: color 200ms;