delete button basic styling

mishankov · Jan 18, 2024 · b954a17 · b954a17
1 parent 8e916f9
commit b954a17
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
@@ -34,7 +34,7 @@
   {:else if manipulation.type == "splitJoin"}
     <SplitJoin bind:splitString={manipulation.splitString} bind:joinString={manipulation.joinString} bind:innerManipulations={manipulation.innerManipulations}/>
   {/if}
-  <button on:click={sendDeleteEvent}>x</button>
+  <button class="delete" on:click={sendDeleteEvent}>x</button>
 </div>
 
 <style>
@@ -55,4 +55,21 @@
     gap: 10px;
     align-items: center;
   }
+
+  .delete {
+    background-color: var(--bg-color-100);
+    color: var(--text-color);
+    border: none;
+    border-radius: 10px;
+  }
+
+  .delete:hover {
+    outline: none;
+    background-color: var(--bg-color-110);
+  }
+
+  .delete:active {
+    outline: none;
+    background-color: var(--bg-color-120);
+  }
 </style>
diff --git a/src/manipulations/components/SplitJoin.svelte b/src/manipulations/components/SplitJoin.svelte
@@ -44,6 +44,9 @@
   }
 
   .inner-manipulations {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     padding-left: 10px;
   }
 </style>