chore: move frontend files

frontend/src/styles/theme/_index.scss

@@ -0,0 +1,12 @@
+@import "scrollbars";
+
+@import "theme";
+
+@import "background";
+@import "content";
+@import "form";
+@import "link-share";
+@import "loading";
+@import "flatpickr";
+@import 'helpers';
+@import 'navigation';

frontend/src/styles/theme/background.scss

@@ -0,0 +1,59 @@
+.app-container.has-background,
+.link-share-container.has-background {
+  position: relative;
+
+  &, .app-container-background {
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    min-height: 100vh;
+  }
+
+  // FIXME: move to pagination component
+  .pagination-link:not(.is-current) {
+    background: var(--grey-100);
+  }
+
+  .box,
+  .card,
+  .switch-view,
+  .project-table .button,
+  .filter-container .button,
+  .search .button {
+    box-shadow: none;
+  }
+
+  .task-view {
+    border-radius: $radius;
+
+    @media screen and (min-width: $tablet) {
+      margin-inline: 1rem;
+    }
+  }
+
+  .kanban .tasks {
+    background: transparent;
+
+    .task {
+      border-radius: $radius !important;
+    }
+  }
+}
+
+.app-container-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 0;
+}
+
+.background-fade-in {
+  opacity: 0;
+  transition: opacity $transition;
+  transition-delay: $transition-duration * 2; // To fake an appearing background
+
+  &.is-visible {
+    opacity: 1;
+  }
+}

frontend/src/styles/theme/content.scss

@@ -0,0 +1,30 @@
+.content h3 {
+	.icon,
+	.is-small {
+		font-size: 1rem;
+	}
+}
+
+.table.has-actions {
+	border-top: 1px solid var(--grey-100);
+	border-radius: 4px;
+	overflow: hidden;
+
+	td {
+		vertical-align: middle;
+	}
+
+	td.actions {
+		text-align: right;
+	}
+}
+
+.content-widescreen {
+	margin: 0 auto;
+	max-width: $widescreen;
+}
+
+.content blockquote {
+  background-color: var(--grey-200);
+  border-left: .25rem solid var(--grey-300);
+}

frontend/src/styles/theme/flatpickr.scss

@@ -0,0 +1,221 @@
+// Flatpickr overrides to use css custom properties and enable styling it
+
+.flatpickr-calendar {
+  background: var(--white);
+  box-shadow: 1px 0 0 var(--grey-200), -1px 0 0 var(--grey-200), 0 1px 0 var(--grey-200), 0 -1px 0 var(--grey-200), 0 3px 13px rgba(0, 0, 0, 0.08);
+}
+
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  box-shadow: -2px 0 0 var(--grey-200), 5px 0 0 var(--grey-200);
+}
+
+.flatpickr-calendar.hasTime .flatpickr-time {
+  border-top: 1px solid var(--grey-200);
+}
+
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: var(--grey-200);
+}
+
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: var(--white);
+}
+
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: var(--grey-200);
+}
+
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: var(--white);
+}
+
+.flatpickr-months .flatpickr-month,
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  color: var(--text);
+  fill: var(--grey-900);
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: var(--grey-400);
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: var(--primary);
+}
+
+.numInputWrapper span {
+  border: 1px solid var(--grey-200);
+}
+
+.numInputWrapper span:hover {
+  background: var(--grey-800);
+}
+
+.numInputWrapper span:active {
+  background: var(--grey-800);
+}
+
+.numInputWrapper span.arrowUp:after {
+  border-bottom: 4px solid var(--grey-200);
+}
+
+.numInputWrapper span.arrowDown:after {
+  border-top: 4px solid var(--grey-200);
+  top: 40%;
+}
+
+.numInputWrapper span svg path {
+  fill: var(--grey-800);
+}
+
+.numInputWrapper:hover {
+  background: var(--grey-100);
+}
+
+.flatpickr-current-month span.cur-month:hover {
+  background: var(--grey-100);
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--grey-900);
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--grey-900);
+}
+
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  color: var(--grey-800);
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: var(--grey-100);
+}
+
+span.flatpickr-weekday {
+  color: var(--grey-600);
+}
+
+.dayContainer + .dayContainer {
+  box-shadow: -1px 0 0 var(--grey-200);
+}
+
+.flatpickr-day {
+  color: var(--grey-500);
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background: var(--grey-200);
+  border-color: var(--grey-200);
+}
+
+.flatpickr-day.today {
+  border-color: var(--grey-400);
+}
+
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: var(--grey-400);
+  background: var(--grey-400);
+  color: var(--white);
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: var(--primary);
+  color: var(--white);
+  border-color: var(--primary);
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 var(--primary);
+}
+
+.flatpickr-day.inRange {
+  box-shadow: -5px 0 0 var(--grey-200), 5px 0 0 var(--grey-200);
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: var(--grey-300);
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  color: var(--grey-800);
+}
+
+.flatpickr-day.week.selected {
+  box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary);
+}
+
+.flatpickr-weekwrapper .flatpickr-weeks {
+  box-shadow: 1px 0 0 var(--grey-200);
+}
+
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  color: var(--grey-300);
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--grey-500);
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--grey-500);
+}
+
+.flatpickr-time input {
+  color: var(--grey-500);
+}
+
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  color: var(--grey-500);
+}
+
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: var(--grey-100);
+}

