chore: move frontend files

frontend/src/styles/components/_index.scss

@@ -0,0 +1,5 @@
+@import "tooltip";
+@import "labels";
+@import "project";
+@import "task";
+@import "tasks";

frontend/src/styles/components/labels.scss

@@ -0,0 +1,29 @@
+// FIXME: adapt lables.vue so that it can be used for this aswell 
+.labels-list {
+  a, a:hover {
+    text-decoration: none;
+  }
+
+  .tag {
+    margin: .5rem 0 .5rem .5rem;
+    background: var(--grey-200);
+
+    // FIXME: only used in ListLabels.vue
+    &.disabled {
+      opacity: 0.7;
+
+      &, a {
+        cursor: default;
+      }
+    }
+  }
+
+  .multiselect .tag {
+    margin: 0 0 0 .5rem;
+  }
+}
+
+.tasks .task span.tag span {
+  width: auto;
+}
+

frontend/src/styles/components/project.scss

@@ -0,0 +1,110 @@
+// FIXME: should be a component <FilterContainer>
+// used in
+// - Kanban.vue
+// - Project.vue
+// - Table.vue
+
+$filter-container-top-default: -59px;
+$filter-container-top-link-share-gantt: -133px;
+$filter-container-top-link-share-list: -47px;
+
+.filter-container {
+  text-align: right;
+  width: 100%;
+  min-width: 400px;
+  max-width: 180px;
+  position: absolute;
+  right: 1.5rem;
+  margin-top: $filter-container-top-default;
+  z-index: 4;
+
+  .items {
+    display: flex;
+    justify-content: flex-end;
+
+    .button:not(:last-of-type) {
+      margin-right: .5rem;
+    }
+  }
+
+  .button {
+    height: $switch-view-height;
+  }
+
+  .card {
+    text-align: left;
+  }
+
+  .fancycheckbox {
+    display: block;
+  }
+
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: .5rem;
+
+    .field {
+      transition: width $transition;
+      width: 100%;
+
+      &.hidden {
+        width: 0;
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      .button {
+        height: 100%;
+      }
+    }
+  }
+
+  .filters input {
+    font-size: .9rem;
+  }
+
+  @media screen and (max-width: $tablet) {
+    position: static;
+    margin: 0 0 1rem 0 !important;
+    max-width: 100%;
+    min-width: auto;
+
+    .items {
+      justify-content: center;
+    }
+
+    .search {
+      width: 100%;
+
+      .control:first-child {
+        width: 100%;
+      }
+    }
+  }
+}
+
+
+.link-share-container .gantt-chart-container .filter-container,
+.gantt-chart-container .filter-container {
+  right: 0;
+  margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
+}
+
+.link-share-container .gantt-chart-container .filter-container {
+  margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
+}
+
+.link-share-container .list-view .filter-container {
+  margin-top: $filter-container-top-link-share-list - 10px;
+}
+
+.link-share-container.project\.table-view,
+.link-share-container.project\.list-view {
+  .filter-container {
+    right: 9rem;
+    margin-top: $filter-container-top-default;
+  }
+}

frontend/src/styles/components/task.scss

@@ -0,0 +1,4 @@
+// FIXME: should be in TaskDetailView.vue
+.link-share-container:not(.has-background) .task-view {
+  background: transparent;
+}

frontend/src/styles/components/tasks.scss

@@ -0,0 +1,48 @@
+// FIXME: These classes are used all over.
+// very hard to untangle
+// they have many overwrites at different positions
+.tasks {
+	text-align: left;
+
+	
+	@media screen and (max-width: $tablet) {
+		max-width: 100%;
+	}
+
+	&.short {
+		@media screen and (min-width: $tablet) {
+			max-width: 53vw;
+		}
+	}
+
+	&.noborder {
+		margin: 1rem -0.5rem;
+	}
+}
+
+// FIXME: seems only necessary for
+// - relatedTasks.vue
+// - singleTaskInProject.vue
+.is-menu-enabled .tasks .task {
+	span:not(.tag), a {
+		.tasktext,
+		&.tasktext {
+			@media screen and (max-width: $desktop) {
+				max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+			}
+
+			// Duplicated rule to have it work properly in at least some browsers
+			// This should be fine as the ui doesn't work in rare edge cases to begin with
+			@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
+				max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+			}
+		}
+	}
+}
+
+// FIXME: is only used where <edit-task> is used aswell:
+// - Project.vue
+// -> Move the <card> wrapper including this class definition inside <edit-task>
+.is-max-width-desktop .tasks .task {
+	max-width: $desktop;
+}

frontend/src/styles/components/tooltip.scss

@@ -0,0 +1,12 @@
+.v-popper--theme-tooltip .v-popper__inner {
+  padding: 5px 10px;
+  font-size: 0.8rem;	
+  background: var(--grey-900);
+  color: var(--white);
+  border-radius: 5px;
+}
+
+.dark .v-popper--theme-tooltip .v-popper__inner {
+  background: var(--white);
+  color: var(--grey-900);
+}