fix: sidebar apps

overskul · Sep 18, 2024 · a3aea50 · a3aea50
1 parent ec4f404
commit a3aea50
Showing 1 changed file with 78 additions and 59 deletions.
diff --git a/src/components/sidebar.scss b/src/components/sidebar.scss
@@ -1,4 +1,5 @@
 #sidebar {
+  display: flex;
   width: 85vw;
 
   & + .mask {
@@ -10,15 +11,89 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 5px;
-    gap: 5px;
+    width: 60px;
+    padding: 10px;
+    gap: 10px;
 
     .icon {
-      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       border-radius: 10px;
     }
   }
 
+  .container {
+    display: flex;
+    align-items: center;
+    margin: 0 !important;
+
+    &.search-in-files {
+      width: 100% !important;
+
+      .header {
+        .options {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 5px;
+          gap: 5px;
+          margin: 0 !important;
+
+          .input-checkbox {
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+            width: 100%;
+            height: 1.5rem;
+            font-size: 1rem;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+          }
+        }
+
+        [is='details'] {
+          padding-top: 10px !important;
+          border-top: 1.5px solid rgba(0, 0, 0, 0.15);
+
+          input {
+            margin-left: 10px !important;
+          }
+
+          textarea {
+            margin-left: 5px !important;
+          }
+
+          .marker,
+          .icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 30px;
+            width: 30px;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+          }
+
+          &[open] {
+            > [is='summary'] {
+              .marker {
+                background: var(--popup-active-color);
+              }
+            }
+          }
+        }
+      }
+
+      .editor-container {
+        display: flex;
+        align-items: center;
+        margin: 0 !important;
+        margin-left: 15px !important;
+      }
+    }
+  }
+
   textarea,
   input {
     border-radius: 5px;
@@ -45,59 +120,3 @@
     }
   }
 }
-
-.search-in-files {
-  .header {
-    .options {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px;
-      gap: 5px;
-      margin: 0 !important;
-
-      .input-checkbox {
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        width: 100%;
-        height: 1.5rem;
-        font-size: 1rem;
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-      }
-    }
-
-    [is='details'] {
-      padding-top: 10px !important;
-      border-top: 1.5px solid rgba(0, 0, 0, 0.15);
-
-      input {
-        margin-left: 10px !important;
-      }
-
-      textarea {
-        margin-left: 5px !important;
-      }
-
-      .marker,
-      .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 30px;
-        width: 30px;
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 10px;
-      }
-
-      &[open] {
-        > [is='summary'] {
-          .marker {
-            background: var(--popup-active-color);
-          }
-        }
-      }
-    }
-  }
-}