feat: divide most content.scss styles into components

- contentAuth
- contentNoAuth.vue
- Login.vue
- button.vue
- comments.vue

src/components/home/contentAuth.vue

@@ -134,6 +134,43 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-container {
+  min-height: calc(100vh - 65px);
+
+  @media screen and (max-width: $tablet) {
+    padding-top: $navbar-height;
+  }
+
+  .app-content {
+    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+    z-index: 2;
+
+    @media screen and (max-width: $tablet) {
+      margin-left: 0;
+      padding-top: 1.5rem;
+      min-height: calc(100vh - 4rem);
+    }
+
+    &.is-menu-enabled {
+      margin-left: $navbar-width;
+
+      @media screen and (max-width: $tablet) {
+        min-width: 100%;
+        margin-left: 0;
+      }
+    }
+
+	&.task\.detail {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+    .card {
+      background: $white;
+    }
+  }
+}
+
 .keyboard-shortcuts-button {
 	position: fixed;
 	bottom: calc(1rem - 4px);

src/components/home/contentNoAuth.vue

@@ -65,3 +65,17 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.no-auth-wrapper {
+  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
+  min-height: 100vh;
+}
+
+.noauth-container {
+  max-width: 450px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+}
+</style>

src/components/input/button.vue

@@ -72,4 +72,10 @@ export default {
 		},
 	},
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.underline-none {
+  text-decoration: none !important;
+}
+</style>

src/components/tasks/partials/comments.vue

@@ -345,4 +345,8 @@ export default {
   }
 
 }
+
+.media-content {
+  width: calc(100% - 48px - 2rem);
+}
 </style>

src/styles/theme/content.scss

@@ -1,75 +1,9 @@
-.app-container {
-  min-height: calc(100vh - 65px);
-  @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height;
-  }
-
-  .app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
-
-    &.is-menu-enabled {
-      margin-left: $navbar-width;
-    }
-
-    @media screen and (max-width: $tablet) {
-      margin-left: 0;
-      padding-top: 1.5rem;
-      min-height: calc(100vh - 4rem);
-
-      &.is-menu-enabled {
-        min-width: 100%;
-        margin-left: 0;
-      }
-    }
-
-    .card {
-      background: $white;
-    }
-	  
-	&.task\.detail {
-		padding-left: 0;
-		padding-right: 0;
-	}
-  }
-}
-
-.no-auth-wrapper {
-  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
-  min-height: 100vh;
-
-  .noauth-container {
-    max-width: 450px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 1rem;
-
-    @media screen and (max-width: 450px) {
-      .login-buttons {
-        flex-direction: column;
-
-        .control:first-child {
-          margin-bottom: 1rem;
-        }
-      }
-    }
-  }
-}
-
-.media-content {
-  width: calc(100% - 48px - 2rem);
-}
-
 .content h3 {
   .icon, .is-small {
     font-size: 1rem;
   }
 }
 
-.underline-none {
-  text-decoration: none !important;
-}
-
 .table.has-actions {
   border-top: 1px solid $grey-100;
   border-radius: 4px;

src/views/user/Login.vue

@@ -222,7 +222,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.login-buttons {
+	@media screen and (max-width: 450px) {
+		flex-direction: column;
+
+		.control:first-child {
+			margin-bottom: 1rem;
+		}
+	}
+}
+
 .button {
 	margin: 0 0.4rem 0 0;
 }