From f522f7c87b0709e20ed0c7f331e0d010eab8cece Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Thu, 15 Sep 2022 10:20:02 -0700
Subject: [PATCH] Refactor scss a bit

---
 src/components/Folder.vue | 62 +++++++++++++++++++--------------------
 src/components/Photo.vue  | 37 +++++++++++------------
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index a6a8af49..1913c0c2 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -93,18 +93,6 @@ export default class Folder extends Mixins(GlobalMixin) {
 <style lang="scss" scoped>
 .folder {
     cursor: pointer;
-
-    .name {
-        cursor: pointer;
-        width: 100%;
-        padding: 0 5%;
-        text-align: center;
-        font-size: 1.08em;
-        word-wrap: break-word;
-        text-overflow: ellipsis;
-        max-height: 35%;
-        line-height: 1em;
-    }
 }
 
 .big-icon {
@@ -115,13 +103,25 @@ export default class Folder extends Mixins(GlobalMixin) {
     width: 100%; height: 100%;
     transition: opacity 0.2s ease-in-out;
 
-    .folder.hasPreview & {
+    > .name {
+        cursor: pointer;
+        width: 100%;
+        padding: 0 5%;
+        text-align: center;
+        font-size: 1.08em;
+        word-wrap: break-word;
+        text-overflow: ellipsis;
+        max-height: 35%;
+        line-height: 1em;
+    }
+
+    .folder.hasPreview > & {
         .icon-folder { opacity: 1; }
         .name { color: white; }
     }
-    .folder.hasPreview:hover & { opacity: 0; }
+    .folder.hasPreview:hover > & { opacity: 0; }
 
-    .icon-folder {
+    > .icon-folder {
         cursor: pointer;
         height: 65%; width: 100%;
         opacity: 0.3;
@@ -138,7 +138,7 @@ export default class Folder extends Mixins(GlobalMixin) {
     width: calc(100% - 4px);
     top: 2px; left: 2px;
 
-    .img-outer {
+    > .img-outer {
         background-color: var(--color-loading-light);
         padding: 0;
         margin: 0;
@@ -146,26 +146,26 @@ export default class Folder extends Mixins(GlobalMixin) {
         height: 50%;
         display: inline-block;
 
-        .folder.onePreview & {
+        .folder.onePreview > & {
             width: 100%; height: 100%;
         }
-    }
 
-    img {
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        filter: brightness(50%);
+        > img {
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            filter: brightness(50%);
 
-        opacity: 1;
-        transition: opacity 0.15s ease, filter 0.2s ease-in-out;
-        will-change: opacity, filter;
-        transform: translateZ(0);
-        &.p-loading { opacity: 0; }
-        &.p-load-fail { display: none; }
+            opacity: 1;
+            transition: opacity 0.15s ease, filter 0.2s ease-in-out;
+            will-change: opacity, filter;
+            transform: translateZ(0);
+            &.p-loading { opacity: 0; }
+            &.p-load-fail { display: none; }
 
-        .folder:hover & {
-            filter: brightness(100%);
+            .folder:hover & {
+                filter: brightness(100%);
+            }
         }
     }
 }
diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index 96b9641c..dc572eb4 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -248,8 +248,8 @@ export default class Photo extends Mixins(GlobalMixin) {
     cursor: pointer;
     opacity: 0;
 
-    .p-outer:hover & { opacity: 0.7; }
-    .selected & { opacity: 0.9; filter: invert(1); }
+    .p-outer:hover > & { opacity: 0.7; }
+    .selected > & { opacity: 0.9; filter: invert(1); }
 }
 .icon-video-white {
     position: absolute;
@@ -271,23 +271,24 @@ div.img-outer {
     background-clip: content-box, padding-box;
     background-color: var(--color-loading-light);
 
-    .selected & { padding: 6%; }
-}
-img {
-    background-clip: content-box;
-    object-fit: cover;
-    cursor: pointer;
-    width: 100%; height: 100%;
-    opacity: 1;
-    transition: opacity 0.15s ease;
-    will-change: opacity;
-    transform: translateZ(0);
+    .selected > & { padding: 6%; }
 
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    user-select: none;
+    > img {
+        background-clip: content-box;
+        object-fit: cover;
+        cursor: pointer;
+        width: 100%; height: 100%;
+        opacity: 1;
+        transition: opacity 0.15s ease;
+        will-change: opacity;
+        transform: translateZ(0);
 
-    .selected & { box-shadow: 0 0 6px 2px var(--color-primary); }
-    .p-loading & { opacity: 0; }
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        user-select: none;
+
+        .selected > & { box-shadow: 0 0 6px 2px var(--color-primary); }
+        .p-loading > & { opacity: 0; }
+    }
 }
 </style>
\ No newline at end of file