|
|
@@ -333,8 +333,16 @@
|
|
|
<td class="total">{formatCurrency(stock.total)}</td>
|
|
|
<td class="percent">{calculatePercentage(stock.total, totalValue)}%</td>
|
|
|
<td>
|
|
|
- <button class="remove-btn" on:click={() => remove(stock.code)} title="remove"
|
|
|
- ></button>
|
|
|
+ <button class="remove-btn" aria-label="Delete" on:click={() => remove(stock.code)} title="remove">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"
|
|
|
+ stroke-linejoin="round">
|
|
|
+ <polyline points="3 6 5 6 21 6"></polyline>
|
|
|
+ <path d="M19 6l-1 14H6L5 6"></path>
|
|
|
+ <path d="M10 11v6"></path>
|
|
|
+ <path d="M14 11v6"></path>
|
|
|
+ <path d="M9 6V4h6v2"></path>
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
{/each}
|
|
|
@@ -426,7 +434,7 @@
|
|
|
padding: 4px 10px;
|
|
|
border-radius: 9999px;
|
|
|
font-size: 0.875rem;
|
|
|
- cursor: default;
|
|
|
+ cursor: default;
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
@@ -457,12 +465,37 @@
|
|
|
}
|
|
|
|
|
|
.remove-btn {
|
|
|
- height: 15px;
|
|
|
- width: 15px;
|
|
|
+ height: 32px;
|
|
|
+ width: 32px;
|
|
|
background-color: #e74c3c;
|
|
|
+ border: none;
|
|
|
border-radius: 50%;
|
|
|
- display: inline-block;
|
|
|
- border: 0;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.2s ease, transform 0.1s ease;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remove-btn svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remove-btn:hover {
|
|
|
+ background-color: #c0392b;
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .remove-btn:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ }
|
|
|
+
|
|
|
+ .remove-btn:focus {
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
|
|
|
}
|
|
|
|
|
|
.price {
|
