ParkSuMin/WebBurBurBur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: lab1

Browse Source 
Добавлена подсветка карточки при наведении, а также появились иконки по правому краю
This commit is contained in:
ParkSuMin
2025-10-16 13:38:31 +03:00
parent ef32a25500
commit d62bf03304
2 changed files with 72 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lab/1/index.css
View File

@@ -142,5 +142,57 @@ body {
}
}
& > .tasks-container {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
& > .task {
display: flex;
overflow: hidden;
box-sizing: border-box;
padding: 12px 16px;
border-radius: 8px;
background-color: var(--tm-app-cp-blue-30);
font-size: clamp(14px, 1.1vw, 24px);
list-style: none;
border: 2px solid transparent;
&:hover{
background-color: var(--tm-app-cp-blue-50);
border-color: var(--tm-app-cp-blue-90);
}
& > .task__text {
flex: 1;
text-align: left;
transition: padding-right 0.3s ease;
overflow: hidden;
text-overflow: ellipsis;
}
.task__icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
& > .icon-row {
display: flex;
gap: 6px;
}
.icon {
width: clamp(16px, 1.3vw, 22px);
height: auto;
opacity: 60%;
&:hover{
opacity: 100%;
}
}
}
}
}
}
}

21
lab/1/index.html
View File

@@ -23,7 +23,26 @@
<li class="tasklist">
<h2 class="tasklist__name">К выполнению</h2>
<ul class="tasks-container">
<!-- TODO: Add tasks -->
<li class="task">
<span class="task__text">Приступить к курсовой работе по оптимизации</span>
<div class="task__icons">
<img src="assets/right-arrow.svg" alt="Right_Button" class="icon" />
<div class="icon-row">
<img src="assets/edit.svg" alt="Edit" class="icon" />
<img src="assets/delete-button.svg" alt="Delete" class="icon" />
</div>
</div>
</li>
<li class="task">
<span class="task__text">Задача 2. Уничтожить</span>
<div class="task__icons">
<img src="assets/right-arrow.svg" alt="Right_Button" class="icon" />
<div class="icon-row">
<img src="assets/edit.svg" alt="Edit" class="icon" />
<img src="assets/delete-button.svg" alt="Delete" class="icon" />
</div>
</div>
</li>
</ul>
<button class="tasklist__add-task-btn">
Add card...