chore: small CSS format changes

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;
 		}

src/styles/components/tasks.scss

@@ -3,16 +3,17 @@
 	padding: 0;
 	text-align: left;
 
-	@media screen and (min-width: $tablet) {
-		&.short {
-			max-width: 53vw;
-		}
-	}
 	
 	@media screen and (max-width: $tablet) {
 		max-width: 100%;
 	}
 
+	&.short {
+		@media screen and (min-width: $tablet) {
+			max-width: 53vw;
+		}
+	}
+
 	.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
 			}

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";

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;

src/styles/theme/content.scss

@@ -1,5 +1,6 @@
 .content h3 {
-  .icon, .is-small {
+  .icon,
+  .is-small {
     font-size: 1rem;
   }
 }

src/styles/theme/form.scss

@@ -95,8 +95,9 @@
     height: 100%;
 }
 
-.control.has-icons-left .icon, .control.has-icons-right .icon {
+.control.has-icons-left .icon,
-  z-index: 0;
+.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;

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;
 		}
   }
 }
 
 .link-share-container {
-  &.has-background,&.list\.kanban-view {
+  &.has-background,
+	&.list\.kanban-view {
     .container {
       max-width: 100vw;
 
@@ -36,8 +35,7 @@
     max-width: 100%;
   }
 
-  .loader-container, .gantt-chart-container {
+  .loader-container, .gantt-chart-container > .card {
-    > .card {
 		box-shadow: none !important;
 		border: none;
 
@@ -45,5 +43,4 @@
 			padding: 1rem 0 0;
 		}
   }
-  }
 }

src/styles/theme/loading.scss

@@ -1,10 +1,9 @@
-.loader-container {
+.loader-container.is-loading {
-  &.is-loading {
 	position: relative;
 	pointer-events: none;
 	opacity: 0.5;
 
-    &:after {
+	&::after {
 		@include loader;
 		position: absolute;
 		top: calc(50% - 2.5rem);
@@ -13,14 +12,12 @@
 		height: 5rem;
 		border-width: 0.25rem;
 	}
-  }
 }
 
-.spinner {
+.spinner.is-loading {
-  &.is-loading {
 	pointer-events: none;
 
-    &:after {
+	&::after {
 		@include loader;
 		width: 2rem;
 		height: 2rem;
@@ -28,5 +25,4 @@
 		margin-top: 1rem;
 		border-width: 0.25rem;
 	}
-  }
 }

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 {
+	&:hover,
-		color: $grey-600;
+	&:focus {
-
+		&::before {
-		&: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;
 	}

src/styles/theme/notification.scss

@@ -15,8 +15,6 @@
   }
 }
 
-.message {
+.message .message-body {
-  .message-body {
 	border: $thickness solid;
-  }
 }

src/styles/theme/theme.scss

@@ -144,10 +144,8 @@ button.table {
   margin-right: 4px;
 }
 
-.dropdown-menu {
+.dropdown-menu  .dropdown-content {
-  .dropdown-content {
 	box-shadow: $shadow-md;
-  }
 }
 
 .is-strikethrough {

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;