Skip to content

Commit b221d4b

Browse files
author
johmara
committed
Remove drag handle icon (::) for cleaner UI
- Remove ⋮⋮ icon from drag handle - Keep drag-handle element for proper spacing and functionality - Set opacity to 0 to hide without removing functionality - Maintains draggable area for reordering stopwatches
1 parent 87a2bd4 commit b221d4b

2 files changed

Lines changed: 5 additions & 6 deletions

File tree

src/app/app.component.css

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -226,18 +226,17 @@ header h1 {
226226
}
227227

228228
.drag-handle {
229-
font-size: 1.2rem;
230-
color: var(--main-color);
231-
opacity: 0.3;
232-
transition: opacity 0.2s;
229+
min-width: 24px;
230+
min-height: 24px;
233231
cursor: grab;
234232
user-select: none;
235233
display: flex;
236234
align-items: center;
235+
opacity: 0;
237236
}
238237

239238
.stopwatch-card:hover .drag-handle {
240-
opacity: 0.6;
239+
opacity: 0;
241240
}
242241

243242
.stopwatch-header {

src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ <h1>Multi-Stopwatch Timer</h1>
8282
(dragend)="onDragEnd()"
8383
>
8484
<div class="card-actions">
85-
<div class="drag-handle drag-handle-left" title="Drag to reorder">⋮⋮</div>
85+
<div class="drag-handle drag-handle-left"></div>
8686
<div class="card-actions-right">
8787
<button
8888
class="btn-edit-time"

0 commit comments

Comments
 (0)