From 4d15f7ae987defed343efd13fe411a4870a317e1 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:20:54 +0200
Subject: [PATCH] feat: merge list-backgrounds.scss with component

---
 src/styles/components/_index.scss           |  1 -
 src/styles/components/list-backgrounds.scss | 84 ---------------------
 src/views/list/settings/background.vue      | 83 ++++++++++++++++++++
 3 files changed, 83 insertions(+), 85 deletions(-)
 delete mode 100644 src/styles/components/list-backgrounds.scss

diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index d04f8508..725d27f6 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -9,7 +9,6 @@
 @import "teams";
 @import "migrator";
 @import "table-view";
-@import "list-backgrounds";
 @import "namespaces";
 @import "notifications";
 @import "quick-actions";
\ No newline at end of file
diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
deleted file mode 100644
index 1bbe04b7..00000000
--- a/src/styles/components/list-backgrounds.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.list-background-setting {
-
-  .unsplash-link {
-    text-align: right;
-    font-size: .8rem;
-
-    a {
-      color: $grey-800;
-    }
-  }
-
-  .image-search-result {
-    margin-top: 1rem;
-    display: flex;
-    flex-flow: row wrap;
-
-    .image {
-      width: calc(100% / 5 - 1rem);
-      height: 120px;
-      margin: .5rem;
-      background-size: cover;
-      background-position: center;
-      display: flex;
-
-      @media screen and (min-width: $desktop) {
-        &:nth-child(5n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: $desktop) {
-        width: calc(100% / 4 - 1rem);
-
-        &:nth-child(4n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: $tablet) {
-        width: calc(100% / 2 - 1rem);
-
-        &:nth-child(2n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: ($mobile)) {
-        width: calc(100% - 1rem);
-
-        &:nth-child(1n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      .info {
-        align-self: flex-end;
-        display: block;
-        opacity: 0;
-        width: 100%;
-        padding: .25rem 0;
-        text-align: center;
-        background: rgba(0, 0, 0, 0.5);
-        font-size: .75rem;
-        font-weight: bold;
-        color: $white;
-        transition: opacity $transition;
-      }
-
-      &:hover .info {
-        opacity: 1;
-      }
-    }
-  }
-
-  .is-load-more-button {
-    margin: 1rem auto 0 !important;
-    display: block;
-    width: 200px;
-  }
-}
\ No newline at end of file
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index fc78156f..bb3ead15 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -158,3 +158,86 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-background-setting {
+
+  .unsplash-link {
+    text-align: right;
+    font-size: .8rem;
+
+    a {
+      color: $grey-800;
+    }
+  }
+
+  .image-search-result {
+    margin-top: 1rem;
+    display: flex;
+    flex-flow: row wrap;
+
+    .image {
+      width: calc(100% / 5 - 1rem);
+      height: 120px;
+      margin: .5rem;
+      background-size: cover;
+      background-position: center;
+      display: flex;
+
+      @media screen and (min-width: $desktop) {
+        &:nth-child(5n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: $desktop) {
+        width: calc(100% / 4 - 1rem);
+
+        &:nth-child(4n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: $tablet) {
+        width: calc(100% / 2 - 1rem);
+
+        &:nth-child(2n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: ($mobile)) {
+        width: calc(100% - 1rem);
+
+        &:nth-child(1n) {
+          break-after: always;
+        }
+      }
+
+      .info {
+        align-self: flex-end;
+        display: block;
+        opacity: 0;
+        width: 100%;
+        padding: .25rem 0;
+        text-align: center;
+        background: rgba(0, 0, 0, 0.5);
+        font-size: .75rem;
+        font-weight: bold;
+        color: $white;
+        transition: opacity $transition;
+      }
+
+      &:hover .info {
+        opacity: 1;
+      }
+    }
+  }
+
+  .is-load-more-button {
+    margin: 1rem auto 0 !important;
+    display: block;
+    width: 200px;
+  }
+}
+</style>
\ No newline at end of file