frontend/src/styles/theme/form.scss

@@ -0,0 +1,105 @@
+.field.has-addons .button {
+  height: 2.5rem;
+  margin-left: 0 !important;
+}
+
+.field.has-addons .select select {
+  margin-right: 0;
+}
+
+.input,
+.textarea {
+  transition: all $transition;
+  box-shadow: none;
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus,
+      &:focus:not(:active) {
+        border-color: $color;
+      }
+    }
+  }
+}
+
+.select:after {
+  margin-top: -0.575rem;
+}
+
+.select select {
+  $thickness: 1px;
+  border-width: $thickness;
+
+  &:not([multiple]) {
+    height: calc(2.25rem + #{$thickness});
+  }
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: none;
+  }
+}
+
+.field.has-addons .control .select select {
+  height: 100%;
+}
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  z-index: 4;
+}
+
+// Buttons icons
+.button .icon.is-small {
+  margin-right: 0.05rem !important;
+}
+
+// FIXME: used for
+// - the <h1> in heading.vue
+// - the <h2> in Kanban.vue
+// Contenteditable form
+.input.title {
+  font-size: 1.8rem;
+  font-family: $vikunja-font;
+  font-weight: 400 !important;
+  background: transparent;
+  border-color: transparent;
+  margin: 0 .3rem;
+  height: auto;
+  padding: .3rem;
+
+  &:focus {
+    background: $input-background-color;
+    border-color: $input-focus-border-color;
+  }
+
+  &.disabled {
+    &:focus, &:hover {
+      background: transparent !important;
+      border-color: transparent !important;
+      cursor: default !important;
+    }
+  }
+}
+
+h1, h2, h3 {
+  .input.title {
+    height: auto;
+  }
+}

frontend/src/styles/theme/helpers.scss

@@ -0,0 +1,5 @@
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}

frontend/src/styles/theme/link-share.scss

