From 171f6f08943dd1d87120df3e4894ddcfd5e1d246 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sat, 6 Aug 2022 17:26:43 +0300
Subject: Lists implementation

---
 src/components/lists_card/lists_card.vue | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/lists_card/lists_card.vue

(limited to 'src/components/lists_card/lists_card.vue')

diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
new file mode 100644
index 00000000..c0d58f18
--- /dev/null
+++ b/src/components/lists_card/lists_card.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="list-card">
+    <router-link
+      :to="{ name: 'list-timeline', params: { id: list.id } }"
+      class="list-name"
+    >
+      {{ list.title }}
+    </router-link>
+    <router-link
+      :to="{ name: 'list-edit', params: { id: list.id } }"
+      class="button-list-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./lists_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-card {
+  display: flex;
+}
+
+.list-name,
+.button-list-edit {
+  margin: 0;
+  padding: 1em;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+}
+
+.list-name {
+  flex-grow: 1;
+}
+</style>
-- 
cgit v1.2.3-70-g09d2