From 2596fd98b4e8b5c40eee932e2879c00dd32dbfff Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:32:59 +0200
Subject: [PATCH] feat: divide most content.scss styles into components

- contentAuth
- contentNoAuth.vue
- Login.vue
- button.vue
- comments.vue
---
 src/components/home/contentAuth.vue        | 37 ++++++++++++
 src/components/home/contentNoAuth.vue      | 14 +++++
 src/components/input/button.vue            |  8 ++-
 src/components/tasks/partials/comments.vue |  4 ++
 src/styles/theme/content.scss              | 66 ----------------------
 src/views/user/Login.vue                   | 12 +++-
 6 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index e7b7cf455..e600bc170 100644
--- a/src/components/home/contentAuth.vue
+++ b/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);
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index c60a070bf..b95739067 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index aadfcc9db..7a9eb096f 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -72,4 +72,10 @@ export default {
 		},
 	},
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.underline-none {
+  text-decoration: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 0e1cfa455..f7b068a4b 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -345,4 +345,8 @@ export default {
   }
 
 }
+
+.media-content {
+  width: calc(100% - 48px - 2rem);
+}
 </style>
\ No newline at end of file
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index de219f839..6ca7b0da5 100644
--- a/src/styles/theme/content.scss
+++ b/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;
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 0ad4dac0a..9267d4243 100644
--- a/src/views/user/Login.vue
+++ b/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;
 }