fix: better checkbox styling in media library

Author: dulnan

css/partials/MediaLibrary.css

@@ -118,21 +118,6 @@
   .bk-media-library-items-item {
     @apply text-sm cursor-grab select-none relative;
 
-    > label {
-      @apply absolute top-0 right-0 z-50 p-15 cursor-pointer opacity-0;
-
-      &:hover {
-        input {
-          @apply bg-accent-700;
-        }
-      }
-
-      input {
-        @apply cursor-pointer checked:bg-accent-700;
-        @apply bg-white border border-mono-400;
-      }
-    }
-
     &.bk-is-selected {
       .bk-media-library-items-item-image {
         &:before {
@@ -166,6 +151,24 @@
     }
   }
 
+  .bk-media-library-items-item-box {
+    @apply relative;
+    > label {
+      @apply absolute top-0 right-0 z-50 cursor-pointer opacity-0 p-5;
+
+      &:hover {
+        input {
+          @apply bg-accent-700;
+        }
+      }
+
+      input {
+        @apply cursor-pointer checked:bg-accent-700;
+        @apply bg-white border border-mono-400;
+      }
+    }
+  }
+
   .bk-media-library-items-item-image {
     @apply aspect-square w-full overflow-hidden relative border border-mono-300 rounded block;
     img {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",

package.json

@@ -9,10 +9,10 @@
     :data-media-id="mediaId"
     :data-media-bundle="mediaBundle"
   >
-    <label @click.stop>
-      <input v-model="selected" type="checkbox" :value="mediaId" />
-    </label>
-    <div>
+    <div class="bk-media-library-items-item-box">
+      <label @click.stop>
+        <input v-model="selected" type="checkbox" :value="mediaId" />
+      </label>
       <div class="bk-media-library-items-item-image">
         <img :src="thumbnail" />
       </div>