@@ -0,0 +1,46 @@
+.field.has-addons.no-input-mobile {
+  .control:first-child {
+    width: 100%;
+
+		@media screen and (max-width: $tablet) {
+				display: none;
+		}
+  }
+
+  .button {
+    height: 40px;
+
+		@media screen and (max-width: $tablet) {
+			border-radius: $radius !important;
+		}
+  }
+}
+
+.link-share-container {
+	&.project\.gantt-view,
+  &.project\.kanban-view {
+    .container {
+      max-width: 100vw;
+
+      .column {
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.link-share-container:not(.has-background) {
+  .list-view {
+    max-width: 100%;
+  }
+
+  .loader-container, .gantt-chart-container > .card {
+		box-shadow: none !important;
+		border: none;
+
+		.task-add {
+			padding: 1rem 0 0;
+		}
+  }
+}

frontend/src/styles/theme/loading.scss

@@ -0,0 +1,40 @@
+// FIXME: move to loading.vue 
+.loader-container.is-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.5;
+
+  &::after {
+    @include loader;
+    position: absolute;
+    top: calc(50% - 2.5rem);
+    left: calc(50% - 2.5rem);
+    width: 5rem;
+    height: 5rem;
+    border-width: 0.25rem;
+  }
+
+  &.is-loading-small {
+    &::after {
+      width: 1.5rem;
+      height: 1.5rem;
+      top: calc(50% - .75rem);
+      left: calc(50% - .75rem);
+      border-width: 2px;
+    }
+  }
+}
+
+// FIXME: move to ShowTasks.vue 
+.spinner.is-loading {
+  pointer-events: none;
+
+  &::after {
+    @include loader;
+    width: 2rem;
+    height: 2rem;
+    margin-left: calc(50% - 1rem);
+    margin-top: 1rem;
+    border-width: 0.25rem;
+  }
+}

frontend/src/styles/theme/navigation.scss

@@ -0,0 +1,140 @@
+// these are general menu styles
+// should be in own components
+.menu {
+  .menu-list .list-menu-link,
+  .menu-list a {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .color-bubble {
+      height: 12px;
+      flex: 0 0 12px;
+      opacity: 1;
+      margin: 0 .5rem 0 .25rem;
+    }
+  }
+
+  .menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    
+    &.other-menu-items li,
+    li > div {
+      height: 44px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background: var(--white);
+      }
+    }
+
+    li > div {
+      .menu-list-dropdown {
+        opacity: 1;
+        transition: $transition;
+      }
+
+      @media(hover: hover) and (pointer: fine) {
+        .menu-list-dropdown {
+          opacity: 0;
+        }
+
+        &:hover .menu-list-dropdown {
+          opacity: 1;
+        }
+      }
+    }
+
+    li > menu {
+      margin: 0 0 0 var(--menu-nested-list-margin);
+    }
+
+    .menu-item-icon {
+      color: var(--grey-400);
+    }
+
+    .menu-list-dropdown-trigger {
+      display: flex;
+      padding: 0.5rem;
+    }
+
+    .flip-list-move {
+      transition: transform $transition-duration;
+    }
+
+    .ghost {
+      background: var(--grey-200);
+
+      * {
+        opacity: 0;
+      }
+    }
+
+    a:hover {
+      background: transparent;
+    }
+
+    .list-menu-link,
+    li, li > div {
+      .collapse-project-button {
+        padding: .5rem .25rem .5rem .5rem;
+
+        svg {
+          transition: all $transition;
+          color: var(--grey-400);
+        }
+      }
+
+      .collapse-project-button-placeholder {
+        width: 1.625rem;
+        flex-shrink: 0;
+      }
+
+      > a {
+        color: $vikunja-nav-color;
+        padding: .75rem .5rem .75rem .25rem;
+        transition: all 0.2s ease;
+
+        border-radius: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+
+        &.router-link-exact-active {
+          color: var(--primary);
+        }
+
+        .icon {
+          height: 1rem;
+          vertical-align: middle;
+          padding-right: 0.5rem;
+        }
+
+        &.router-link-exact-active .icon:not(.handle) {
+          color: var(--primary);
+        }
+
+        .handle {
+          opacity: 0;
+          transition: opacity $transition;
+        }
+
+        &:hover .handle {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:not(.dragging-disabled) .handle {
+      cursor: grab;
+    }
+    
+    menu {
+      border-left: 0;
+    }
+  }
+}

frontend/src/styles/theme/scrollbars.scss

@@ -0,0 +1,31 @@
+$scrollbar-height: 8px;
+$scrollbar-track-color: var(--grey-200);
+$scrollbar-thumb-color: var(--grey-300);
+$scrollbar-hover-color: var(--grey-500);
+
+// Chrome
+::-webkit-scrollbar {
+  width: $scrollbar-height;
+  height: $scrollbar-height;
+}
+
+::-webkit-scrollbar-track {
+  background: $scrollbar-track-color;
+  border-radius: .5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: .5rem;
+  background: $scrollbar-thumb-color;
+  transition: all $transition;
+
+  &:hover {
+    background: $scrollbar-hover-color;
+  }
+}
+
+// Firefox
+* {
+  scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+  scrollbar-width: thin;
+}

frontend/src/styles/theme/theme.scss

@@ -0,0 +1,110 @@
+*,
+*:hover,
+*:active,
+*:focus {
+  outline: none;
+}
+
+:focus {
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+}
+
+:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+:focus-visible,
+:-moz-focusring {
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+}
+
+:root {
+  // Bulma sets this to "scroll" which gives us a scrollbar even if there's no content to scroll
+  --body-overflow-y: auto;
+}
+
+body {
+  background: var(--site-background);
+  min-height: 100vh;
+ 
+  @media print {
+    background: #fff;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $vikunja-font;
+  font-weight: 400 !important;
+}
+
+// FIXME: these helpers should be mixins
+.has-no-border {
+  border: none !important;
+}
+
+.has-rounded-corners {
+  border-radius: $radius;
+}
+
+.has-overflow {
+  overflow: visible !important;
+}
+
+.has-horizontal-overflow {
+	overflow-y: hidden;
+	overflow-x: auto;
+}
+
+button.table {
+  margin-bottom: 0 !important;
+}
+
+.is-max-width-desktop {
+  width: 100%;
+  max-width: $desktop;
+  margin: 0 auto;
+}
+
+.has-no-shadow {
+  &,
+  &.is-hovered,
+  &:hover,
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: none !important;
+  }
+}
+
+.is-fullwidth {
+  width: 100%;
+}
+
+.color-bubble {
+  display: inline-block;
+  border-radius: 100%;
+}
+
+.is-strikethrough {
+  text-decoration: line-through;
+}
+
+.is-touch .handle {
+	opacity: 1 !important;
+}
+
+.dragging-disabled .handle {
+	opacity: 0 !important;
+}
+
+.box {
+  border: 1px solid var(--grey-200);
+  box-shadow: var(--shadow-sm);
+}