add some styling to the selectable-list component

1 files changed, 20 insertions, 2 deletions

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f0ab33dd..7a7a7644 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)">
-      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
+    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+      </div>
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
@@ -13,7 +15,23 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .selectable-list {
+  &-item {
+    display: flex;
+
+    &-selected {
+      background-color: $fallback--lightBg;
+      background-color: var(--lightBg, $fallback--lightBg);
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 10px;
+    flex: none;
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;