Cleanup code & make sure it has a common code style

src/styles/components/attachments.scss

@@ -5,7 +5,7 @@
 
   .dropzone {
     position: fixed;
-    background: rgba(250,250,250,0.8);
+    background: rgba(250, 250, 250, 0.8);
     top: 0;
     left: 0;
     bottom: 0;
@@ -14,7 +14,7 @@
     text-align: center;
 
     &.hidden {
-      display:none;
+      display: none;
     }
 
     .drop-hint {

src/styles/components/base/card.scss

@@ -16,7 +16,7 @@
   }
 }
 
-.box,.card{
+.box, .card {
   border: $thickness solid $border;
   box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
 }

src/styles/components/base/multiselect.scss

@@ -25,10 +25,12 @@ fieldset[disabled] .multiselect {
     border-width: 2px;
     box-shadow: 0 0 0 1px transparent;
   }
+
   &:before {
     animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
     animation-iteration-count: infinite;
   }
+
   &:after {
     animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
     animation-iteration-count: infinite;
@@ -58,9 +60,11 @@ fieldset[disabled] .multiselect {
   min-height: 40px;
   text-align: left;
   color: $text;
+
   * {
     box-sizing: border-box;
   }
+
   &:focus {
     outline: none;
   }
@@ -73,12 +77,14 @@ fieldset[disabled] .multiselect {
 
 .multiselect--active {
   z-index: 50;
+
   &:not(.multiselect--above) {
     .multiselect__current, .multiselect__input, .multiselect__tags {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
+
   .multiselect__select {
     transform: rotateZ(180deg);
   }
@@ -131,6 +137,7 @@ fieldset[disabled] .multiselect {
     border-color: $primary;
     outline: none;
   }
+
   padding-left: 5px;
   margin-bottom: 8px;
 }
@@ -184,14 +191,17 @@ fieldset[disabled] .multiselect {
   line-height: 22px;
   transition: all 0.2s ease;
   border-radius: 5px;
+
   &:after {
     content: "×";
     color: darken($multiselect-highlight, 20);
     font-size: 14px;
   }
+
   &:focus, &:hover {
     background: lighten($multiselect-highlight, 10);
   }
+
   &:focus:after, &:hover:after {
     color: $white;
   }
@@ -227,6 +237,7 @@ fieldset[disabled] .multiselect {
   text-align: center;
   cursor: pointer;
   transition: transform 0.2s ease;
+
   &:before {
     position: relative;
     right: 0;
@@ -305,6 +316,7 @@ fieldset[disabled] .multiselect {
   position: relative;
   cursor: pointer;
   white-space: nowrap;
+
   &:after {
     top: 0;
     right: 0;
@@ -320,6 +332,7 @@ fieldset[disabled] .multiselect {
   background: $multiselect-highlight;
   outline: none;
   color: $white;
+
   &:after {
     content: attr(data-select);
     background: $multiselect-highlight;
@@ -331,13 +344,16 @@ fieldset[disabled] .multiselect {
   background: darken($white, 10);
   color: $multiselect-dark;
   font-weight: bold;
+
   &:after {
     content: attr(data-selected);
     color: silver;
   }
+
   &.multiselect__option--highlight {
     background: $multiselect-highlight-negative;
     color: $white;
+
     &:after {
       background: $multiselect-highlight-negative;
       content: attr(data-deselect);
@@ -348,6 +364,7 @@ fieldset[disabled] .multiselect {
 
 .multiselect--disabled {
   pointer-events: none;
+
   .multiselect__current, .multiselect__select {
     background: $multiselect-disabled;
     color: darken($multiselect-disabled, 40);
@@ -364,9 +381,11 @@ fieldset[disabled] .multiselect {
 .multiselect__option--group {
   background: $multiselect-disabled;
   color: $multiselect-dark;
+
   &.multiselect__option--highlight {
     background: $multiselect-dark;
     color: $white;
+
     &:after {
       background: $multiselect-dark;
     }
@@ -380,6 +399,7 @@ fieldset[disabled] .multiselect {
 .multiselect__option--group-selected.multiselect__option--highlight {
   background: $multiselect-highlight-negative;
   color: $white;
+
   &:after {
     background: $multiselect-highlight-negative;
     content: attr(data-deselect);
@@ -406,24 +426,30 @@ fieldset[disabled] .multiselect {
   .multiselect {
     text-align: right;
   }
+
   .multiselect__select {
     right: auto;
     left: 1px;
   }
+
   .multiselect__tags {
     padding: 8px 8px 0px 40px;
   }
+
   .multiselect__content {
     text-align: right;
   }
+
   .multiselect__option:after {
     right: auto;
     left: 0;
   }
+
   .multiselect__clear {
     right: auto;
     left: 12px;
   }
+
   .multiselect__spinner {
     right: auto;
     left: 1px;

src/styles/components/base/scrollbars.scss

@@ -1,4 +1,3 @@
-
 // Chrome
 ::-webkit-scrollbar {
   width: $scrollbar-height;
@@ -25,7 +24,7 @@
 }
 
 // Firefox
-*{
+* {
   scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
   scrollbar-width: thin;
 }

src/styles/components/fullpage.scss

@@ -1,4 +1,4 @@
-.fullpage{
+.fullpage {
   position: fixed;
   text-align: center;
   top: 0;
@@ -16,7 +16,7 @@
     padding: 20vw 10vw;
   }
 
-  input{
+  input {
     background: transparent;
     border: none;
     border-bottom: 3px solid darken($vikunja-blue, 10);
@@ -25,7 +25,7 @@
     font-size: 1.5em;
     border-radius: 0;
 
-    &::placeholder{
+    &::placeholder {
       color: $vikunja-light-text;
     }
   }
@@ -35,7 +35,7 @@
     margin-top: 4px;
   }
 
-  h3{
+  h3 {
     font-size: 1.5em;
   }
 
@@ -46,12 +46,12 @@
     color: $vikunja-light-text;
   }
 
-  .small{
+  .small {
     margin-top: 1em;
     font-size: 0.5em;
   }
 }
 
-.fullpage-overlay{
+.fullpage-overlay {
   z-index: 6 !important;
 }

src/styles/components/gantt.scss

@@ -146,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
           }
         }
 
-        .high-priority{
+        .high-priority {
           margin: 0 0 0 .5em;
           vertical-align: bottom;
         }

src/styles/components/labels.scss

@@ -1,13 +1,13 @@
 .labels-list {
-  a, a:hover{
+  a, a:hover {
     text-decoration: none;
   }
 
-  .tag{
+  .tag {
     margin: 0.5em;
     background: darken($background, 5);
 
-    &.disabled{
+    &.disabled {
       opacity: 0.7;
 
       &, a {

src/styles/components/migrator.scss

@@ -47,18 +47,41 @@
       animation: wave 2s ease infinite;
       margin-right: 5px;
 
-      &:nth-child(1){  animation-delay: 0; }
-      &:nth-child(2){  animation-delay: 100ms; }
-      &:nth-child(3){  animation-delay: 200ms; }
-      &:nth-child(4){  animation-delay: 300ms; }
-      &:nth-child(5){  animation-delay: 400ms; }
-      &:nth-child(6){  animation-delay: 500ms; }
-      &:nth-child(7){  animation-delay: 600ms; }
-      &:nth-child(8){  animation-delay: 700ms; }
+      &:nth-child(1) {
+        animation-delay: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 100ms;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 200ms;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 300ms;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 400ms;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 500ms;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 600ms;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 700ms;
+      }
     }
   }
 
-  @keyframes wave{
+  @keyframes wave {
     0%, 40%, 100% {
       transform: translate(0, 0);
       background-color: $primary;

src/styles/components/teams.scss

@@ -1,25 +1,25 @@
-ul.teams{
+ul.teams {
   padding: 0;
   margin-left: 0;
   overflow: hidden;
 
-  li{
+  li {
     list-style: none;
     margin: 0;
     border-bottom: 1px solid $border;
 
-    a{
+    a {
       color: #363636;
       display: block;
       padding: 0.5rem 1rem;
 
-      &:hover{
+      &:hover {
         background: darken(#fff, 2%);
       }
     }
   }
 
-  li:last-child{
+  li:last-child {
     border-bottom: none;
   }
 }