diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index a2042db0f..3704a3bc5 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -312,6 +312,8 @@ export default {
 @import './vue-easymde/vue-easymde.css';
 @import 'highlight.js/scss/base16/equilibrium-gray-light';
 
+$editor-border-color: #ddd;
+
 .editor {
 	.clear {
 		clear: both;
@@ -371,7 +373,7 @@ export default {
 			}
 		}
 
-		&:after {
+		&::after {
 			position: absolute;
 			top: 24px;
 			margin-left: -3px;
@@ -396,7 +398,7 @@ ul.actions {
 	li {
 		display: inline-block;
 
-		&:after {
+		&::after {
 			content: '·';
 			padding: 0 .25rem;
 		}
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 7346ad006..049587661 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -3,16 +3,17 @@
 	padding: 0;
 	text-align: left;
 
-	@media screen and (min-width: $tablet) {
-		&.short {
+	
+	@media screen and (max-width: $tablet) {
+		max-width: 100%;
+	}
+
+	&.short {
+		@media screen and (min-width: $tablet) {
 			max-width: 53vw;
 		}
 	}
 
-	@media screen and (max-width: $tablet) {
-		max-width: 100%;
-	}
-	
 	.progress {
 		// overwrite bulma
 		margin-bottom: 0;
@@ -44,7 +45,8 @@
 
 .is-menu-enabled .tasks .task {
 	span:not(.tag), a {
-		.tasktext, &.tasktext {
+		.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
 			}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 661b9bd8b..1aa66c090 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -14,4 +14,4 @@
 @import "bulma/sass/layout/_all";
 
 @import "theme";
-@import "components";
+@import "components";
\ No newline at end of file
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index ceb59c674..f56ea1d08 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -2,10 +2,10 @@
 
 @import "theme";
 
+@import "background";
 @import "content";
 @import "form";
 @import "link-share";
 @import "loading";
 @import "navigation";
-@import "notification";
-@import "background";
\ No newline at end of file
+@import "notification";
\ No newline at end of file
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 77cbce4fa..e57ef22ca 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -1,4 +1,5 @@
-.app-container.has-background, .link-share-container.has-background {
+.app-container.has-background,
+.link-share-container.has-background {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 6ca7b0da5..2edbdbfd4 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -1,5 +1,6 @@
 .content h3 {
-  .icon, .is-small {
+  .icon,
+  .is-small {
     font-size: 1rem;
   }
 }
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index e33835a0f..b1be6fa9b 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -95,8 +95,9 @@
     height: 100%;
 }
 
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  z-index: 0;
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  z-index: 4;
 }
 
 // Buttons icons
@@ -104,19 +105,6 @@
   margin-right: 0.05rem !important;
 }
 
-// menu buttons
-.button-bottom {
-  margin-bottom: 1rem;
-}
-
-.button-right {
-  float: right;
-}
-
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  z-index: 4;
-}
-
 // Contenteditable form
 .input.title {
   font-size: 1.8rem;
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index 821f3f81b..cafb41c90 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -1,25 +1,24 @@
 .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) {
-    .control:first-child {
-      display: none;
-    }
-
-    .button {
-      border-radius: $radius !important;
-    }
+		@media screen and (max-width: $tablet) {
+			border-radius: $radius !important;
+		}
   }
 }
 
 .link-share-container {
-  &.has-background,&.list\.kanban-view {
+  &.has-background,
+	&.list\.kanban-view {
     .container {
       max-width: 100vw;
 
@@ -36,14 +35,12 @@
     max-width: 100%;
   }
 
-  .loader-container, .gantt-chart-container {
-    > .card {
-      box-shadow: none !important;
-      border: none;
+  .loader-container, .gantt-chart-container > .card {
+		box-shadow: none !important;
+		border: none;
 
-      .task-add {
-        padding: 1rem 0 0;
-      }
-    }
+		.task-add {
+			padding: 1rem 0 0;
+		}
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
index 49c7310d2..8bb0fb52e 100644
--- a/src/styles/theme/loading.scss
+++ b/src/styles/theme/loading.scss
@@ -1,32 +1,28 @@
-.loader-container {
-  &.is-loading {
-    position: relative;
-    pointer-events: none;
-    opacity: 0.5;
+.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;
-    }
-  }
+	&::after {
+		@include loader;
+		position: absolute;
+		top: calc(50% - 2.5rem);
+		left: calc(50% - 2.5rem);
+		width: 5rem;
+		height: 5rem;
+		border-width: 0.25rem;
+	}
 }
 
-.spinner {
-  &.is-loading {
-    pointer-events: none;
+.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;
-    }
-  }
-}
+	&::after {
+		@include loader;
+		width: 2rem;
+		height: 2rem;
+		margin-left: calc(50% - 1rem);
+		margin-top: 1rem;
+		border-width: 0.25rem;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 531a2b9e6..455eb2261 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,4 +1,5 @@
-.menu-hide-button, .menu-show-button {
+.menu-hide-button,
+.menu-show-button {
 	display: none;
 	z-index: 31;
 	font-weight: bold;
@@ -7,7 +8,8 @@
 	line-height: 1;
 	transition: all $transition;
 
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		height: 1rem;
 		color: $grey-600;
 	}
@@ -17,7 +19,14 @@
 	height: .75rem;
 	width: 2rem;
 
-	&:before, &:after {
+	@media screen and (max-width: $tablet) {
+		display: block;
+		margin-left: $hamburger-menu-icon-spacing;
+	}
+
+	// menu line icon and animationanimation // START
+	&::before,
+	&::after {
 		display: block;
 		content: '';
 		border-top: 3px solid $grey-400;
@@ -25,31 +34,38 @@
 		transition: all $transition;
 	}
 
-	&:before {
+	&::before {
 		margin-bottom: .5rem;
 	}
 
-	&:after {
+	&::after {
 		margin-top: .5rem;
 	}
 
-	&:hover, &:focus {
-		color: $grey-600;
-
-		&:before {
+	&:hover,
+	&:focus {
+		&::before {
 			margin-bottom: .75rem;
 		}
 
-		&:after {
+		&::after {
 			margin-top: .75rem;
 		}
 	}
+	// menu line animation // END
 }
 
 .menu-hide-button {
 	position: fixed;
 
-	&:hover, &:focus {
+	@media screen and (max-width: $tablet) {
+		display: block;
+		top: $hamburger-menu-icon-spacing;
+		right: $hamburger-menu-icon-spacing;
+	}
+
+	&:hover,
+	&:focus {
 		color: $text;
 	}
 }
@@ -59,17 +75,6 @@
 }
 
 @media screen and (max-width: $tablet) {
-	.menu-hide-button {
-		display: block;
-		top: $hamburger-menu-icon-spacing;
-		right: $hamburger-menu-icon-spacing;
-	}
-
-	.menu-show-button {
-		display: block;
-		margin-left: $hamburger-menu-icon-spacing;
-	}
-
 	.navbar.is-dark .navbar-brand > .navbar-item {
 		margin: 0 auto;
 	}
diff --git a/src/styles/theme/notification.scss b/src/styles/theme/notification.scss
index f90a08992..aaf83968c 100644
--- a/src/styles/theme/notification.scss
+++ b/src/styles/theme/notification.scss
@@ -15,8 +15,6 @@
   }
 }
 
-.message {
-  .message-body {
-    border: $thickness solid;
-  }
+.message .message-body {
+	border: $thickness solid;
 }
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 6f2deea4b..3369146bd 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -144,10 +144,8 @@ button.table {
   margin-right: 4px;
 }
 
-.dropdown-menu {
-  .dropdown-content {
-    box-shadow: $shadow-md;
-  }
+.dropdown-menu  .dropdown-content {
+	box-shadow: $shadow-md;
 }
 
 .is-strikethrough {
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 6b9f39c22..6317d87a4 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -6,18 +6,20 @@ $red: #ff4136;
 $blue: #1973ff;
 $primary: $blue;
 
-$info-invert: #fff;
+$info-invert: $white;
+
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
+$vikunja-font: 'Quicksand', sans-serif;
+
 $thickness: 1px;
 $pagination-current-border: $primary;
 $navbar-item-active-color: $primary;
+
 $dropdown-content-shadow: none;
+$dropdown-item-hover-background-color: $grey-100;
+
 $bulmaswatch-import-font: false !default;
 $light-background: $grey-100;
-$transition-duration: 100ms;
-
-$vikunja-font: 'Quicksand', sans-serif;
-
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;
@@ -33,9 +35,7 @@ $navbar-height: 4rem;
 $navbar-width: 300px;
 $navbar-icon-width: 40px;
 
-$editor-border-color: #ddd;
 
-$dropdown-item-hover-background-color: $grey-100;
 $lists-per-row: 5;
 $list-height: 150px;
 $list-spacing: 1rem;